Extjs4HtmlEditor图片上传插件

最新推荐文章于 2018-01-22 09:54:42 发布
最新推荐文章于 2018-01-22 09:54:42 发布
阅读量2.8k 收藏
点赞数
分类专栏： Extjs4 htmleditor .Net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Codec007/article/details/8616228
版权
.Net 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
Extjs4
1 篇文章 0 订阅
订阅专栏
htmleditor
1 篇文章 0 订阅
订阅专栏

插件代码：

/*
*
*      Author : zhy
*        Date : 2013年2月21日
* Description : 插入图片插件
*
*/
Ext.define('TKW.Editor.Plugin.Image', {
    extend: 'Ext.util.Observable',
    alias: 'widget.PluginImage',
    langTitle: '<span class="commoncss">插入图片</span>',
    urlSizeVars: ['width', 'height'],
    basePath: '',
    constructor: function (config) {
        var me = this;

        Ext.applyIf(me.config, config);
        this.config = config;//保存初始化设置
        //解析设置
        me.url = config.url;           //请求地址
        me.callParent(arguments);
    },
    init: function (cmp) {
        this.cmp = cmp; //保存传入的元件
        this.cmp.on('initialize', this.onInit, this);//绑定初始化事件
        this.cmp.on('afterrender', this.onAfterrender, this);//绑定渲染事件
    },
    //鼠标放开
    onEditorMouseUp: function (e) {
        Ext.get(e.getTarget()).select('img').each(function (el) {
            var w = el.getAttribute('width'), h = el.getAttribute('height'), src = el.getAttribute('src') + ' ';
            src = src.replace(new RegExp(this.urlSizeVars[0]
							+ '=[0-9]{1,5}([&| ])'), this.urlSizeVars[0] + '='
							+ w + '$1');
            src = src.replace(new RegExp(this.urlSizeVars[1]
							+ '=[0-9]{1,5}([&| ])'), this.urlSizeVars[1] + '='
							+ h + '$1');
            el.set({
                src: src.replace(/\s+$/, "")
            });
        }, this);

    },
    //初始化
    onInit: function (htmlEditor, eOpts) {
        Ext.EventManager.on(htmlEditor.getDoc(), {
            'mouseup': this.onEditorMouseUp,
            buffer: 100,
            scope: this
        });
    },
    //渲染
    onAfterrender: function (component, eOpts) {
        var editor = Ext.getCmp(component.id);
        var toolbar = Ext.getCmp(editor.getToolbar().id);
        //添加按钮
        toolbar.add({
            iconCls: 'Plugin_Image',
            handler: this.selectImage,
            scope: this,
            tip: {
                title: this.langTitle
            },
            overflowText: this.langTitle
        });
    },
    //交验url
    isUrl: function (urlString) {
        regExp = /(http[s]?|ftp):\/\/[^\/\.]+?\..+\w$/i;
        if (urlString.match(regExp))
            return true;
        else
            return false;
    },
    //选择图片
    selectImage: function () {
        var me = this;
        if (!this.imgWindow) {
            this.imgWindow = new Ext.Window({
                title: this.langTitle,
                id: 'imgWindow',
                closeAction: 'hide',
                modal: true,
                width: 400,
                height: 160,
                layout: 'fit',
                items: [new Ext.TabPanel({
                    border: false,
                    enableTabScroll: true,
                    activeTab: 0,
                    height: 160,
                    items: [{
                        title: '<span class="commoncss">上传本地图片</span> ',
                        items: [{
                            xtype: 'form',
                            itemId: 'upload-img',
                            id: 'upload-img',
                            fileUpload: true,
                            border: false,
                            plain: true,
                            bodyStyle: 'padding: 10px;',
                            labelWidth: 60,
                            labelAlign: 'right',
                            items: [{
                                xtype: 'fileuploadfield',
                                fieldLabel: '选择文件',
                                name: 'imageFile',
                                anchor: '100%',
                                allowBlank: false,
                                emptyText: '请选择图片(大小不能超过100KB)'
                            }, {
                                xtype: 'textfield',
                                fieldLabel: '图片说明',
                                name: 'up_name',
                                maxLength: 100,
                                anchor: '100%',
                                emptyText: '简短的图片说明'
                            }]
                        }],
                        buttons: [{
                            text: '插入',
                            iconCls: 'acceptIcon',
                            id: 'btnUploadInset',
                            handler: function () {
                                var frm = Ext.getCmp('upload-img').getForm();
                                if (!frm.isValid()) {
                                    return;
                                }
                                if (frm.isValid()) {
                                    var imageFile = frm.findField('imageFile').getValue();
                                    var point = imageFile.lastIndexOf(".");
                                    var type = imageFile.substr(point);
                                    if (type == ".jpg" || type == ".gif" || type == ".JPG" || type == ".GIF") {
                                    } else {
                                        Ext.MessageBox.alert('提示', '只支持上传jpg和gif格式的图片文件');
                                        return;
                                    }
                                    frm.submit({
                                        url: me.url,
                                        waitTitle: '提示',
                                        method: 'POST',
                                        waitMsg: '正在上传文件,请稍候...',
                                        success: function (form, action) {
                                            var aUrl = action.result.aUrl;
                                            if (action.result.state == 'error') {
                                                Ext.MessageBox.alert('提示',action.result.msg);
                                                return;
                                            }
                                            var img = {
                                                Url: aUrl,
                                                Title: frm.findField('up_name').getValue()
                                            };
                                            this.insertImage(img);
                                        },
                                        failure: function (response) {
                                            Ext.MessageBox.alert('提示', '文件上传失败');
                                        },
                                        scope: this
                                    });
                                    Ext.getCmp('imgWindow').hide();
                                } else {
                                    if (!frm.findField('imageFile').isValid()) {
                                    }
                                }
                            },
                            scope: this
                        }, {
                            text: '取消',
                            id: 'btnUploadCancel',
                            iconCls: 'deleteIcon',
                            handler: function () {
                                Ext.getCmp('imgWindow').hide();
                            },
                            scope: this
                        }]
                    }, {
                        title: '<span class="commoncss">链接网络图片</span> ',
                        items: [{
                            xtype: 'form',
                            itemId: 'insert-img',
                            id: 'insert-img',
                            border: false,
                            plain: true,
                            bodyStyle: 'padding: 10px;',
                            labelWidth: 60,
                            labelAlign: 'right',
                            items: [{
                                xtype: 'textfield',
                                fieldLabel: '图片URL',
                                name: 'url',
                                anchor: '100%',
                                allowBlank: false,
                                emptyText: '请填入支持外链的长期有效的图片URL'
                            }, {
                                xtype: 'textfield',
                                fieldLabel: '图片说明',
                                name: 'name',
                                maxLength: 100,
                                anchor: '100%',
                                emptyText: '简短的图片说明'
                            }]
                        }],
                        buttons: [{
                            text: '插入',
                            iconCls: 'acceptIcon',
                            id: 'btnLinkInset',
                            handler: function () {
                                var frm = Ext.getCmp('insert-img').getForm();
                                if (frm.isValid()) {
                                    url = frm.findField('url').getValue();

                                    if (!this.isUrl(url)) {
                                        Ext.Msg.alert('提示','URL不合法.请重新输入.格式[http://****]');
                                        return;
                                    };

                                    var img = {
                                        // Width : 100,
                                        // Height : 100,
                                        Url: frm.findField('url').getValue(),
                                        ID: 'id_img_9999',
                                        Title: frm.findField('name').getValue()
                                    };
                                    this.insertImage(img);
                                    this.imgWindow.hide();
                                } else {
                                    if (!frm.findField('url').isValid()) {
                                    }
                                }
                            },
                            scope: this
                        }, {
                            text: '取消',
                            id: 'btnLinkCancel',
                            iconCls: 'deleteIcon',
                            handler: function () {
                                Ext.getCmp('imgWindow').hide();
                            },
                            scope: this
                        }]
                    }]
                })],
                listeners: {
                    show: {
                        fn: function () {
                            var frm = Ext.getCmp('insert-img').getForm();
                            frm.reset();
                            var frm1 = Ext.getCmp('upload-img').getForm();
                            frm1.reset();
                        },
                        scope: this,
                        defer: 350
                    }
                }
            });
            this.imgWindow.show();
        } else {
            this.imgWindow.show();
        }
    },
    //插入图片
    insertImage: function (img) {
        this.cmp.insertAtCursor('<img src="' + img.Url + '" title="' + img.Name + '" alt="' + img.Name + '">');
    }
});

