注意需要引入KindEditor相关资源

  1 //所见所得编辑器
  2 Ext.define('ux.form.field.KindEditor', {
  3     extend: 'Ext.form.field.TextArea',
  4     alias: 'widget.kindEditor',
  5     xtype: 'kindEditor',
  6     //最大文本长度
  7     maxLength:5000,
  8     //配置
  9     editorConfig: {
 10         //选项功能
 11         items: [
 12             'source', '|', 'undo', 'redo', '|', 'preview', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
 13
 14             'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'table', 'hr', 'emoticons', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'
 15         ],
 16         minHeight: 200
 17     },
 18     afterRender: function () {
 19         var me = this;
 20         me.callParent(arguments);
 21         //延迟输入验证
 22         me.task = Ext.create('Ext.util.DelayedTask',
 23         function (t) {
 24             me.isValid();
 25         },
 26         me);
 27         if (!me.editor) {
 28             //创建富文本插件
 29             me.editor = KindEditor.create("#" + me.getInputId(), Ext.apply(me.editorConfig, {
 30                 //编辑器创建成功
 31                 afterCreate: function () {
 32                     //标识完成
 33                     me.KindEditorIsReady = true;
 34                 },
 35                 //内容发生改变时
 36                 afterChange: function () {
 37                     //编辑器初始化完成才执行
 38                     if (me.KindEditorIsReady) {
 39                         //延迟输入验证
 40                         me.task.delay(100);
 41                     }
 42                 },
 43                 //失去焦点
 44                 afterBlur: function () {
 45                     //输入验证
 46                     me.isValid();
 47                 }
 48             }));
 49         } else {
 50             me.editor.html(me.getValue());
 51         }
 52     },
 53     setValue: function (value) {
 54         //console.log('setValue');
 55         var me = this;
 56         if (!me.editor) {
 57             me.setRawValue(me.valueToRaw(value));
 58         } else {
 59             if(value){
 60                 me.editor.html(value.toString());
 61             }else{
 62
 63             }
 64         }
 65         me.callParent(arguments);
 66         return me.mixins.field.setValue.call(me, value);
 67     },
 68     getRawValue: function () {
 69         //console.log('getRawValue');
 70         var me = this;
 71         if (me.KindEditorIsReady) {
 72             //自动同步值
 73             me.editor.sync();
 74         }
 75         v = me.inputEl ? me.inputEl.getValue() : '';
 76         me.rawValue = v;
 77         return v;
 78     },
 79     //重置
 80     reset: function () {
 81         if (this.editor) {
 82             this.editor.html('');
 83         }
 84         this.callParent();
 85     },
 86     //销毁富文本控件
 87     destroyEditor: function () {
 88         var me = this;
 89         if (me.rendered) {
 90             try {
 91                 me.editor.remove();
 92                 me.editor = null;
 93             } catch (e) { }
 94         }
 95     },
 96     //销毁
 97     onDestroy: function () {
 98         var me = this;
 99         me.destroyEditor();
100         me.callParent(arguments);
101     }
102 });

ux.form.field.KindEditor 所见所得编辑器相关推荐

  1. ux.form.field.Verify 验证码控件

    1 //验证码控件 2 Ext.define('ux.form.field.Verify', { 3 extend: 'Ext.container.Container', 4 alias: ['wid ...

  2. ux.form.field.SearchField 列表、树形菜单查询扩展

    1 //支持bind绑定store 2 //列表搜索扩展,支持本地查询 3 //支持树形菜单本地一级菜单查询 4 Ext.define('ux.form.field.SearchField', { 5 ...

  3. ux.form.field.Year 只能选年的时间扩展

    效果如图,亲测6.2.1版本可用,用法同时间选择控件 1 //只选择年的控件 2 Ext.define('ux.picker.Year', { 3 extend: 'Ext.Component', 4 ...

  4. 所见所得的OFFICE功能区编辑器(自定义界面编辑)RibbonCreator

    所见所得的OFFICE功能区编辑器(自定义界面编辑)RibbonCreator 对于Microsoft Access 2007.Excel 2007.Word 2007,RibbonCreator是用 ...

  5. Ext.ux.form.SearchField使用方法

    这学期一直在做一个管理系统,前台用到了ExtJs,现在开始总结这一学期的学习心得,首先我们从Ext.ux.form.SearchField开始讲,因为这个东西一直困扰我好长时间,直到项目结束前几天我才 ...

  6. ext时间控件Ext.ux.form.DateTimeField和Ext.form.DateField的用法比较

    Ext.ux.form.DateTimeField 页面效果 可以精确到年月日时分秒 var _txtEndTime = new Ext.ux.form.DateTimeField({name: 'e ...

  7. ext中引用ux_Ext.ux.form.SearchField使用方法

    这学期一直在做一个管理系统,前台用到了ExtJs,现在开始总结这一学期的学习心得,首先我们从Ext.ux.form.SearchField开始讲,因为这个东西一直困扰我好长时间,直到项目结束前几天我才 ...

  8. Ext.form.field.ComboBox组合框

    1.Ext.form.field.ComboBox主要配置 Ext.form.field.ComboBox主要配置项 配置项 类型 说明 allQuery String 发往服务器用来查询全部信息的查 ...

  9. Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框

    1.Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目 配置项 类型 说明 boxLabel String 紧靠复选框的文字描述 boxLabelAl ...

  10. ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...

最新文章

  1. 开源:推荐一个不错的离线IP地址定位库
  2. python字符串find函数-python字符串查找函数的用法详解
  3. C++ 值传递、指针传递、引用传递
  4. Super-palindrome(思维)
  5. linux 中断分上下部分的原因
  6. ASP.NET中WEB上弹出消息框的N种方法(为了以后方便,转了很多网友的文章!希望不会介意)...
  7. opencv检测相交点_OpenCV学习18--霍夫变换检测直线
  8. Kvaser新品推介:一款坚固耐用的单通道CAN / CAN FD转USB接口-Kvaser U100 编码:73-30130-01173-1
  9. java watir_基于Ruby的watir-webdriver自动化测试方案与实施(一)
  10. _stdcall与_cdecl区别
  11. 聚合广告SDK开发(一)——基础知识
  12. 腾讯入股艺龙,在线旅游市场引发关注
  13. 对于rh v5系列服务器,华为rh2288v5服务器重定向问题引起pxe报错
  14. 路由器、AC、AP及POE交换机理解
  15. WIN10下配置Yolov3(VS2019,GPU)+opencv训练自己的数据集(绝对详细,小白型记录)
  16. json数据条件查询,json数据sql查询中文乱码
  17. java.lang.ClassNotFoundException: Cannot find class:
  18. 公比为无理数的等比数列的近似表示
  19. 基于STM32的智能家居控制系统设计与实现(带红外遥控控制空调)
  20. 使用安卓模拟器时提示关闭hyper-v

热门文章

  1. 获取GridView的BoundField值
  2. hadoop shell 详解
  3. 如何自己编写Makefile(高级篇)
  4. 网站发布在中文操作系统,但ReportViewer的工具栏显示为英文的解决方法
  5. MFC单文档多视图程序设计与Splitter拆分窗口
  6. Parallels Desktop如何检查Windows系统是否具有EFI/UEFI或 Legacy BIOS固件接口
  7. Xilisoft iPad Magic Platinum for Mac一键下载在线视频并将其转换为 iPad?
  8. 教你使用Donemax DMmenu可以解决Mac启动缓慢的问题呢?
  9. Maven For Mac下的环境搭建
  10. SCOM 2012知识分享-16:管理任务窗格