ExtJs 集成kindEditor

我平时编辑文档时ExtJS带的editor编辑器往往有时无法满足我们的需求，所以我们需要一款更加强大的编辑器。

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

如上图这个，是不是很漂亮  ExtJS布局我就不在这里写了，代码太多了熟悉ExtJS的人应该很好弄，我用的是ExtJS5.1 GPL版本。

OK，首先我们得去kindEditor的官网下载插件包

下载kindeditor-4.1.10-zh-CN.zip

似乎从2013年最后一版更新后就没有再更新了......

好了，下载好我解压后：

会得到以上这么多东西，其实很多都是我们不需要的，我们只要以下这些就行了：

对，就这么点... 

把需要用的东西加载到index.html文件上去

<script type="text/javascript" src="{{path}}kindEditor/kindeditor-all-min.js"></script>
<script type="text/javascript" src="{{path}}kindEditor/lang/zh_CN.js"></script>

这样就完事了，需要的其他插件只要配置好后会动态加载，具体的去官网看文档吧，这里就不再描述了。

然后就到ExtJS了，这块代码会比较多，我们先把视图模块吧。

路径：#/app/view/life/LifeEditor.js

/**
 * 编辑文档的视图
 */
Ext.define('LatteCake.view.life.LifeEditor', {
    extend : 'Ext.form.Panel',
    alias : 'widget.LifeEditor', /** 取个别名 */
    xtype: 'LifeEditor',
    title: '编辑文章',
    /** 使用life-form控制器 */
    controller: 'life-form',

//    viewModel: true,

    initComponent : function() {

        var me = this;

        Ext.apply(this, {
            frame: true,
            bodyPadding: 5,
            resizable: true,

            fieldDefaults: {
                labelWidth: 70,
                anchor: '100%'
            },

            layout: {
                type: 'vbox',
                align: 'stretch'  // Child items are stretched to full width
            },

            defaultType: 'textfield',
            items: [
                {
                    allowBlank: false,
                    fieldLabel: '文章标题',
                    name: 'lifeTitle',
                    emptyText: '请输入标题',
                    invalidText: '标题最长64个字符.',
                    maxLength: 32
                },{
                    xtype: 'filefield',
                    emptyText: '',
                    fieldLabel: '文章图片',
                    name: 'lifeImage',
                    buttonText: '',
                    buttonConfig: {
                        iconCls: 'upload-icon'
                    }
                },{
                    xtype: 'textarea',
                    allowBlank: false,
                    fieldLabel: '文章简介',
                    name: 'lifeDesc',
                    invalidText: '标题最长255个字符.',
                    emptyText: '请输入文章简介',
                    maxLength: 255
                },
                {
                    xtype: 'textarea',
                    region: 'center',
                    name: 'content',
                    id: 'content',
                    height: 400,
                    listeners: {
                        'render': function (f) {
                            /** 延迟500毫秒显示，防止出现JS还没加载完就执行了 */
                            setTimeout(function () {
                                if (KindEditor) {
                                    /** 
                                     * 以下相当参数的设置可以去官网查文档
                                     * 只要把所创建好的对象赋值给 kEditor参数就行了 一会咱们要从控制器调取这个对象
                                     * 如果有其他需求用法与官网给的文档类似，不需要大家改动。
                                     */
                                    me.kEditor = KindEditor.create('#content-inputEl', {
                                        cssPath: '{{path}}kindEditor/plugins/code/prettify.css', /** CSS路径 */
                                        uploadJson : baseInfo.baseUrl + '{{path}}uploadImage',
                                        imageUploadJson: baseInfo.baseUrl + '{{path}}uploadImage',
                                        imageSizeLimit: '3MB', /** 限制大小 */
                                        resizeType: 0,
                                        resizeMode: 0,
                                        allowFileManager: true,
                                        height: 400
                                    });
                                }
                            }, 500);
                        }
                    }
                },{
                    fieldLabel: '来源',
                    name: 'lifeSource',
                    emptyText: '请输入文章来源地址',
                    invalidText: '标题最长128个字符.',
                    maxLength: 128
                },{
                    fieldLabel: '关键字',
                    name: 'lifeKeyword',
                    emptyText: '请输入文章关键字',
                    maxLength: 128
                }, {
                    xtype: 'tagfield',
                    fieldLabel: '标签',
//                    store: {
//                        type: 'states'
//                    },
                    name: 'lifeTag',
                    reference: 'locations',
                    displayField: 'state',
                    valueField: 'abbr',
                    createNewOnEnter: true,
                    createNewOnBlur: true,
                    filterPickList: true,
                    queryMode: 'local',
                    publishes: 'value'
                }
            ],
            buttons: [
                {
                    formBind: true,
                    disabled: true,
                    text: '保存',
                    listeners: {
                        click: 'submitNewLife'  }
                },
                {
                    text: '清除',
                    listeners: {
                        click: 'clearLifeEdit' /** 触发的事件 */
                    }
                }
            ]
        });

        this.callParent(arguments);
    }
});

这里用到了控制器我们把控制器也写一个加载进来 requires或在Applicaton.js里加载也行。

控制器路径：#/app/view/life/LifeController.js

/**
 * Life视图的控制器，用完自动消除
 */
Ext.define('LatteCake.view.life.LifeController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.life-form',

    /**
     * 保存
     */
    submitNewLife: function()
    {
        var form = this.getView().getForm(), /** 获取那个视图 */
            kEditor = this.getView().kEditor; /** 获取视图里的 kEditor 对象，刚刚Life视图里已经声明了 */
        var subData = form.getValues(); /** 获取form框的所有参数 */
        subData.lifeContent = kEditor.html();
        if( form.isValid() )
        {
            if( Ext.isEmpty( subData.lifeContent ))
            {
                Ext.Msg.alert('失败', '文章内容不能为空！');
                return;
            }
            form.submit({
                clientValidation: true,
                url: baseInfo.baseUrl + '{{path}}svaeLife',
                params: subData,
                waitMsg: '正在保存...',
                success: function(form, action) {
                    var response = action.result;
                    Ext.MsgTip.msg('提示', response.message);
                    form.reset();
                    kEditor.html('');
                },
                failure: function(form, action) {
                    Ext.Msg.alert('失败', action.result.message);
                }
            });
        }
    },
    /** 
     * 清除内容
     */
    clearLifeEdit: function()
    {
        var form = this.getView().getForm(),
            kEditor = this.getView().kEditor;
        form.reset();
        kEditor.html('');
    }
});

这样就完成了，就这么简单，然后服务器就可以接受数据了。

保存成功后直接返回就行了

$response = [
            'success'   => true,
            'errorCode' => '',
            'message'   => '操作成功',
            'data'      => ''
        ];
        return new JsonResponse($response);

关于自动保存这个，我以后再写，先把一个整体完成，至少让它可以跑起来。

原创，需要转载，请注明出处，谢谢合作