Javascript - ExtJs - 整合百度文章编辑器

ExtJs - 整合百度文章编辑器（ExtJs UEditor）

第一步：去官网下载最新版本的UEditor，UEditor下载。

第二步：在编辑器根目录创建一个Extjs-Editor.js，录入以下代码。

目录结构如下

Ext.define('App.ux.UEditor', {
    extend: 'Ext.form.field.Text',
    alias: ['widget.ueditor'],
    //alternateClassName: 'Ext.form.UEditor',
    fieldSubTpl: [
        '<textarea id="{id}" {inputAttrTpl}',
            '<tpl if="name"> name="{name}"</tpl>',
            '<tpl if="rows"> rows="{rows}" </tpl>',
            '<tpl if="cols"> cols="{cols}" </tpl>',
            '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
            '<tpl if="size"> size="{size}"</tpl>',
            '<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
            '<tpl if="readOnly"> readonly="readonly"</tpl>',
            '<tpl if="disabled"> disabled="disabled"</tpl>',
            '<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
    //            ' class="{fieldCls} {inputCls}" ',
            '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
            ' autocomplete="off">\n',
            '<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>',
        '</textarea>',
        {
            disableFormats: true
        }
    ],
    ueditorConfig: {},
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
    },
    afterRender: function () {
        var me = this;
        me.callParent(arguments);
        if (!me.ue) {
            //编辑器各项参数配置，参考UEditor.config.js
            me.ue = UE.getEditor(me.getInputId(), Ext.apply(me.ueditorConfig, {
                //编辑器高度，可在此处修改，但不要在表单配置中修改，否则滚动条出现后工具栏会消失
                initialFrameHeight:320,
                initialFrameWidth: '100%',
                autoHeightEnabled: false,
                enableAutoSave: false,
                saveInterval:0
            }));
            me.ue.ready(function () {
                me.UEditorIsReady = true;
            });

            //这块 组件的父容器关闭的时候 需要销毁编辑器 否则第二次渲染的时候会出问题 可根据具体布局调整
            var win = me.up('window');
            if (win && win.closeAction == "hide") {
                win.on('beforehide', function () {
                    me.onDestroy();
                });
            } else {
                var panel = me.up('panel');
                if (panel && panel.closeAction == "hide") {
                    panel.on('beforehide', function () {
                        me.onDestroy();
                    });
                }
            }
        } else {
            me.ue.setContent(me.getValue());
        }
    },
    //返回编辑器实例
    getEditor:function(){
        var me=this;
        return UE.getEditor(me.getInputId());
    },
    setValue: function (value) {
        var me = this;
        if (!me.ue) {
            me.setRawValue(me.valueToRaw(value));
        } else {
            me.ue.ready(function () {
                me.ue.setContent(value);
            });
        }
        me.callParent(arguments);
        return me.mixins.field.setValue.call(me, value);
    },
    getRawValue: function () {
        var me = this;
        if (me.UEditorIsReady) {
            me.ue.sync(me.getInputId());
        }
        v = (me.inputEl ? me.inputEl.getValue() : Ext.value(me.rawValue, ''));
        me.rawValue = v;
        return v;
    },
    destroyUEditor: function () {
        var me = this;
        if (me.rendered) {
            try {
                me.ue.destroy();
                var dom = document.getElementById(me.id);
                if (dom) {
                    dom.parentNode.removeChild(dom);
                }
                me.ue = null;
            } catch (e) { }
        }
    },
    onDestroy: function () {
        var me = this;
        me.callParent();
        me.destroyUEditor();
    }
});

第三步：引入以下文件 （前三个是Extjs必须的文件，后三个是编辑器要使用的文件）

<link href="../scripts/Extjs4.2/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script src="../scripts/Extjs4.2/ext-all.js"></script>
<script src="../scripts/Extjs4.2/ext-lang-zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="ExtJsEditor/utf8-net/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ExtJsEditor/utf8-net/ueditor.all.min.js"> </script>
<script src="ExtJsEditor/Extjs-Editor.js"></script>

第四部：创建formPanel

Ext.onReady(function () {

    //展开树的按钮
    Ext.create("Ext.button.Button", {
        id:"treeBtn",text: "选择父栏目", style: "background:red;border:none;", icon: "../Image/expand.png",
        handler: function () {
            this.border = false;
            var  columnLabel=Ext.getCmp("columnLabel")
            var treepanel = Ext.getCmp("dataTree");
            if (!window.counter) { window.counter = 1; }
            if (window.counter % 2 != 0) {
                treepanel.show();//显示树
                this.setIcon("../Image/expand.png");
            }
            else {
                treepanel.hide();//隐藏树
                this.setIcon("../Image/expand-down.png");
            }
            window.counter += 1;
        }

    });

    Ext.create("Ext.form.FormPanel", {
        id:"articleForm",
        renderTo: "articleEditor",
        title: '写文章',
        width: 1000,
        style: "padding:10px;",
        frame: false,
        border: false,
        buttonAlign: "center",
        items: [
            {
                xtype: "fieldset",
                layout: "column",
                defaultType: "textfield",
                style:"margin-top:10px",
                width: 950,
                border: false,
                fieldDefaults: {
                    labelWidth: 40,
                    labelAlign: "left"
                },
                items: [
                        { fieldLabel: "标  题", name:"contenTitle",width: 930, }
                ]
            },
            {
                xtype: "fieldset",
                layout: "column",
                defaultType: "textfield",
                style: "margin-top:10px",
                width: 950,
                border: false,
                fieldDefaults: {
                    labelWidth: 40,
                    labelAlign: "left"
                },
                items: [
                        { fieldLabel: "作  者", name: "contenAuthor", width: 930 }
                ]
            },
            {
                xtype: "fieldset",
                layout: "column",
                defaultType: "textfield",
                width: 950,
                height:450,
                border: false,
                fieldDefaults: {
                    labelWidth: 40,
                    labelAlign: "left"
                },
                //编辑器
                items: [
                    {
                        xtype: 'ueditor',
                        fieldLabel: '内  容',
                        id: "content",
                        //不要设置高度，否则滚动条出现后工具栏会消失
                        width: 930
                    }
                ]
            }
        ],
        buttons: [
                { text: 'OK', style: "margin-top:20px", handler: function () {  } },
                { text: "Cancel", style: "margin-top:20px", handler: function () { form.reset(); } }
        ]
    });

});

获取编辑器的值

Extjs-Editor.js中我定义了一个返回UEditor实例的方法，如下：

getEditor:function(){
        var me=this;
        return UE.getEditor(me.getInputId());
}

获取编辑器中的值

要设置编辑器的其它项或获取html值等操作，可参考编辑器根目录下的Index.html源码。这里给个例子，比如获取纯文本：

//找到表单面板中的表单，再find文本框，调用getEditor()即可获得编辑器实例，getContentTxt()获得纯文本
Ext.getCmp("articleForm").getForm().findField("content").getEditor().getContentTxt()

解决下拉框不显示选项的问题

打开编辑器根目录，搜索ueditor.config.js，打开该文件，查找被注释掉的zIndex，把值改为1100000同时去掉注释保存，问题解决。注：以下提供的包是已经更改过zIndex的文件。

Extjs-UEditor下载（已配置好Extjs-Editor.js和zIndex）