ExtJs 集成UEditor and KindEditor

最新推荐文章于 2021-06-15 20:08:15 发布
最新推荐文章于 2021-06-15 20:08:15 发布
阅读量795 收藏
点赞数
分类专栏： Extjs

贡献两个Extjs 4.2 编辑器插件


1.UEditor(使用页面需要引用UEditor相关文件)

Ext.define( 'App.ux.UEditor' , {
     extend:  'Ext.form.field.Text' ,
     alias: [ 'widget.ueditor' ],
     //alternateClassName: 'Ext.form.UEditor',
     fieldSubTpl: [
         '<textarea id="{id}" {inputAttrTpl}' ,
             '<tpl if="name"> name="{name}"</tpl>' ,
             '<tpl if="rows"> rows="{rows}" </tpl>' ,
             '<tpl if="cols"> cols="{cols}" </tpl>' ,
             '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>' ,
             '<tpl if="size"> size="{size}"</tpl>' ,
             '<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>' ,
             '<tpl if="readOnly"> readonly="readonly"</tpl>' ,
             '<tpl if="disabled"> disabled="disabled"</tpl>' ,
             '<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>' ,
     //            ' class="{fieldCls} {inputCls}" ',
             '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>' ,
             ' autocomplete="off">\n' ,
             '<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>' ,
         '</textarea>' ,
         {
             disableFormats:  true
         }
     ],
     ueditorConfig: {},
     initComponent:  function  () {
         var  me =  this ;
         me.callParent(arguments);
     },
     afterRender:  function  () {
         var  me =  this ;
         me.callParent(arguments);
         if  (!me.ue) {
             me.ue = UE.getEditor(me.getInputId(), Ext.apply(me.ueditorConfig, {
                 initialFrameHeight: me.height ||  '300px' ,
                 initialFrameWidth:  '100%'
             }));
             me.ue.ready( function  () {
                 me.UEditorIsReady =  true ;
             });
             
　　　　　　 //这块 组件的父容器关闭的时候 需要销毁编辑器 否则第二次渲染的时候会出问题 可根据具体布局调整
             var  win = me.up( 'window' );
             if  (win && win.closeAction ==  "hide" ) {
                 win.on( 'beforehide' ,  function  () {
                     me.onDestroy();
                 });
             }  else  {
                 var  panel = me.up( 'panel' );
                 if  (panel && panel.closeAction ==  "hide" ) {
                     panel.on( 'beforehide' ,  function  () {
                         me.onDestroy();
                     });
                 }
             }
         }  else  {
             me.ue.setContent(me.getValue());
         }
     },
     setValue:  function  (value) {
         var  me =  this ;
         if  (!me.ue) {
             me.setRawValue(me.valueToRaw(value));
         }  else  {
             me.ue.ready( function  () {
                 me.ue.setContent(value);
             });
         }
         me.callParent(arguments);
         return  me.mixins.field.setValue.call(me, value);
     },
     getRawValue:  function  () {
         var  me =  this ;
         if  (me.UEditorIsReady) {
             me.ue.sync(me.getInputId());
         }
         v = (me.inputEl ? me.inputEl.getValue() : Ext.value(me.rawValue,  '' ));
         me.rawValue = v;
         return  v;
     },
     destroyUEditor:  function  () {
         var  me =  this ;
         if  (me.rendered) {
             try  {
                 me.ue.destroy();
                 var  dom = document.getElementById(me.id);
                 if  (dom) {
                     dom.parentNode.removeChild(dom);
                 }
                 me.ue =  null ;
             }  catch  (e) { }
         }
     },
     onDestroy:  function  () {
         var  me =  this ;
         me.callParent();
         me.destroyUEditor();
     }
});

　　　　

