Extjs htmleditor wont set doctype and head tags

StackOverflow https://stackoverflow.com/questions/21474620

  •  05-10-2022
  •  | 
  •  

Question

I am building a section in my app where you can send emails.
In order to do that, this user needs to paste a complete html content and preview it with the html editor in extjs.

The problem is that Extjs remove head and body and changing the doctype tag have a look here, click on the buttons at the bottom: http://jsfiddle.net/LKJSm/

Ext.onReady(function () {
    Ext.tip.QuickTipManager.init();
    var top = Ext.create('Ext.form.Panel', {
        items: [{
            xtype: 'htmleditor',
            name: 'htmlContent',
            height: 300,
            anchor: '100%'
        }],
        buttons: [{
            text: 'Set doctype with head and body',
            handler: function () {
                top.down('htmleditor').setValue("<DOCTYPE /><head></head><body>body here</body>");
            }
        }, {
            text: 'Alert Content',
            handler: function () {
                var editor = top.getForm().findField('htmlContent');
                alert(editor.getValue());
            }
        }]
    });
    top.render(document.body);
});
Was it helpful?

Solution

here is a solution provided in Extjs forums: http://www.sencha.com/forum/showthread.php?146160-HTMLEditor-strips-dtd-head-and-body-tags 

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;

    },
});

OTHER TIPS

use of html tags are not allowed, in fact they are identified as thereat. if you want the tags to be displayed you need to change as follows

top.down('htmleditor').setValue("&lt;DOCTYPE /&gt; &lt;head&gt;&lt;/head&gt;&lt;body&gt;body here&lt;/body&gt;");

this will display the tags on the editor for now.

if you don't want them to show up on the editor you need to concatenate the tags when you pass it to the email client.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top