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', // Display的特性为不会提交任何内容到from表单
    alias: ['widget.wangEditor'],
    
    // 创建全局编辑器
    editors: null,
    
    initComponent : function() {
        var me = this;
        me.callParent(arguments);
    },

	// 初始化编辑器 很重要
    afterRender: function () {
        var me = this;
        me.callParent(arguments);
        me.initEditor();
    },

    // 创建编辑器
    initEditor:function(e){
        var me = this;
        // 创建wangEditor
        var E = window.wangEditor;
        me.editors = new E("#weShow");
        // 自定义文件上传方法
        me.editors.customConfig.customUploadImg = function (files, insert) {
            me.upload(files,insert);
        }
        // 自定义菜单配置
        me.editors.customConfig.menus = me.menusConfig;
        // 判断是否有val
        if(Ext.isEmpty(e)){
            me.loadeNew();
        }else{
            me.loadeVal(e);
        }
    },

    loadeNew:function(){
        var me = this;
        me.synHtml();
        me.editors.create();
        me.editors.txt.clear();
    },

    loadeVal:function(e){
        var me = this;
        var html = e.data.content;
        me.synHtml();
        me.editors.create();
        me.editors.txt.html(html);
    },

	// 监控变化，同步更新
    synHtml:function(){
        var me = this;
        var $text1 = Ext.getCmp('editors');
        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: 请求的文件接口
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            success: function (respone) {
                // 上传代码返回结果之后，将图片插入到编辑器中
                imgUrl = "服务器地址"+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编辑器的图

转载请注明出处!

原文地址：https://blog.csdn.net/qq_35424132/article/details/90379264