Extjs6 编写自己的富文本组件（以ueditor为基础）

Posted 2020-10-10 AikenZhang

一、下载ueditor

  地址：http://ueditor.baidu.com/website/

二、将ueitor资源引入自己的项目

  在index.html中引入ueditor.config.js、ueditor.all.js、语言包（例如中文）zh-cn.js

三、编写Ext富文本组件

首先想好自己的组件中是否还需要包含Ext的组件，本组件不需要，所以继承Ext.Component进行开发

根据ueditor文档，ueditor是script标签进行初始化，所以将此组件标记为script

autoEl:{
        tag:\'script\',
        type:\'text/plain\'
    },

初始化ueditor，组件的ue属性接收

onRender:function(){
        var me = this;
        me.callParent(arguments);
        //初始化Ueditor
        me.ue=UE.getEditor(me.getId(),Ext.apply(
            {
                //此处可以添加ueidot默认的配置
            },me.ueditorConfig)); 
        //当Ueditor 内容改变时，传回viewModel，实现双向绑定
        me.ue.on("contentChange",function(){
            me.publishState("value",me.ue.getContent());
            me.isSet=true;
        })
    },

实现数据的双向绑定（set和get）

set：

setValue:function(value){
        var me=this;
        //避免Ueditor内容更改时再又重新赋值
        if(me.isSet){
            me.isSet=false;
        }
        else{
            me.ue.ready(function(){
                me.ue.setContent(value, false);
        });
        }
    },

get:

ueitor内容改变时，应该实时传递给它绑定的model，所以此处使用ueitor的contentChange事件，并用publishState方法更改model

 

实现组件的销毁

Ext.Component关闭时，会调用onDestroy方法，所以我们重新此方法，在组件关闭的同时销毁ueditor

onDestroy:function(){
        var me = this;
        me.callParent(arguments);
        if (me.rendered) {
            try {
                me.ue.destroy();
                delete me.ue;
            } catch (e) { }
        }
    }

封装ueditor常用方法

//给Ueditor赋值
    setValue:function(value){
        var me=this;
        //避免Ueditor内容更改时再又重新赋值
        if(me.isSet){
            me.isSet=false;
        }
        else{
            me.ue.ready(function(){
                me.ue.setContent(value, false);
        });
        }
    },
    //获取内容
    getValue:function(){
        var me = this;
        return me.ue.getContent();
    },
    //获得纯文本
    getContentText:function(){
        var me=this;
        return me.ue.getContentTxt();
    },
    //在内容最后添加内容
    addContent:function(value){
        var me=this;
        me.ue.setContent(value,true);
    },
    //指定位置追加内容
    insertHtml:function(value){
        var me=this;
        me.ue.execCommand(\'insertHtml\', value);
    },
    //注销
    toDestroy:function(){
        var me=this;
        me.ue.destroy();
    },

组件的具体使用（注意必须给value绑定）

xtype:\'ueditor\',
height:500,
width:500,
bind:{
    value:\'{XXXXx}\'
}

完整代码

//author   status404    v1.0
Ext.define("webapp.view.ueditor.Ueditor",{
    extend:"Ext.Component",
    alias: \'widget.ueditor\',
    width:500,
    height:900,
    autoEl:{
        tag:\'script\',
        type:\'text/plain\'
    },
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
    },
    onRender:function(){
        var me = this;
        me.callParent(arguments);
        //初始化Ueditor
        me.ue=UE.getEditor(me.getId(),Ext.apply(
            {
                //此处可以添加ueidot默认的配置
            },me.ueditorConfig)); 
        //当Ueditor 内容改变时，传回viewModel，实现双向绑定
        me.ue.on("contentChange",function(){
            me.publishState("value",me.ue.getContent());
            me.isSet=true;
        })
    },
    //给Ueditor赋值
    setValue:function(value){
        var me=this;
        //避免Ueditor内容更改时再又重新赋值
        if(me.isSet){
            me.isSet=false;
        }
        else{
            me.ue.ready(function(){
                me.ue.setContent(value, false);
        });
        }
    },
    //获取内容
    getValue:function(){
        var me = this;
        return me.ue.getContent();
    },
    //获得纯文本
    getContentText:function(){
        var me=this;
        return me.ue.getContentTxt();
    },
    //在内容最后添加内容
    addContent:function(value){
        var me=this;
        me.ue.setContent(value,true);
    },
    //指定位置追加内容
    insertHtml:function(value){
        var me=this;
        me.ue.execCommand(\'insertHtml\', value);
    },
    //注销
    toDestroy:function(){
        var me=this;
        me.ue.destroy();
    },
    //组件关闭时，销毁Ueditor实例
    onDestroy:function(){
        var me = this;
        me.callParent(arguments);
        if (me.rendered) {
            try {
                me.ue.destroy();
                delete me.ue;
            } catch (e) { }
        }
    }
});