Question

我正在我的应用中构建一个部分，您可以在其中发送电子邮件为此，该用户需要粘贴完整的html内容并使用extjs中的html编辑器进行预览。

问题是Extjs删除了头部和身体并更改了doctype标记看看这里，点击底部的按钮：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);
});

Answer 1

这是Extjs论坛中提供的解决方案：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;

    },
});

Answer 2

不允许使用html标签，实际上它们被识别为。如果您希望显示标签，则需要更改如下

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

这将在编辑器上显示标签。

如果您不希望它们出现在编辑器上，则需要在将标签传递给电子邮件客户端时将标签连接起来。

Extjs htmleditor不会设置doctype和head标签

2 个答案: