Extjs4.2x與富文字框編輯器KindEditor的整合

jackchain發表於2014-03-23
JS

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>

 

相關文章