• Extjs4.2x与富文本框编辑器KindEditor的整合


    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                  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,
            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>
  • 相关阅读:
    关于Git的使用方法
    Python读取Excel数据
    用到的Dos命令总结 持续更新
    windows下使用Jenkins+Gitea持续集成
    HDFS概述(2)————Block块大小设置
    分布式文件系统比较出名的有HDFS  和 GFS
    c++里面有没有什么办法做到 判断某个给定的未知数是double类型还是int类型 呢?
    About HDFS blocks
    hadoop深入学习之SequenceFile
    使用RawComparator加速Hadoop程序
  • 原文地址:https://www.cnblogs.com/qidian10/p/3619701.html
Copyright © 2020-2023  润新知