ExtJs 集成UEditor and KindEditor

最新推荐文章于 2025-02-19 16:09:33 发布
最新推荐文章于 2025-02-19 16:09:33 发布
阅读量862 收藏
点赞数
分类专栏： 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: {
        //编辑器配置项
    }
}



springboot + extjs +kindeditor富文本编辑器整合+ 解决跨域问题步骤
lianlang的专栏
10-31 896
springboot + extjs6 +kindeditor富文本编辑器整合+ 上传图片解决前后端分离跨域问题步骤 最近在项目中遇到使用富文本编辑器的情况，尝试使用ueditor、wangeditor都以上传图片跨域失败告终，只有kindeditor成功。 基本环境：springboot、extjs6、前后端分离（前端网址：http://localhost:1841 后端网址：http://localhost:9191） 现对整过程介绍如下： 一、Extjs 整合kindeditor 1.引入.
VUE中使用CKEDITOR富文本编辑器支持WORD图片粘贴
weixin_52041354的博客
01-09 1008
要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.net core功能：复制粘贴word内容图片平台：Windows,macOS,Linux,RedHat,Ubuntu,CentOS,中标麒麟,银河麒麟,统信UOS,信创国产化操作系统CPU：x86(Intel,AMD,兆芯,海光),arm(鲲鹏,飞腾),龙芯(mips),龙芯(LoongArch)
Extjs kindeditor整合 demo
03-22
Extjs 整合 kindeditor例子，压缩包中的内容全，使用的是kindeditor 4.X extjs 3.1
extjs ueditor 图片_ExtJs 集成UEditor and KindEditor
weixin_29406875的博客
12-24 130
贡献两个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="{...
extjs3 html编辑器,Ext.js4.x 的面板中嵌入UEditor编辑器
weixin_36403956的博客
06-15 200
代码如下：varactivityHTMLId;Ext.define("ActivityHTMLInfo",{extend:"Ext.panel.Panel",initComponent:function(){activityHTMLId = "activityHTML"+new Date().getTime() + "";Ext.apply(this,{items:[{html:"}],list...
extjs ueditor 图片_Ext整合ueditor示例
weixin_32956805的博客
02-15 226
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: ...
优化kindeditor，修改flash批量上传图片方式为H5上传，添加第三方视频代码功能，添加手机尺寸预览，粘
01-18
KindEditor是一款广泛应用于Web开发...无论是图片管理、视频集成，还是移动设备适配，都体现了对用户需求的细致考虑。对于开发者而言，这个名为"kindeditor-plus"的优化版本，无疑是提高项目质量和用户体验的有力工具。
如何通过开源代码实现CKEDITOR的图片粘贴自动上传功能？
最新发布
weixin_52041354的博客
02-19 1064
要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.net core功能：复制粘贴word内容图片平台：Windows,macOS,Linux,RedHat,Ubuntu,CentOS,中标麒麟,银河麒麟,统信UOS,信创国产化操作系统CPU：x86(Intel,AMD,兆芯,海光),arm(鲲鹏,飞腾),龙芯(mips),龙芯(LoongArch)
如何在CKEDITOR中实现无缝粘贴WORD，同时避免格式错乱？求解决方案及源码！
weixin_52041354的博客
02-17 751
要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.net core功能：复制粘贴word内容图片平台：Windows,macOS,Linux,RedHat,Ubuntu,CentOS,中标麒麟,银河麒麟,统信UOS,信创国产化操作系统CPU：x86(Intel,AMD,兆芯,海光),arm(鲲鹏,飞腾),龙芯(mips),龙芯(LoongArch)
Extjs 集成kindeditor
03-30
NULL 博文链接：https://daoshud1.iteye.com/blog/974142
Extjs4.2x与富文本框编辑器KindEditor的整合
weixin_34014277的博客
03-23 235
Extjs4本身的HtmlEditor编辑器，太鸡肋了，简单的html能够应付一下，稍加复杂的就无能为力了。 对于Extjs的HtmlEditor扩展主要有三个方向，一个是扩展其本身的htmlEditor，这个我在2.2的时候，扩展过几个功能，例如图片上传，附件添加等等，效果并不是特别理想http://hi.baidu.com/chinacloud/item/8c078fce9763027f...
ExtJs 集成kindeditor
LinBSoft的专栏
03-12 4681
首先需要引入 kindeditor类  // 引入 extjs // 引入 kindeditor        在需要出现编辑器的地方加入如下js代码：   { xtype: 'textareafield', region: 'center', name: 'content
ExtJS3.0与KindEditor4.1.2整合
黑马蓝梦的专栏
09-03 3722
ExtJS与KindEditor整合的方式。 /** * 将KindEditor4.1.2 功能封装到命名空间“KE“。 * @author shuyuan */ Ext.namespace("KE"); KE.app = (function() { return { /** * 初始化editor * @param initParam 初始参数。 * @retur
extjs KindEditor
babata01的专栏
05-08 960
把包引进来  类似 document.write(''); { width : 400, height : 250, name : 'content', listeners : { render : function() {             setTimeout(        function() {                edito
extjs3.4集成ueditor将ueditor封装
henry
06-01 2130
Ueditor = Ext.extend(Ext.form.Field ,{ id : ‘editor’, defaultAutoCreate : {tag: ‘div’}, constructor : function(cfg){ Ext.apply(this,cfg); this.listeners = {
两款富文本编辑器——Kindeditor+UEditor
cat_miner的博客
03-22 2604
菜菜君最近第一次使用富文本编辑器，折腾了半天才摸到了一点门道。先概括一下。kindeditor比UEditor的功能少，但是也算五脏俱全，基本的功能都有了。另外，UEditor的界面感觉更好看。但是，菜菜君觉得，UEditor用起来更复杂啊啊啊啊！至少，菜菜君现在还没弄好...希望高人路过指点一二。 一、富文本编辑器kindeditor 网址：http://kindedit
Extjs6.2 中使用 UEditor
超级菜鸟
11-09 2074
定义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
kindEditor和Ueditor学习使用
zhuyin365的博客
12-05 355
推荐博客： kindEditor： 入门：https://blog.youkuaiyun.com/ZHENFENGSHISAN/article/details/78683469 使用：https://www.cnblogs.com/red-code/p/5743147.html Ueditor： 入门：https://www.cnblogs.com/smilehq/p/7266423.html 心...
Extjs与Kindeditor的集成使用示例
例如，在一个基于Extjs开发的管理后台系统中，可能会需要一个内容编辑区域，这个时候，可以将Kindeditor集成到Extjs的一个窗口组件中，为用户提供一个功能丰富的编辑器界面。 结合这两个工具可以带来以下好处： - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值