Extjs4本身的HtmlEditor编辑器，太鸡肋了，简单的html能够应付一下，稍加复杂的就无能为力了。
对于Extjs的HtmlEditor扩展主要有三个方向，一个是扩展其本身的htmlEditor，这个我在2.2的时候，扩展过几个功能，例如图片上传，附件添加等等，效果并不是特别理想http://hi.baidu.com/chinacloud/item/8c078fce9763027fced4f8d7
第二个方法一般初学者都会想到，用iframe内嵌一个编辑页面，这个方式我只想说：别糟蹋Extjs
第三个方法就是引用第三方的插件，要善于使用*，用*来造车，自然我选择第三种。
富文本框编辑器选择很多，但唯有KindEditor让我青睐已久，从最初的版本到现在的4.x，一直在用，小巧稳定，功能强大，配置简单等，除此之外可能百度的Editor也还不错，其他的就不敢说了。
下面开始整合Extjs4和Kindeditor，Extjs是一套非常优秀的RIA框架，能够非常方便的实现类的继承和扩展，我们新创建一个组建，继承textarea。
Ext.define('WMC.common.view.ExtKindEditor', {
extend: 'Ext.form.field.TextArea',
alias: 'widget.extkindeditor',//xtype名称
initComponent: function () {
this.html = "<textarea id='" + this.getId() + "-input' name='" + this.name + "'></textarea>";
this.callParent(arguments);
this.on("boxready", function (t) {
this.inputEL = Ext.get(this.getId() + "-input");
this.editor = KindEditor.create('textarea[name="' + this.name + '"]', {
height: t.getHeight()-18,//有底边高度，需要减去
width: t.getWidth() - t.getLabelWidth(),//宽度需要减去label的宽度
basePath: '/Content/Plugin/kindeditor-4.1.5/',
uploadJson: '/Content/Plugin/kindeditor-4.1.5/asp.net/upload_json.ashx',//路径自己改一下
fileManagerJson: '/Content/Plugin/kindeditor-4.1.5/asp.net/file_manager_json.ashx',//路径自己改一下
resizeType: 0,
wellFormatMode: true,
newlineTag: 'br',
allowFileManager: true,
allowPreviewEmoticons: true,
allowImageUpload: true,
items: [
'source', '|', 'undo', 'redo', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', '|',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'bold',
'italic', 'underline', 'lineheight', '|', 'image', 'multiimage',
'table', 'emoticons',
'link', 'unlink', 'fullscreen'
]
});
});
this.on("resize", function (t, w, h) {
this.editor.resize(w - t.getLabelWidth(), h-18);
});
},
setValue: function (value) {
if (this.editor) {
this.editor.html(value);
}
},
reset: function () {
if (this.editor) {
this.editor.html('');
}
},
setRawValue: function (value) {
if (this.editor) {
this.editor.text(value);
}
},
getValue: function () {
if (this.editor) {
return this.editor.html();
} else {
return ''
}
},
getRawValue: function () {
if (this.editor) {
return this.editor.text();
} else {
return ''
}
}
});
使用方法，和其他的field类似，如下：
//首先controller里要引用进来
Ext.define('WMC.controller.Main', {
extend: 'Ext.app.Controller',
.....
views: ['EditWin','WMC.common.view.ExtKindEditor'],
... //之后，在需要编辑的Window里，使用：
{
xtype: 'extkindeditor',
allowBlank: false,
name: 'Responsibilities',
height: 140,
width:670,
id: 'Responsibilities',
fieldLabel: '岗位职责'
}
然后界面就可以构造出来了
那么还剩一步，如何设置和获取extkindeditor的值呢？
//this.getSkills(),this.getResponsibilities()为refs中配置的get属性 //编辑
editRecord: function (view, record, item, index) {
var win = this.getEditWin();
var form = win.down("form");
form.loadRecord(record);
win.show();
//显示时候，将html的值显示到kindeditor中
this.getSkills().setValue(record.data.Skills);
this.getResponsibilities().setValue(record.data.Responsibilities);
},
//保存
saveRecord: function () {
var win = this.getEditWin();
var form = win.down("form");
var model = form.getValues();
//这里是重点，不设置的话，默认是非html格式的
model.Skills = this.getSkills().getValue();
model.Responsibilities = this.getResponsibilities().getValue(); if (form.isValid()) {
record = form.getRecord();
var store = this.getMainGrid().getStore();
if (record) {//如果是修改
record.set(model);
}
else {
store.add(model);
}
win.close();
store.sync();
}
},
OK，Enjoy It！
额。。。忘记了，不要忘记在页面head里加上引用：
<link href="~/Content/Plugin/kindeditor-4.1.5/themes/default/default.css" rel="stylesheet" />
<script src="~/Content/Plugin/kindeditor-4.1.5/kindeditor-all-min.js"></script>
<script src="~/Content/Plugin/kindeditor-4.1.5/lang/zh_CN.js"></script>