正文
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）
