Loading ...
Sorry, an error occurred while loading the content.

Treating a div as a single "unit" in RTE Editor

Expand Messages
  • m h
    Hey Folks- Forst thanks to the YUI devs for all their hard work. It is appreciated. I d like to be able to (programmatically) insert a styled div into an RTE
    Message 1 of 3 , Feb 4, 2010
    • 0 Attachment
      Hey Folks-

      Forst thanks to the YUI devs for all their hard work. It is appreciated.

      I'd like to be able to (programmatically) insert a styled div into an
      RTE editor and treat it as a single unit. Ie I'd like the text in it
      to not be editable, same with the images.

      Here's an example: In looking at the samples, there's the calendar
      plugin [0]. I'd like something similar, but instead of entering plain
      text into the editor, I'd like to insert a nicely styled div,
      containing the date. This is un-editable in itself, but if you click
      on it, it brings up the calendar editor again.

      I imagine this is possible, I'm just at a loss as to where to start.
      I'm assuming I need to update the beforeEditorClick and reject clicks
      inside that div?!

      Is that the correct way? Is there a better way?

      cheers,
      -matt

      0 - http://developer.yahoo.com/yui/examples/editor/cal_editor.html
    • Dav Glass
      Matt -- First, you can change these lines: var calDate = + (ev.calDate.getMonth() + 1) + / + ev.calDate.getDate() + / +
      Message 2 of 3 , Feb 4, 2010
      • 0 Attachment
        Matt --
        First, you can change these lines:

        var calDate = ' <span class="date">' + (ev.calDate.getMonth() + 1)
        + '/' + ev.calDate.getDate()
        + '/' + ev.calDate.getFullYear() + '</span> ';
        this.execCommand('inserthtml', calDate);

        That is the span that injects the Date into the Editor. You can change
        it all you want.

        If you add the class 'yui-noedit' to that span and turn on allowNoEdit
        in the config, it will not be editable.

        http://developer.yahoo.com/yui/docs/YAHOO.widget.SimpleEditor.html#config_allowNoEdit

        --
        Dav Glass
        davglass@...
        blog.davglass.com


        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
           without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
          McDonalds Certified Food Specialist is to fine cuisine  +


        On Thu, Feb 4, 2010 at 10:40 AM, m h <sesquile@...> wrote:
        >
        >
        >
        > Hey Folks-
        >
        > Forst thanks to the YUI devs for all their hard work. It is appreciated.
        >
        > I'd like to be able to (programmatically) insert a styled div into an
        > RTE editor and treat it as a single unit. Ie I'd like the text in it
        > to not be editable, same with the images.
        >
        > Here's an example: In looking at the samples, there's the calendar
        > plugin [0]. I'd like something similar, but instead of entering plain
        > text into the editor, I'd like to insert a nicely styled div,
        > containing the date. This is un-editable in itself, but if you click
        > on it, it brings up the calendar editor again.
        >
        > I imagine this is possible, I'm just at a loss as to where to start.
        > I'm assuming I need to update the beforeEditorClick and reject clicks
        > inside that div?!
        >
        > Is that the correct way? Is there a better way?
        >
        > cheers,
        > -matt
        >
        > 0 - http://developer.yahoo.com/yui/examples/editor/cal_editor.html
        >
        >
      • m h
        Dav- I really appreciate your response. It mostly works! I say mostly because there is a bug that allows you to delete the final character of a yui-noedit
        Message 3 of 3 , Feb 4, 2010
        • 0 Attachment
          Dav-

          I really appreciate your response. It mostly works! I say mostly
          because there is a bug that allows you to delete the final character
          of a yui-noedit span that is inserted before existing text. The code
          path goes _isNonEditable -> _getDomPath -> _getSelectedElement. The
          selected element turns out to be the body (deletable), but since it is
          a back delete, you really need to check the previous element.

          Hopefully I can come up with a patch. (I'm on FF 3.6/Linux).

          I've filed this as #2528771

          cheers
          -matt

          On Thu, Feb 4, 2010 at 12:00 PM, Dav Glass <davglass@...> wrote:
          > Matt --
          > First, you can change these lines:
          >
          > var calDate = ' <span class="date">' + (ev.calDate.getMonth() + 1)
          >        + '/' + ev.calDate.getDate()
          >        + '/' + ev.calDate.getFullYear() + '</span> ';
          >    this.execCommand('inserthtml', calDate);
          >
          > That is the span that injects the Date into the Editor. You can change
          > it all you want.
          >
          > If you add the class 'yui-noedit' to that span and turn on allowNoEdit
          > in the config, it will not be editable.
          >
          > http://developer.yahoo.com/yui/docs/YAHOO.widget.SimpleEditor.html#config_allowNoEdit
          >
          > --
          > Dav Glass
          > davglass@...
          > blog.davglass.com
          >
          >
          > + Windows: n. - The most successful computer virus, ever. +
          > + A computer without a Microsoft operating system is like a dog
          >    without bricks tied to its head +
          > + A Microsoft Certified Systems Engineer is to computing what a
          >   McDonalds Certified Food Specialist is to fine cuisine  +
          >
          >
          > On Thu, Feb 4, 2010 at 10:40 AM, m h <sesquile@...> wrote:
          >>
          >>
          >>
          >> Hey Folks-
          >>
          >> Forst thanks to the YUI devs for all their hard work. It is appreciated.
          >>
          >> I'd like to be able to (programmatically) insert a styled div into an
          >> RTE editor and treat it as a single unit. Ie I'd like the text in it
          >> to not be editable, same with the images.
          >>
          >> Here's an example: In looking at the samples, there's the calendar
          >> plugin [0]. I'd like something similar, but instead of entering plain
          >> text into the editor, I'd like to insert a nicely styled div,
          >> containing the date. This is un-editable in itself, but if you click
          >> on it, it brings up the calendar editor again.
          >>
          >> I imagine this is possible, I'm just at a loss as to where to start.
          >> I'm assuming I need to update the beforeEditorClick and reject clicks
          >> inside that div?!
          >>
          >> Is that the correct way? Is there a better way?
          >>
          >> cheers,
          >> -matt
          >>
          >> 0 - http://developer.yahoo.com/yui/examples/editor/cal_editor.html
          >>
          >>
          >
          >
          > ------------------------------------
          >
          > Yahoo! Groups Links
          >
          >
          >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.