ExtJs - 整合百度文章编辑器（ExtJs UEditor）
第一步：去官网下载最新版本的UEditor，。
第二步：在编辑器根目录创建一个Extjs-Editor.js，录入以下代码。
目录结构如下
Ext.define('App.ux.UEditor', { extend: 'Ext.form.field.Text', alias: ['widget.ueditor'], //alternateClassName: 'Ext.form.UEditor', fieldSubTpl: [ '', { 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必须的文件，后三个是编辑器要使用的文件）
第四部：创建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的文件。
