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。
1 Ext.define('WMC.common.view.ExtKindEditor', {
2 extend: 'Ext.form.field.TextArea',
3 alias: 'widget.extkindeditor',//xtype名稱
4 initComponent: function () {
5 this.html = "<textarea id='" + this.getId() + "-input' name='" + this.name + "'></textarea>";
6 this.callParent(arguments);
7 this.on("boxready", function (t) {
8 this.inputEL = Ext.get(this.getId() + "-input");
9 this.editor = KindEditor.create('textarea[name="' + this.name + '"]', {
10 height: t.getHeight()-18,//有底邊高度,需要減去
11 width: t.getWidth() - t.getLabelWidth(),//寬度需要減去label的寬度
12 basePath: '/Content/Plugin/kindeditor-4.1.5/',
13 uploadJson: '/Content/Plugin/kindeditor-4.1.5/asp.net/upload_json.ashx',//路徑自己改一下
14 fileManagerJson: '/Content/Plugin/kindeditor-4.1.5/asp.net/file_manager_json.ashx',//路徑自己改一下
15 resizeType: 0,
16 wellFormatMode: true,
17 newlineTag: 'br',
18 allowFileManager: true,
19 allowPreviewEmoticons: true,
20 allowImageUpload: true,
21 items: [
22 'source', '|', 'undo', 'redo', '|', 'justifyleft', 'justifycenter', 'justifyright',
23 'justifyfull', 'insertorderedlist', 'insertunorderedlist', '|',
24 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'bold',
25 'italic', 'underline', 'lineheight', '|', 'image', 'multiimage',
26 'table', 'emoticons',
27 'link', 'unlink', 'fullscreen'
28 ]
29 });
30 });
31 this.on("resize", function (t, w, h) {
32 this.editor.resize(w - t.getLabelWidth(), h-18);
33 });
34 },
35 setValue: function (value) {
36 if (this.editor) {
37 this.editor.html(value);
38 }
39 },
40 reset: function () {
41 if (this.editor) {
42 this.editor.html('');
43 }
44 },
45 setRawValue: function (value) {
46 if (this.editor) {
47 this.editor.text(value);
48 }
49 },
50 getValue: function () {
51 if (this.editor) {
52 return this.editor.html();
53 } else {
54 return ''
55 }
56 },
57 getRawValue: function () {
58 if (this.editor) {
59 return this.editor.text();
60 } else {
61 return ''
62 }
63 }
64 });
使用方法,和其他的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>
作者:Jack.Chain
出處:http://www.cnblogs.com/qidian10