调用代码：

    <script type="text/javascript" src="/Scripts/HtmlEditorPlugins/TKW.Editor.Plugin.Image.js"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                renderTo: Ext.getBody(),
                items: [
                    Ext.create('Ext.form.field.HtmlEditor', {
                        
                        plugins: [
                            Ext.create('TKW.Editor.Plugin.Image', { url: '/Image/Upload' })
                        ]
                    })
                ]
            });

        });
    </script>

服务器接收代码：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ExtjsField.Controllers
{
    public class ImageController : Controller
    {
        //
        // GET: /image/
        [AcceptVerbs(HttpVerbs.Post)]
        public string Upload()
        {
            var file = Request.Files["imageFile"];
            string fileName = DateTime.Now.ToString("yyyyMMddhhmmss") + Path.GetExtension(file.FileName);
            file.SaveAs(Server.MapPath("~/Upload/" + fileName));//保存到服务器磁盘路径
            string returnStr = "{\"success\":true,\"aUrl\":\"/Upload/" + fileName + "\"}";//返回网络路径
            return returnStr;
        }

    }
}

代码运行结果：

参考文献：

http://eredg4.iteye.com/blog/1047795

http://web230531.host89.chinajsp.net/login.ered?reqCode=init


 

Codec007
关注
专栏目录
完整的Extjs4 htmleditor上传图片插件（包括实例和用法）
06-26
完整的Extjs4 htmleditor上传图片插件（包括实例和用法） 有图片上传的前台和后台代码
extjs htmleditor 图片上传和添加网络图片编辑器
10-30
这个主题主要关注如何在ExtJS的HTMLEditor中实现图片的上传和添加网络图片功能。 首先，理解ExtJS HTMLEditor的基本结构和工作原理是至关重要的。HTMLEditor是一个组件，它可以将HTML代码作为输入，并提供类似于...
ExtJS4学习笔记四－－图片上传
逸雨涵梦的专栏
08-21 1579
相关包文件：  commons-fileupload-1.2.1.jar  commons-io-1.4.jar 前端程序：  Html代码   HTML>    HEAD>     TITLE>Ext.form.field.File示例TITLE>     meta http-equiv="Content-Type" content="text/htm
Extjs之--图片上传器
liuxi1024的专栏
09-03 480
1、效果图: 点击文本框后图标，弹出图片上传窗口   说明： （1）、点击文本框后图标，弹出上传图片窗口，上传成功后将生成的图片名称添加入文本框内。 （2）、图片可预览，并对非图片文件进行阻挡。   2、app-imageUpload.js代码   //上传图片类型 var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]...
扩展ExtJs的编辑器(HtmlEditor):插入图片
weixin_34005042的博客
06-29 202
       Ext内置的编辑器功能相对还是很弱，例如插入图片，文件管理，这些都没有，表格编辑也很弱。我是个懒人(相信大多数程序员都是懒人)幸好Extjs官方论坛实在是太强大了，基本上是有求必应啊，社区氛围很好，貌似Ext官方有专门的团队来回复社区的问题。      总之我就找到了扩展HtmlEditor插入图片功能的帖子,里面的代码有很多问题，我做了一些修改，算是正常了，目前只是简单的插入url...