1.KindEditor(使用页面需要引用KindEditor相关文件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
Ext.define( 'App.ux.KindEditor' , {
     extend:  'Ext.form.field.Text' ,
     alias: [ 'widget.kindeditor' ],
     alternateClassName:  'Ext.form.KindEditor' ,
     fieldSubTpl: [
         '<textarea id="{id}" {inputAttrTpl}' ,
             '<tpl if="name"> name="{name}"</tpl>' ,
             '<tpl if="rows"> rows="{rows}" </tpl>' ,
             '<tpl if="cols"> cols="{cols}" </tpl>' ,
             '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>' ,
             '<tpl if="size"> size="{size}"</tpl>' ,
             '<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>' ,
             '<tpl if="readOnly"> readonly="readonly"</tpl>' ,
             '<tpl if="disabled"> disabled="disabled"</tpl>' ,
             '<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>' ,
     //            ' class="{fieldCls} {inputCls}" ',
             '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>' ,
             ' autocomplete="off">\n' ,
             '<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>' ,
         '</textarea>' ,
         {
             disableFormats:  true
         }
     ],
     kindeditorConfig: {},
     initComponent:  function  () {
         var  me =  this ;
         me.callParent(arguments);
     },
     afterRender:  function  () {
         var  me =  this ;
         me.callParent(arguments);
         if  (!me.ke) {
             me.ke = KindEditor.create( "#"  + me.getInputId(), Ext.apply(me.kindeditorConfig, {
                 height: me.height ||  '300px' ,
                 width:  '100%' ,
                 afterCreate:  function  () {
                     me.KindEditorIsReady =  true ;
                 }
             }));
             
　　　　　　 //这块 组件的父容器关闭的时候 需要销毁编辑器 否则第二次渲染的时候会出问题 可根据具体布局调整
             var  win = me.up( 'window' );
             if  (win && win.closeAction ==  "hide" ) {
                 win.on( 'beforehide' ,  function  () {
                     me.onDestroy();
                 });
             }  else  {
                 var  panel = me.up( 'panel' );
                 if  (panel && panel.closeAction ==  "hide" ) {
                     panel.on( 'beforehide' ,  function  () {
                         me.onDestroy();
                     });
                 }
             }
         }  else  {
             me.ke.html(me.getValue());
         }
     },
     setValue:  function  (value) {
         var  me =  this ;
         if  (!me.ke) {
             me.setRawValue(me.valueToRaw(value));
         }  else  {
             me.ke.html(value.toString());
         }
         me.callParent(arguments);
         return  me.mixins.field.setValue.call(me, value);
     },
     getRawValue:  function  () {
         var  me =  this ;
         if  (me.KindEditorIsReady) {
             me.ke.sync();
         }
         v = (me.inputEl ? me.inputEl.getValue() : Ext.value(me.rawValue,  '' ));
         me.rawValue = v;
         return  v;
     },
     destroyKindEditor:  function  () {
         var  me =  this ;
         if  (me.rendered) {
             try  {
                 me.ke.remove();
                 var  dom = document.getElementById(me.id);
                 if  (dom) {
                     dom.parentNode.removeChild(dom);
                 }
                 me.ke =  null ;
             }  catch  (e) { }
         }
     },
     onDestroy:  function  () {
         var  me =  this ;
         me.destroyKindEditor();
         me.callParent(arguments);
     }
});

　　

 

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
     fieldLabel:  'UEditor' ,
     name:  "email" ,
     id:  "testueditor" ,
     xtype:  'ueditor' ,
     anchor:  '-20' ,
     height: 150,
     ueditorConfig: {
         //编辑器配置项
     }
}, {
     fieldLabel:  'KindEditor' ,
     name:  "id" ,
     id:  "testkindeditor" ,
     xtype:  'kindeditor' ,
     anchor:  '-20' ,
     height: 150,
     kindeditorConfig: {
         //编辑器配置项
     }
}



