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

[RTE] How to set RTE to do only code editing?

Expand Messages
  • F
    Hello, I am using the RTE html code editor to insert Javascript code. When I place my code calling myEditor.setEditorHTML(str) the editor trunks all code
    Message 1 of 5 , Apr 25, 2008
    • 0 Attachment
      Hello,

      I am using the RTE html code editor to insert Javascript code.

      When I place my code calling "myEditor.setEditorHTML(str)" the editor
      trunks all code after the first less than "<" encountered. How can I
      avoid this?

      For example:
      ...
      i=0, j=oResults.ResultSet.Result.length; i
      <j; _moz-userdefined="" i="0," j="aStates.length;"
      ...
      </j;>


      Tnx



      This is the code I am using:

      var myEditor;
      (function() {
      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event,
      status = null;

      var myConfig = {
      height: '300px',
      width: '530px',
      animate: true,
      dompath: true,
      focusAtStart: true
      };

      var handleSuccess = function(o) {
      myEditor.setEditorHTML(o.responseText);
      }
      var handleFailure = function(o) {
      var json =
      o.responseText.substring(o.responseText.indexOf('{'),
      o.responseText.lastIndexOf('}') + 1);
      var data = eval('(' + json + ')');
      status.innerHTML = 'Status: ' + data.Results.status + '<br>';
      }

      var callback = {
      success: handleSuccess,
      failure: handleFailure
      };

      var _button = new YAHOO.widget.Button('submitEditor');

      var state = 'off';

      myEditor = new YAHOO.widget.Editor('editor', myConfig);
      myEditor.on('toolbarLoaded', function() {
      var codeConfig = {
      type: 'push', label: 'Edit HTML Code', value: 'editcode'
      };
      this.toolbar.addButtonToGroup(codeConfig, 'insertitem');

      this.toolbar.on('editcodeClick', function() {
      var ta = this.get('element'),
      iframe = this.get('iframe').get('element');

      if (state == 'on') {
      state = 'off';
      this.toolbar.set('disabled', false);
      this.setEditorHTML(ta.value);
      if (!this.browser.ie) {
      this._setDesignMode('on');
      }

      Dom.removeClass(iframe, 'editor-hidden');
      Dom.addClass(ta, 'editor-hidden');
      this.show();
      this._focusWindow();
      } else {
      state = 'on';
      this.cleanHTML();
      Dom.addClass(iframe, 'editor-hidden');
      Dom.removeClass(ta, 'editor-hidden');
      this.toolbar.set('disabled', true);

      this.toolbar.getButtonByValue('editcode').set('disabled', false);
      this.toolbar.selectButton('editcode');
      this.dompath.innerHTML = 'Editing HTML Code';
      this.hide();
      }
      return false;
      }, this, true);

      this.on('cleanHTML', function(ev) {
      this.get('element').value = ev.html;
      }, this, true);

      this.on('afterRender', function() {
      var wrapper = this.get('editor_wrapper');
      wrapper.appendChild(this.get('element'));
      this.setStyle('width', '100%');
      this.setStyle('height', '100%');
      this.setStyle('visibility', '');
      this.setStyle('top', '');
      this.setStyle('left', '');
      this.setStyle('position', '');

      this.addClass('editor-hidden');
      }, this, true);
      }, myEditor, true);

      _button.on('click', function(ev) {
      Event.stopEvent(ev);
      myEditor.saveHTML();
      window.setTimeout(function() {
      var sUrl = "update.resource";
      var data = 'filter=' + ((Dom.get('filter').checked) ?
      'yes' : 'no') + '&editor_data=' +
      encodeURIComponent(myEditor.get('textarea').value);
      if (Dom.get('id').value!=""||Dom.get('id').value!="0")
      data += '&id=' + Dom.get('id').value;
      var request = YAHOO.util.Connect.asyncRequest('POST',
      sUrl, callback, data);
      }, 200);
      });


      myEditor.render();

      Event.onDOMReady(function() {
      status = Dom.get('status');
      });
      })();
    • Dav Glass
      F -- The RTE is designed to work with HTML, so when you put a string in via setEditorHTML it assumes that this string is HTML. If you want to put some kind of
      Message 2 of 5 , Apr 25, 2008
      • 0 Attachment
        F --

        The RTE is designed to work with HTML, so when you put a string in via setEditorHTML it assumes that this string is HTML.

        If you want to put some kind of scripting in, then you will need to convert the < character into the < code and the > character into the > code..

        That is the only way they will display. You will also have to convert them back again when you go to save the data.

        Does that make sense?
        Dav

        Dav Glass
        dav.glass@...
        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 +


        ----- Original Message ----
        From: F <francesco.valle@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Friday, April 25, 2008 2:05:36 PM
        Subject: [ydn-javascript] [RTE] How to set RTE to do only code editing?

        Hello,

        I am using the RTE html code editor to insert Javascript code.

        When I place my code calling "myEditor.setEditorHTML(str)" the editor
        trunks all code after the first less than "<" encountered. How can I
        avoid this?

        For example:
        ...
        i=0, j=oResults.ResultSet.Result.length; i
        <j; _moz-userdefined="" i="0," j="aStates.length;"
        ...
        </j;>


        Tnx



        This is the code I am using:

        var myEditor;
        (function() {
        var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        status = null;

        var myConfig = {
        height: '300px',
        width: '530px',
        animate: true,
        dompath: true,
        focusAtStart: true
        };

        var handleSuccess = function(o) {
        myEditor.setEditorHTML(o.responseText);
        }
        var handleFailure = function(o) {
        var json =
        o.responseText.substring(o.responseText.indexOf('{'),
        o.responseText.lastIndexOf('}') + 1);
        var data = eval('(' + json + ')');
        status.innerHTML = 'Status: ' + data.Results.status + '<br>';
        }

        var callback = {
        success: handleSuccess,
        failure: handleFailure
        };

        var _button = new YAHOO.widget.Button('submitEditor');

        var state = 'off';

        myEditor = new YAHOO.widget.Editor('editor', myConfig);
        myEditor.on('toolbarLoaded', function() {
        var codeConfig = {
        type: 'push', label: 'Edit HTML Code', value: 'editcode'
        };
        this.toolbar.addButtonToGroup(codeConfig, 'insertitem');

        this.toolbar.on('editcodeClick', function() {
        var ta = this.get('element'),
        iframe = this.get('iframe').get('element');

        if (state == 'on') {
        state = 'off';
        this.toolbar.set('disabled', false);
        this.setEditorHTML(ta.value);
        if (!this.browser.ie) {
        this._setDesignMode('on');
        }

        Dom.removeClass(iframe, 'editor-hidden');
        Dom.addClass(ta, 'editor-hidden');
        this.show();
        this._focusWindow();
        } else {
        state = 'on';
        this.cleanHTML();
        Dom.addClass(iframe, 'editor-hidden');
        Dom.removeClass(ta, 'editor-hidden');
        this.toolbar.set('disabled', true);

        this.toolbar.getButtonByValue('editcode').set('disabled', false);
        this.toolbar.selectButton('editcode');
        this.dompath.innerHTML = 'Editing HTML Code';
        this.hide();
        }
        return false;
        }, this, true);

        this.on('cleanHTML', function(ev) {
        this.get('element').value = ev.html;
        }, this, true);

        this.on('afterRender', function() {
        var wrapper = this.get('editor_wrapper');
        wrapper.appendChild(this.get('element'));
        this.setStyle('width', '100%');
        this.setStyle('height', '100%');
        this.setStyle('visibility', '');
        this.setStyle('top', '');
        this.setStyle('left', '');
        this.setStyle('position', '');

        this.addClass('editor-hidden');
        }, this, true);
        }, myEditor, true);

        _button.on('click', function(ev) {
        Event.stopEvent(ev);
        myEditor.saveHTML();
        window.setTimeout(function() {
        var sUrl = "update.resource";
        var data = 'filter=' + ((Dom.get('filter').checked) ?
        'yes' : 'no') + '&editor_data=' +
        encodeURIComponent(myEditor.get('textarea').value);
        if (Dom.get('id').value!=""||Dom.get('id').value!="0")
        data += '&id=' + Dom.get('id').value;
        var request = YAHOO.util.Connect.asyncRequest('POST',
        sUrl, callback, data);
        }, 200);
        });


        myEditor.render();

        Event.onDOMReady(function() {
        status = Dom.get('status');
        });
        })();


        ------------------------------------

        Yahoo! Groups Links
      • F
        ... via setEditorHTML it assumes that this string is HTML. ... convert the character into the > code.. ... convert
        Message 3 of 5 , Apr 25, 2008
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
          >
          > F --
          >
          > The RTE is designed to work with HTML, so when you put a string in
          via setEditorHTML it assumes that this string is HTML.
          >
          > If you want to put some kind of scripting in, then you will need to
          convert the < character into the < code and the > character into
          the > code..
          >
          > That is the only way they will display. You will also have to
          convert them back again when you go to save the data.
          >
          > Does that make sense?

          Yeah, of course :)

          But this means that I need a routine to parse my javascript code
          nested into my xml format :-)


          Really great YUI, tnx
        • danvdascalescu
          Hi, I m new to the RTE. I started digging into it today in order to build a code editor for our open-sourced project http://sourceforge.net/projects/rthree .
          Message 4 of 5 , Oct 1, 2008
          • 0 Attachment
            Hi,

            I'm new to the RTE. I started digging into it today in order to build
            a code editor for our open-sourced project
            http://sourceforge.net/projects/rthree .

            I've seen at
            http://tech.groups.yahoo.com/group/ydn-javascript/message/21826 that
            apparently a "source code" editing functionality has been released
            with version 2.4.0... however I didn't find any documentation for
            that. I did find the "Code Editor" example at
            http://developer.yahoo.com/yui/examples/editor/code_editor.html, which
            shows how to edit the HTML source, but that's a bit short of a real
            code editor:

            1. toolbar buttons don't work in "source code" mode (even if you
            comment out the line that disables them). It would be nice to be able
            to select some text in source mode, click "b", and have <b> and </b>
            inserted around it.

            2. there seems to be HTML pretty-printing and filtering against the
            <script> element. The former can be disabled apparently by not calling
            cleanHTML(), while the latter is addressed at
            http://tech.groups.yahoo.com/group/ydn-javascript/message/31167, but
            see #3

            3. If, in order to get a code editor, we escape <, > and & and load
            the text in the HTML editor, we'll have to disable toolbar buttons.
            But what if someone pastes rich text from another application? That
            will add bogus formatting.

            Hope I missed something and there is a "source code" editing mode like
            in FCKeditor (I haven't been through the entire docs yet).

            Thanks,
            Dan
          • Dav Glass
            Dan -- No, there is no official source editor in the RTE. There are issues in Safari and Opera that keep me from writing one. With the release of Safari 3 and
            Message 5 of 5 , Oct 1, 2008
            • 0 Attachment
              Dan --

              No, there is no official source editor in the RTE.
              There are issues in Safari and Opera that keep me from writing one.

              With the release of Safari 3 and Opera 9.5, it may be possible. I haven't looked into it in a while..

              Here is a prototype that I started working on a while ago:
              http://blog.davglass.com/files/yui/codeeditor/

              It's not ready, but the concept is where I would be going if it does make it on the roadmap.

              Dav

              Dav Glass
              dav.glass@...
              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 +



              ----- Original Message ----
              > From: danvdascalescu <danvdascalescu@...>
              > To: ydn-javascript@yahoogroups.com
              > Sent: Wednesday, October 1, 2008 6:42:50 PM
              > Subject: [ydn-javascript] Re: [RTE] How to set RTE to do only code editing?
              >
              > Hi,
              >
              > I'm new to the RTE. I started digging into it today in order to build
              > a code editor for our open-sourced project
              > http://sourceforge.net/projects/rthree .
              >
              > I've seen at
              > http://tech.groups.yahoo.com/group/ydn-javascript/message/21826 that
              > apparently a "source code" editing functionality has been released
              > with version 2.4.0... however I didn't find any documentation for
              > that. I did find the "Code Editor" example at
              > http://developer.yahoo.com/yui/examples/editor/code_editor.html, which
              > shows how to edit the HTML source, but that's a bit short of a real
              > code editor:
              >
              > 1. toolbar buttons don't work in "source code" mode (even if you
              > comment out the line that disables them). It would be nice to be able
              > to select some text in source mode, click "b", and have and
              > inserted around it.
              >
              > 2. there seems to be HTML pretty-printing and filtering against the
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.