ExtJS HtmlEditor 图片上传插件
bywayboy的专栏
09-30 5431
ExtJS 是一套相当强大的WEB组件库。但它的 Ext.form.HtmlEditor 却有点差强人意。因为朋友需要。所以做了个实例。并封装成插件。以方便以后使用。用法举例：   Ext.QuickTips.init(); new Ext.form.HtmlEditor({ renderTo: Ext.getBody(),
ExtJS的编辑器HtmlEditor的一个图片插件
10-04
HtmlEditor(编辑器)的一个图片插件，制作过程用到了图片上传等，采用Struts1.2 ，上传组件使用的是Cos，这个插件的意义并不在于插件本身，只是希望给要用ExtJS做文件上传或想做ExtJS插件的朋友提供一种思路 ...
htmleditor扩展插入图片功能,使用Extjs+servlet请求实现
03-02
4. **与Servlet通信**：在前端，我们需要使用Ajax请求将图片数据发送到Servlet，并接收返回的URL。在ExtJS中，我们可以使用`Ext.Ajax.request`方法： ```javascript Ext.Ajax.request({ url: 'uploadImage', // ...
可二次开发Extjs4.0通用后台管理系统源码完整大型项目ExtJS 4.2+Hibernate 4.1.7+SpringMVC
04-20
3ExtJS的HtmlEditor的图片文件上传插件。 4Grid列表和表单，包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5导入导出Excel数据，支持xlsx和xls文件。 6资源管理（菜单管理）。 7用户管理...
extjs 图片上传
zhuyusss的博客
09-04 154
上传控件：    var panel3 = new Ext.form.FormPanel({        labelAlign : 'left',             labelWidth:60,        border : false,        bodyStyle : 'padding:4px;',        frame : false, ...
extjs图片上传
03-23
extjs中用于图片上传，实现多张图片的预览，及上传，删除，同时支持extjs3.*
Extjs Swfupload 多图上传插件绝对可运行
03-26
Extjs Swfupload 自己改写的多图上传带进度条插件。完整项目打包上传，绝对可运行。
EXtjs 图片批量上传
09-23
Extjs 批量上传图片，选择多个图片可批量删除操作，
extjs struts2 多图片批量上传控件
01-04
struts2 extjs 实现多图片批量上传，已经运用到项目当中了。
Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现
08-08
NULL 博文链接：https://zyjustin9.iteye.com/blog/2165196
extjs-上传图片
wangyuanjun008的博客
01-22 1471
Ext.onReady(function () { //初始化标签中的Ext:Qtip属性。 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; //创建div组件 var imagebox = n
extjs4 扩写htmledit 增加上传图片功能
awe5566的专栏
01-02 2047
Ext.define('Ext.ux.form.MyEditor', { alias: 'widget.myeditor', extend: 'Ext.form.field.HtmlEditor', requires: ['Ext.form.field.HtmlEditor'], createToolbar: function(){
EXTJS htmleditor 插入图片的改进
wzq520syh的博客
12-10 298
//在插入图片之前记录光标. var imgform; var range; var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, { addImage : function() { if (Ext.isIE) { if (this.iframe.contentWindow.document.selection.type.toLowe...
扩展extjs的htmleditor实现图片插入
hzp
09-21 195
customer.js Ext.namespace('Ext.ux','Ext.ux.plugins'); Ext.ux.plugins.HtmlEditorImageInsert=function(config) { config=config||{}; Ext.apply(this,config); this.init=...
extjs3.4 批量图片上传
最新发布
06-08
在 ExtJS 3.4 中实现批量图片上传可以通过以下步骤： 1. 创建一个文件上传表单 可以使用 Ext.form.Panel 组件创建一个包含文件上传字段的表单，例如： ``` var formPanel = new Ext.form.Panel({ renderTo: 'upload-form', fileUpload: true, items: [{ xtype: 'filefield', name: 'image', fieldLabel: 'Select an image', labelWidth: 100, allowBlank: false, buttonText: 'Browse...' }] }); ``` 2. 处理上传请求 在表单提交时，需要处理上传请求并将文件发送到服务器。可以使用 Ext.form.action.Submit 类来处理请求，例如： ``` formPanel.getForm().submit({ url: 'upload.php', // 上传文件的服务器端处理脚本 waitMsg: 'Uploading your image...', success: function(form, action) { Ext.Msg.alert('Success', 'Your image was uploaded successfully.'); }, failure: function(form, action) { Ext.Msg.alert('Failed', action.result.msg); } }); ``` 其中，url 参数为上传文件的服务器端处理脚本地址，waitMsg 参数为上传过程中显示的等待消息，success 和 failure 分别为上传成功和失败时的回调函数。 3. 处理上传文件 在服务器端处理上传文件时，可以使用 PHP、Java、Node.js 等语言和框架来实现。以下是一个 PHP 的示例代码： ``` <?php $uploadDir = 'uploads/'; $uploadFile = $uploadDir . basename($_FILES['image']['name']); if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadFile)) { echo json_encode(array('success' => true)); } else { echo json_encode(array('success' => false, 'msg' => 'Failed to upload image.')); } ?> ``` 其中，$uploadDir 为上传文件保存的目录，$uploadFile 为上传文件的完整路径。move_uploaded_file 函数用于将上传的临时文件移动到目标位置。最后，使用 json_encode 函数将上传结果以 JSON 格式返回给客户端。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值