Bradley.peng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs 集成kindeditor
03-30
NULL 博文链接：https://daoshud1.iteye.com/blog/974142
Extjs引入wangEditor富文本编辑器
不可一世
05-20 1161
Ext引入wangEditor富文本编辑器 wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。 一、wangEditor的引入 wangEditor官网：http://www.wangeditor.com/ 官方在线开发文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599 我们可以先到...
Extjs4.2进阶--完整前后台交互带数据库(带源码)
书写人生
12-26 2932
上一次的初识Extjs4.2-hello world ，演示了简单的弹窗以及需要载入哪些文件。这次讲一个简单但是完整的项目，前台是一个表单数据提交，后台是servlet，数据库有张简单的表。 一、需要导入的包，除了上次需要导入的文件外，还有额外导入extjs-4.2.0\examples\ux\form下的ItemSelector.js和MultiSelect.js文件； 二、
Extjs6.2 中使用 UEditor
超级菜鸟
11-09 1999
定义EXTJS组件(UEditor.js)/** * ExtJS6整合UEditor, 在extjs引入之前必须导入以下三个js文件 * <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script> * <script type="text/javascript" charse
extjs ueditor 图片_ExtJs 集成UEditor and KindEditor
weixin_29406875的博客
12-24 81
贡献两个Extjs 4.2 编辑器插件1.UEditor(使用页面需要引用UEditor相关文件)Ext.define('App.ux.UEditor', {extend: 'Ext.form.field.Text',alias: ['widget.ueditor'],//alternateClassName: 'Ext.form.UEditor',fieldSubTpl: ['' name="{...
Extjs+Kindeditor的例子
01-31
Extjs+Kindeditor的例子
extjs fckeditor集成代码
10-29
用extjs实现的集成fckeditor的代码。
Extjs kindeditor整合 demo
03-22
Extjs 整合 kindeditor例子，压缩包中的内容全，使用的是kindeditor 4.X extjs 3.1
Extjs4 整合百度编辑器
02-27
Extjs4集成百度编辑器，由于使用MVC模式，测试的时候请把代码丢到服务器上。已经通过谷歌、火狐和IE10的测试。
Extjs整合Ueditor时Dialog被遮挡
来啊 快活啊
07-02 2206
调整的ueditor.config.js文件的zIndex的配置。 这个配置需要调整的很高才行。 我是调成了下面的值。,zIndex : 999999999 //编辑器层级的基数,默认是900,z-index的最大值2147483647以下来自网络 css z-index 的取值范围： z-index最大值: IE FireFox Safari的z-index最大值是214748
extjs ueditor 图片_Ext整合ueditor示例
weixin_32956805的博客
02-15 166
Ext整合ueditor示例Ext整合ueditor示例源代码Ext整合ueditor示例Ext.onReady(function () {Ext.create('Ext.panel.Panel', {width: 600,height: 350,title:'Ext整合ueditor',border: true,renderTo: document.body,html: 'listeners: ...
extjs3.4集成ueditor将ueditor封装
henry
06-01 2074
Ueditor = Ext.extend(Ext.form.Field ,{ id : ‘editor’, defaultAutoCreate : {tag: ‘div’}, constructor : function(cfg){ Ext.apply(this,cfg); this.listeners = {
extjs3 html编辑器,Ext.js4.x 的面板中嵌入UEditor编辑器
weixin_36403956的博客
06-15 140
代码如下：varactivityHTMLId;Ext.define("ActivityHTMLInfo",{extend:"Ext.panel.Panel",initComponent:function(){activityHTMLId = "activityHTML"+new Date().getTime() + "";Ext.apply(this,{items:[{html:"}],list...
解决ext与ueditor同时使用，引入js文件冲突问题
penglu123456的专栏
05-19 1878
引入的js文件冲突解决办法 先使用引入一个js文件，再使用异步请求，动态的引入另一个js文件。代码如下：             Ext.Ajax.request({                                      method:'GET',                                      url: '/websrc/admin/ed
electron集成extjs详细教程
最新发布
08-23
对于Electron集成ExtJS的详细教程，以下是一个简单的步骤指南： 步骤1：创建Electron项目 首先，你需要创建一个Electron项目。可以通过使用Electron提供的命令行工具（electron-forge、electron-builder等）或手动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值