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）