Extjs htmleditor wont set doctype and head tags

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

  •  05-10-2022
  •  | 
  •  

题

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);
});
有帮助吗？

解决方案

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;

    },
});

其他提示

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.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top