EXT_JS6.0富文本编辑器htmlEditor扩展上传图片

最新推荐文章于 2021-02-28 13:26:09 发布
最新推荐文章于 2021-02-28 13:26:09 发布
阅读量341 收藏
点赞数 1
分类专栏： ext 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38704282/article/details/105687536
版权

EXT_JS6.0富文本编辑器htmlEditor扩展上传图片

扩展上传图片功能需要重写Ext.form.field.HtmlEditor里面的getToolbarCfg()方法
在项目根目录下面的overrides新建一个文件夹，然后在创建一个js文件如：在这里插入图片描述
重写HtmlEditor.js具体内容

Ext.define("app.overrides.htmleditor.HtmlEditor", {
    override: "Ext.form.field.HtmlEditor",
    createLinkText: 'Por favor, entre com a URL do link:',
   //新增imageupload、imageuploadUrl两个属性
    imageupload:true,
    imageuploadUrl:'/upload',//图片上传接口
    //重写getToolbarCfg方法
    getToolbarCfg: function(){
        var me = this,
            items = [], i,
            tipsEnabled = Ext.quickTipsActive && Ext.tip.QuickTipManager.isEnabled(),
            baseCSSPrefix = Ext.baseCSSPrefix,
            fontSelectItem, undef;

        function btn(id, toggle, handler){
            return Ext.merge({
                itemId: id,
                cls: baseCSSPrefix + 'btn-icon',
                iconCls: baseCSSPrefix + 'edit-'+id,
                enableToggle:toggle !== false,
                scope: me,
                handler:handler||me.relayBtnCmd,
                clickEvent: 'mousedown',
                tooltip: tipsEnabled ? me.buttonTips[id] : undef,
                overflowText: me.buttonTips[id].title || undef,
                tabIndex: -1
            }, me.buttonDefaults);
        }
        //重写getToolbarCfg后新添加、用于上传图片
        function btn2(id, toggle, handler){
            return Ext.merge({
                itemId: id,
                cls: baseCSSPrefix + 'btn-icon',
                iconCls: 'x-fa fa-image',
                enableToggle:toggle !== false,
                scope: me,
                handler:handler,
                clickEvent: 'click',
                tooltip: tipsEnabled ? me.buttonTips[id] : undef,
                overflowText: me.buttonTips[id].title || undef,
                tabIndex: -1
            }, me.buttonDefaults);
        }

        if (me.enableFont && !Ext.isSafari2) {
            fontSelectItem = Ext.widget('component', {
                itemId: 'fontSelect',
                renderTpl: [
                    '<select id="{id}-selectEl" data-ref="selectEl" class="' + baseCSSPrefix + 'font-select">',
                    '</select>'
                ],
                childEls: ['selectEl'],
                afterRender: function() {
                    me.fontSelect = this.selectEl;
                    Ext.Component.prototype.afterRender.apply(this, arguments);
                },
                onDisable: function() {
                    var selectEl = this.selectEl;
                    if (selectEl) {
                        selectEl.dom.disabled = true;
                    }
                    Ext.Component.prototype.onDisable.apply(this, arguments);
                },
                onEnable: function() {
                    var selectEl = this.selectEl;
                    if (selectEl) {
                        selectEl.dom.disabled = false;
                    }
                    Ext.Component.prototype.onEnable.apply(this, arguments);
                },
                listeners: {
                    change: function() {
                        me.win.focus();
                        me.relayCmd('fontName', me.fontSelect.dom.value);
                        me.deferFocus();
                    },
                    element: 'selectEl'
                }
            });

            items.push(
                fontSelectItem,
                '-'
            );
        }

        if (me.enableFormat) {
            items.push(
                btn('bold'),
                btn('italic'),
                btn('underline')
            );
        }
		//重写getToolbarCfg后新添加的上传图片按钮
        if(me.imageupload){
            items.push(
                '-',
                btn2('imageupload',false,me.createImageWindow)
            );
        }

        if (me.enableFontSize) {
            items.push(
                '-',
                btn('increasefontsize', false, me.adjustFont),
                btn('decreasefontsize', false, me.adjustFont)
            );
        }

        if (me.enableColors) {
            items.push(
                '-', Ext.merge({
                    itemId: 'forecolor',
                    cls: baseCSSPrefix + 'btn-icon',
                    iconCls: baseCSSPrefix + 'edit-forecolor',
                    overflowText: me.buttonTips.forecolor.title,
                    tooltip: tipsEnabled ? me.buttonTips.forecolor || undef : undef,
                    tabIndex:-1,
                    menu: Ext.widget('menu', {
                        plain: true,

                        items: [{
                            xtype: 'colorpicker',
                            allowReselect: true,
                            focus: Ext.emptyFn,
                            value: '000000',
                            plain: true,
                            clickEvent: 'mousedown',
                            handler: function(cp, color) {
                                me.relayCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
                                this.up('menu').hide();
                            }
                        }]
                    })
                }, me.buttonDefaults), Ext.merge({
                    itemId: 'backcolor',
                    cls: baseCSSPrefix + 'btn-icon',
                    iconCls: baseCSSPrefix + 'edit-backcolor',
                    overflowText: me.buttonTips.backcolor.title,
                    tooltip: tipsEnabled ? me.buttonTips.backcolor || undef : undef,
                    tabIndex:-1,
                    menu: Ext.widget('menu', {
                        plain: true,

                        items: [{
                            xtype: 'colorpicker',
                            focus: Ext.emptyFn,
                            value: 'FFFFFF',
                            plain: true,
                            allowReselect: true,
                            clickEvent: 'mousedown',
                            handler: function(cp, color) {
                                if (Ext.isGecko) {
                                    me.execCmd('useCSS', false);
                                    me.execCmd('hilitecolor', '#'+color);
                                    me.execCmd('useCSS', true);
                                    me.deferFocus();
                                } else {
                                    me.relayCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE || Ext.isOpera ? '#'+color : color);
                                }
                                this.up('menu').hide();
                            }
                        }]
                    })
                }, me.buttonDefaults)
            );
        }

        if (me.enableAlignments) {
            items.push(
                '-',
                btn('justifyleft'),
                btn('justifycenter'),
                btn('justifyright')
            );
        }



        if (!Ext.isSafari2) {
            if (me.enableLinks) {
                items.push(
                    '-',
                    btn('createlink', false, me.createLink)
                );
            }

            if (me.enableLists) {
                items.push(
                    '-',
                    btn('insertorderedlist'),
                    btn('insertunorderedlist')
                );
            }
            if (me.enableSourceEdit) {
                items.push(
                    '-',
                    btn('sourceedit', true, function(){
                        me.toggleSourceEdit(!me.sourceEditMode);
                    })
                );
            }
        }

        // Everything starts disabled.
        for (i = 0; i < items.length; i++) {
            if (items[i].itemId !== 'sourceedit') {
                items[i].disabled = true;
            }
        }

        // build the toolbar
        // Automatically rendered in Component.afterRender's renderChildren call
        return {
            xtype: 'toolbar',
            defaultButtonUI: me.defaultButtonUI,
            cls: Ext.baseCSSPrefix + 'html-editor-tb',
            enableOverflow: true,
            items: items,

            // stop form submits
            listeners: {
                click: function(e){
                    e.preventDefault();
                },
                element: 'el'
            }
        };
    },
    //新增点击上传图片按钮时弹出窗口
    createImageWindow:function (btn) {
        var editor=this;
        var url=this.imageuploadUrl;
        var uploadimage=Ext.create('Ext.form.Panel', {
            header: false,
            width: 400,
            bodyPadding: 10,
            frame: true,
            items: [{
                xtype: 'filefield',
                name: 'photo',
                fieldLabel: '图片路径',
                labelWidth: 100,
                labelAlign:'',
                msgTarget: 'side',
                allowBlank: false,
                anchor: '100%',
                buttonText: '选择图片'
            }]

        });
        
        var form=uploadimage.getForm();
        Ext.create('Ext.window.Window', {
            layout: 'fit',
            title:'上传图片',
            modal: true,
            width: '30%',
            height:200,
            constrain: true,
            items:[
                uploadimage
            ],
            buttons: [{
                text: '上传',
                handler: function() {
                    if (form.isValid()) {
                        uploadimage.submit({
                            url: url,                       
                            waitMsg: '照片上传中..',
                            timeout: 60,
                            callback: function (options, success, response) {
                                var element = document.createElement("img");
                                // element.src='/knowledge/getSystemImage?id=664cfc67dc79455b895935ee69d7f627';
                                element.src='https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg';
                                editor.insertAtCursor(element.outerHTML);

                            }
                        });
                    }
                }
            }]
        }).show();
    }
}, function() {
    Ext.apply(Ext.form.field.HtmlEditor.prototype, {
        buttonTips: {
            bold: {
                title: '粗 (Ctrl+B)',
                // text: 'Deixa o texto selecionado em negrito.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            italic: {
                title: 'Itálico (Ctrl+I)',
                text: 'Deixa o texto selecionado em itálico.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            underline: {
                title: 'Sublinhado (Ctrl+U)',
                text: 'Sublinha o texto selecionado.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            increasefontsize: {
                title: 'Aumentar Texto',
                text: 'Aumenta o tamanho da fonte.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            decreasefontsize: {
                title: 'Diminuir Texto',
                text: 'Diminui o tamanho da fonte.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            backcolor: {
                title: 'Cor de Fundo',
                text: 'Muda a cor do fundo do texto selecionado.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            forecolor: {
                title: 'Cor da Fonte',
                text: 'Muda a cor do texto selecionado.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            justifyleft: {
                title: 'Alinhar à Esquerda',
                text: 'Alinha o texto à esquerda.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            justifycenter: {
                title: 'Centralizar Texto',
                text: 'Centraliza o texto no editor.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            justifyright: {
                title: 'Alinhar à Direita',
                text: 'Alinha o texto à direita.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            insertunorderedlist: {
                title: 'Lista com Marcadores',
                text: 'Inicia uma lista com marcadores.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            insertorderedlist: {
                title: 'Lista Numerada',
                text: 'Inicia uma lista numerada.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            createlink: {
                title: '超链接',
                text: 'Transforma o texto selecionado em um link.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            sourceedit: {
                title: 'Editar Fonte',
                text: 'Troca para o modo de edição de código fonte.',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            },
            //工具栏新增上传图片
            imageupload: {
                title: '图片上传',
                iconCls: 'x-fa fa-plus-square',
                cls: Ext.baseCSSPrefix + 'html-editor-tip'
            }
        }
    });
});

