Results 1 to 3 of 3

Thread: HTMLEditor strips dtd, head and body tags

  1. #1
    Sencha User radtchenko's Avatar
    Join Date
    Feb 2011
    Location
    The Netherlands
    Posts
    8

    Default HTMLEditor strips dtd, head and body tags

    Hi,

    This appears to be the problem: whenever I insert html code into an HTMLEditor in Source Editing mode, then toggle it to normal and back to the SE mode again, the doctype, html, head and body tags are gone. The same happens if I save the code directly into the database, then fetch it into the editor and view the source. There appears to be no setting, property or even method to disable this behavior in the documentation, neither does Google have an answer.

    Is this the proper way for it to behave and if not, does anyone have a solution?

    Thanks in advance!
    Main OS (exceptions are mentioned in support posts): Linux Mint 10 x64
    Using Ext Designer version: 1.1.2 x86-32

  2. #2
    Sencha User radtchenko's Avatar
    Join Date
    Feb 2011
    Location
    The Netherlands
    Posts
    8

    Default

    As far as I see, this happens in all versions of ExtJS. I take it may be done on purpose, since such editors usually aren't meant for building entire HTML-pages, just pieces of markup code (correct me if I'm wrong in case of the ExtJS HTMLEditor). In my case it is used to build HTML mail templates, so for all mailclients to render the contents properly, I need complete, valid markup to come out.

    I've managed to write a workaround for it, but since it's a quite dirty solution for a won't-fix, quite application-specific and I'm working on a cleaner solution, I don't think it's worth sharing.
    Main OS (exceptions are mentioned in support posts): Linux Mint 10 x64
    Using Ext Designer version: 1.1.2 x86-32

  3. #3
    Ext JS Premium Member dogomatic's Avatar
    Join Date
    Aug 2007
    Location
    Canada
    Posts
    111

    Default

    Did your dirty hack look like this? This approach of commenting and uncommenting the !DOCTYPE, html, head and body tags on the way in and out seems to work for me, although I haven't tested it on IE yet.

    Code:
    Ext.define('MyHTMLEditor', {
        extend:'Ext.form.HtmlEditor',
        alias: 'widget.myhtmleditor',
        tagsToComment: ['!DOCTYPE', 'html', 'head', 'body'],
        /**
         * Pushing value to wysiwyg iframe loses dtd, html, head and body tags.
         * Override hack to comment them out when pushing to iframe, and then uncomment 
         * them on the way back (see this.cleanHtml).
         */
        pushValue: function() {
            var me = this,
                v;
            if(me.initialized){
                v = me.textareaEl.dom.value || '';
                if (!me.activated && v.length < 1) {
                    v = me.defaultValue;
                }
                if (me.fireEvent('beforepush', me, v) !== false) {
                    ///////////// change
                    for (var i=0;i<me.tagsToComment.length;i++) {
                        v = v.replace(RegExp('<(\s*\/?'+me.tagsToComment[i]+'.*?)>', 'ig'), '<!--$1-->');
                    }
                    
                    /////////////
                    me.getEditorBody().innerHTML = v;
                    if (Ext.isGecko) {
                        // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
                        me.setDesignMode(false);  //toggle off first
                        me.setDesignMode(true);
                    }
                    me.fireEvent('push', me, v);
                }
            }
        },
        
        /**
         * Uncomment the tags mentioned in pushValue
         */
        cleanHtml: function(html) {
            var me = this, i,
                result = me.callParent(arguments);
            
            for (i=0;i<me.tagsToComment.length;i++) {
                result = result.replace(RegExp('<!--(\s*\/?'+me.tagsToComment[i]+'.*?)-->', 'ig'), '<$1>');
            }
            return result;
            
        },
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •