一、下载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) { }
}
}
});

Extjs6 编写自己的富文本组件(以ueditor为基础)的更多相关文章

  1. iOS富文本组件的实现—DTCoreText源码解析 数据篇

    本文转载 http://blog.cnbang.net/tech/2630/ DTCoreText是个开源的iOS富文本组件,它可以解析HTML与CSS最终用CoreText绘制出来,通常用于在一些需 ...

  2. 【rich-text】 富文本组件说明

    [rich-text] 富文本组件可以显示HTML代码样式. 1)支持事件:tap.touchstart.touchmove.touchcancel.touchend和longtap 2)信任的HTM ...

  3. 支付宝小程序开发——rich-text富文本组件支持html代码

    前言: 与微信小程序不同,支付宝小程序的富文本组件并不能直接支持html代码,如: 如上,支付宝小程序的富文本组件只支持数组类型,html代码需要使用 mini-html-parser 转换,具体用法 ...

  4. Angular封装WangEditor富文本组件

    富文本组件是web程序中很常用的一个组件,特别是要开发一个博客,论坛这类的网站后台. 得益于Angular的强大,封装WangEditor组件非常简单 1.使用yarn或者npm安装wangedito ...

  5. 富文本HTML编辑器UEditor

    Baidu百度开源富文本HTML编辑器UEditor JS代码网 发表于: 2013-10-30 分类:HTML编辑器  点击:2133  UEditor是由百度web前端研发部开发所见即所得富文本H ...

  6. JS编写自己的富文本编辑器

    富文本编辑器,网上有很多功能齐全种类丰富的如百度的Ueditor,简单适用型的如WangEditor等等.在经过一番挑选后,我发现都不适用现在的项目,然后决定自己造轮子玩玩.富文本编辑器中主要涉及到J ...

  7. 【ASP.NET 插件】分享一款富文本web编辑器UEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... <%@ Page Language ...

  8. jquery富文本在线编辑器UEditor

    UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. UEditor的功能非常强大,官方 ...

  9. nodejs后台集成富文本编辑器(ueditor)

    1 下载ueditor nodejs版本 2 复制public目录下面的文件 到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹 要复制进来的内容为 4 在根目录的 uedi ...

随机推荐

  1. 通过脚本自动下载Esri会议材料

    在Esri的官网上,可以下载到Esri参加或者举办的各类会议的材料.官方地址为:http://proceedings.esri.com/library/userconf/index.html. 针对某 ...

  2. 远景平台开发者上线,专业API免费使用

    远景平台开发者上线,欢迎大伙围观使用. 在开发者中心你可以做什么? 1.管理你的应用,通过APPKEY获取在线API.使用云中的数据和地图. 2.学习API的使用,包含API参考和部分例子(目前例子很 ...

  3. .NET AOP微型框架发布 --CleanAOP

    CleanAOP--简介 作者:立地(欧文) 邮箱:jarvin_g@126.com 导语: AOP为Aspect Oriented Programming的缩写. 意为:面向切面编程.将日志记录,性 ...

  4. CAS服务器集群和客户端集群环境下的单点登录和单点注销解决方案

    CAS的集群环境,包括CAS的客户应用是集群环境,以及CAS服务本身是集群环境这两种情况.在集群环境下使用CAS,要解决两个问题,一是单点退出(注销)时,CAS如何将退出请求正确转发到用户sessio ...

  5. Two ways to assign values to member variables

    setXxx()方法,带参数的构造方法.类名作为形式参数,其实里面需要传入一个该类的对象.类名作为返回值,其实返回的是一个该类的对象.

  6. SparseArray代替HashMap

    相信大家都明白,手机软件的开发不同于PC软件的开发,因为手机性能相对有限,内存也有限,所谓“寸土寸金”,可能稍有不慎,就会导致性能的明显降低.Android为了方便开发者,特意在android.uti ...

  7. 轻松应对IDC机房带宽突然暴涨问题

    轻松应对IDC机房带宽突然暴涨问题! 1[提出问题] [实际案例一] 凌晨3:00点某公司(网站业务)的一个IDC机房带宽流量突然从平时高峰期150M猛增至1000M,如下图: 该故障的影响:直接导致 ...

  8. EJB 官方API

    http://download.oracle.com/otndocs/jcp/ejb-3_0-fr-eval-oth-JSpec/

  9. 关闭SSL证书验证

    转载 Python3之关闭SSL证书验证 转载 Python requests 移除SSL认证,控制台输出InsecureRequestWarning取消方法 报错信息: Traceback (mos ...

  10. 对于当下国产CPU如火如荼有感

    国家在国家战略层面去做国产CPU这个事情,从初衷来说是好的.国产CPU战略如果能够实现,则会大大加强我国在计算机产业领域从头到尾的话语权与技术竞争力.但是个人觉得,事情不是那么简单.我将从下面几个方面 ...