Extjs引入wangEditor富文本编辑器

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

一、wangEditor的引入

wangEditor官网：http://www.wangeditor.com/
官方在线开发文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
我们可以先到官网下载wangEditor

<script type="text/javascript" src="./wangEditor/wangEditor.js"></script>
<script type="text/css" src="./wangEditor/wangEditor.css"></script>

二、wangEditor的封装

Ext.define('App.ux.MyWangEditor', {
    extend: 'Ext.form.field.Display',
    alias: ['widget.wangEditor'],
    // 创建全局编辑器
    editors: null,
    // 传入id
    id: null,
    showId: null,

    // 初始化组件和编辑器
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        this.initEditor();
    },

    afterRender: function () {
        var me = this;
        me.callParent(arguments);
        me.create();
    },

    // 初始化编辑器配置
    initEditor: function () {
        var me = this;
        // 创建wangEditor
        var E = window.wangEditor;
        var v = "#" + me.id;
        me.editors = new E(v);
        // 自定义文件上传方法
        me.editors.customConfig.customUploadImg = function (files, insert) {
            me.upload(files, insert);
        }
        // 自定义菜单配置
        me.editors.customConfig.menus = me.menusConfig;
    },

    create: function () {
        var me = this;
        me.editors.create();
        me.loade();
    },

    loade: function () {
        var me = this;
        me.synHtml();
        me.editors.create();
        var html = Ext.getCmp(me.showId).getValue();
        if (Ext.isEmpty(html)) {
            me.editors.txt.clear();
        } else {
            me.editors.txt.html(html);
        }
    },

    // 监控变化，同步更新
    synHtml: function () {
        var me = this;
        var $text1 = Ext.getCmp(me.showId);
        me.editors.customConfig.onchange = function (html) {
            $text1.setRawValue(html);
        }
    },

    // 自定义上传方法
    upload: function (files, insert) {
        // 图片url
        var imgUrl = '';
        // files 是 input 中选中的文件列表,拼接formData
        var formData = new FormData();
        formData.append("fileFiled", files[0]);
        formData.append("fileCode", null);
        $.ajax({
            url: SystemUtil.getRequestUrl('folder/uploadFile2'),
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            success: function (respone) {
                // 上传代码返回结果之后，将图片插入到编辑器中
                imgUrl = "http://f.xxxx.com/" + respone.result.path;
                insert(imgUrl);
            },
            error: function (respone) {
                // 上传失败打印错误信息
                me.console(respone.message);
            }
        });
    },

    // 菜单配置
    menusConfig: [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ]
});

三、引入封装的编辑器

			{
                    xtype: 'fieldset',
                    columnWidth: 1,
                    collapsible: true,
                    title: '通知内容',
                    layout: 'column',
                    defaults: {
                        margin: '5 5 5 5',
                        columnWidth: 1,
                        labelWidth: 80,
                        xtype: 'textfield'
                    },
                    items: [{
                        xtype: 'wangEditor', // 引入包装好的编辑器
                        id: 'weShow' 
                    },{
                        allowBlank: false,
                        xtype: 'textareafield', // 编辑器内容提交所依赖的文本域
                        id: 'editors',
                        hidden: true,
                        name: 'content'
                    }]
                }

最后附上引入的wangEditor3编辑器的图

转载请注明出处!