使用方法：直接调用htmleditor即可

Ext.create('Ext.window.Window', {
     // 引入包装好的编辑器
     layout: 'fit',
     width: '50%',
      height:600,
       constrain: true,
       closable: false,
        items:[
              {
                   xtype: 'htmleditor'，
                   //上传图片路径
                   imageuploadUrl:'/knowledge/saveKnowdgeContentImage',												
                    }
         ]
}).show();

效果:
在这里插入图片描述
在这里插入图片描述
注意：由于是测试使用这里的element.src已经写死

element.src='https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg';```
bug仁
关注
专栏目录
Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现
08-08
NULL 博文链接：https://zyjustin9.iteye.com/blog/2165196
Extjs 扩展Htmleditor，支持 图片上传 文件上传 插入flash 插入多媒体 插入层 插入横线等功能...
weixin_34266504的博客
10-10 121
  去年对Extjs的富文本框编辑器htmleditor做过扩展，扩展成图片上传和文件上传功能，感觉功能还是不够，原文如下： http://hi.baidu.com/jackvoilet/blog/item/2ba6b19b7a9c05bcc8eaf427.html   最近在做项目的时候感觉还是不完美，于是在此基础上又进行了扩展，目前CJ_StarHtmlEditor支持： 图片上...
Ext.js 组件:HTML编辑器
qq_36987708的博客
01-14 497
描述 HTML编辑器：这个Ext JS UI小部件是创建一个html编辑器，以便用户可以编辑它在字体，颜色，大小等方面输入的信息。 语法 下面是创建HTML编辑器的简单语法   Ext.create('Ext.form.HtmlEditor')   例 下面是一个简单的例子显示HTML编辑器   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt...
ExtJs Ext.form.field.TextArea+Ckeditor 扩展富文本编辑器
weixin_34363171的博客
02-20 144
Ext.define("MyApp.base.BaseTextArea", { extend: "Ext.form.field.TextArea", xtype: "BaseTextArea", editor: null, initComponent: function() { this.callParent()...
扩展extjs的htmleditor实现本地上传
hzp
09-21 138
主要思路： 这里主要针对本地图片上传，其他文件上传同理，只是config配置信息中permitted_extensions限制的上传类型不同罢了   1. 在Ext.ux.plugins中注册自定义组件Upload，在组件init时，往htmleditor工具栏添加一个图片上传的菜单，然后再菜单上绑定mousedown事件处理方法imageInsert()，该方法内部实际是调用了Ext....
WPF.HtmlEditor富文本编辑器Demo
01-02
**WPF.HtmlEditor富文本编辑器Demo**是一个用于Windows Presentation Foundation (WPF)应用程序的示例项目，它展示了如何在WPF环境中实现一个功能丰富的HTML编辑器。这个编辑器允许用户进行基本的文本编辑，查看HTML...
WPF富文本编辑器,开源代码demo仿word
01-02
在本文中，我们将深入探讨基于WPF的富文本编辑器，这是一个开源项目，其功能类似于Microsoft Word。这个编辑器提供了一系列强大的文本处理能力，适用于开发人员构建自定义的文本编辑应用。 **WPF（Windows ...
Ext 整合富文本编辑器Tinymce插件
-花花程序圆
09-25 2268
手头有个项目需要做一个富文本编辑器，Ext自带的文本编辑器htmleditor功能不齐全，上网搜了很多资料，都是提供部分代码，研究了下，终于搞出来了，贴出教程供自己查看和别人借阅。 下载插件tinymce （中文版版本）地址附上链接: https://pan.baidu.com/s/1qXQyEKG 密码: vsf8 将下载下来的文件解压然后放到项目中，在index.html文件引入 <scri
JavaFx使用HTMLEditor实现上传图片upload image
最新发布
08-03
HTMLEditor控件是一个功能完整的富文本编辑器。它的实现是基于HTML5的文档编辑特征，并且包括以下编辑功能 1、文本格式化，包括通过样式控制粗体、斜体、下划线和删除线 2、段落设置，如格式、字体家族、字体大小 3...
EXT扩展Htmleditor，在工具栏中添加插入图片按钮，可选择图片插入到编辑器中（也可添加其他功能按钮）
04-03
提供给Htmleditor的插件栏使用，使用方法，在定义Htmleditor时，在plugins中创建该工具栏即可。不只可以添加插入图片按钮，其他任何功能都可以添加，此处只是做个添加按钮的示范。
SSH+ExtJs完成CKEditor富文本编辑器整合
04-19
NULL 博文链接：https://liuwei1981.iteye.com/blog/1867797
extjs6与webuploader整合示例展现到grid列表
12-28
swfupload.js与extjs整合由于与浏览器兼容性不好，后改为webuploader，图片上传示例，加入到grid列表，显示相关的状态信息，例子简单修改一下即可使用，extj所有版本都类似。注:IE中测试需要部署在服务器下，上传按钮就可以使用。
Ext Js 3.2中的Htmleditor的实例
张波的技术积累
08-05 2831
1：实例程序   <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServ
.Extjs HtmlEditor扩展插入图片功能
赶路人儿
05-28 3571
2009年开始接触Extjs的时候，就发现其HtmlEditor少了一个插入图片功能，于是同事在网上找了个扩展了的代码使用了起来！当时刚刚接触的时候，直接就拿来用的，也没仔细看代码！  后来经常更新Exjts类库的版本，有天竟然把改ux代码给丢了，昨天客户还找我们说，怎么在通知通告功能中发送消息插入不了图片！才恍然大悟，原来把以前扩展的功能丢了,不知道现在Extjs的新版本是否还有这个功能，但是已
Ext.js 组件的简单应用——【Window】和【HtmlEditor】结合使用
qingdatiankong的博客
06-29 532
第一次接触Extjs，感觉效果蛮不错的，写几篇文件记录一下个人学习中的简单的小成果。 Ext.js 窗口+Ext.js HTML编辑器的结合使用 一、html代码 点击按钮，以发送邮件 二、js代码 Ext.onReady(function() { var win = new Ext.Window({ title:'邮件窗口',
element js 包含字符_Python+selenium自动化之js富文本定位
weixin_39838231的博客
11-29 73
本篇和上一篇文章Python+selenium自动化之写邮件与富文本定位基本内容一样，仅仅把富文本定位和操作使用JS实现，对JS用法不了解不熟悉的可以百度学习下，或者等着我出一期专门的js用法的文章。从下图可以看出，正文编辑框属于div式的editor框iframe的id不是固定的，这里使用js用法document.getElementsByClassName()[]，注意这里elements要有...
extjs6.5文件上传_EXTjs上传文件
weixin_35788791的博客
12-29 144
上传文件修改：(参考ZjDrillCtrlFlowheadSchd井口装置图)文件保存图：主表主键在前台JSP生成传到JS传到主表service做主键ID传到文件信息service外键ID1、修改JSPStringformBelongId=java.util.UUID.randomUUID().toString();这个也就是生成主表主键，在前台JSP生成；加入JS文件href="/r...
扩展ExtJs 4.2.1 htmleditor 添加图片功能
weixin_34315485的博客
03-13 124
　　做项目的时候遇到这样一个问题，因为我是用ExtJs做的后台管理框架，所以当我使用ExtJs htmleditor 控件 的时候，发现没有图片上传的功能，于是我打算在网上找找有关的文章，居然真有人写过，不过可惜的是，不支持 ExtJs 4.2.1版本，所以我再搜索，终于被我找到了,现在将代码贴出，本着开源精神，我将代码开源，最后我想 感谢一个人： 马平川，cr10210206@163.c...
第12章[12.10]富文本编辑器 CKEditor与Ext JS的整合
oscar999的专栏
02-28 459
Ext JS官方有提供整合Froala 的富文本编辑器组件， 不过只提供了基于Modern开发模式的。 Froala 是一个比较知名的所见即所得的富文本编辑器，有免费版本，又有一些收费的功能。不过与CKEditor相比，使用的普遍程度低于后者。本篇介绍如果整合Ext JS与CKEditor, 也就是定义基于CKEditor定义Ext JS的富文本编辑器。 整合步骤 这里基于Cmd开发Ext JS项目，使用经典模式开发基于PC端的应用。Ext JS的版本是7.0 。 下载CKEditor （这里下载经典版
富文本编辑器html
12-03
以下是关于富文本编辑器HTML的介绍： 富文本编辑器HTML是一种基于HTML5的文档编辑特征的富文本编辑器。它可以让用户在编辑器中进行文本编辑，并且可以设置初始内容。用户还可以获取输入和编辑后的HTML格式文本。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值