一、下载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
auto:{ ???????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.0Ext.define("webapp.view.ueditor.Ueditor",{ ???extend:"Ext.Component", ???alias: ‘widget.ueditor‘, ???width:500, ???height:900, ???auto:{ ???????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) { } ???????} ???}});
Extjs6 编写自己的富文本组件（以ueditor为基础）
原文地址：http://www.cnblogs.com/status404/p/7657315.html