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"> ', '<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: '写文章', 1000, style: "padding:10px;", frame: false, border: false, buttonAlign: "center", items: [ { xtype: "fieldset", layout: "column", defaultType: "textfield", style:"margin-top:10px", 950, border: false, fieldDefaults: { labelWidth: 40, labelAlign: "left" }, items: [ { fieldLabel: "标 题", name:"contenTitle", 930, } ] }, { xtype: "fieldset", layout: "column", defaultType: "textfield", style: "margin-top:10px", 950, border: false, fieldDefaults: { labelWidth: 40, labelAlign: "left" }, items: [ { fieldLabel: "作 者", name: "contenAuthor", 930 } ] }, { xtype: "fieldset", layout: "column", defaultType: "textfield", 950, height:450, border: false, fieldDefaults: { labelWidth: 40, labelAlign: "left" }, //编辑器 items: [ { xtype: 'ueditor', fieldLabel: '内 容', id: "content", //不要设置高度,否则滚动条出现后工具栏会消失 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的文件。