注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

飞天心宏的博客

依稀旧梦似曾见,相逢只恨缘太迟

 
 
 

日志

 
 
关于我

出身数学,爱好文学,从事软件开发工作。一个阳光、幽默、热爱生活的男孩子,在追求理想的路上风雨无阻,勇往直前,崇尚“梦想有多远,我们就走多远”!

网易考拉推荐

Extjs HtmlEditor扩展插入图片功能  

2011-01-29 16:42:54|  分类: Extjs |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

     2009年开始接触Extjs的时候,就发现其HtmlEditor少了一个插入图片功能,于是同事在网上找了个扩展了的代码使用了起来!当时刚刚接触的时候,直接就拿来用的,也没仔细看代码!  后来经常更新Exjts类库的版本,有天竟然把改ux代码给丢了,昨天客户还找我们说,怎么在通知通告功能中发送消息插入不了图片!才恍然大悟,原来把以前扩展的功能丢了,不知道现在Extjs的新版本是否还有这个功能,但是已经使用过低版本的,如果没有改功能,扩展一下也是需要的!

还是先看效果吧:

Extjs HtmlEditor扩展插入图片功能 - 飞天心宏 - 飞天心宏的博客
 
点击,选择图片插入到光标位置:
 
Extjs HtmlEditor扩展插入图片功能 - 飞天心宏 - 飞天心宏的博客
 
选择一种图片后的效果:
 
Extjs HtmlEditor扩展插入图片功能 - 飞天心宏 - 飞天心宏的博客
 
以下是扩展代码:

/*

* ExtendBy:xuzhihong

* CreateDate:2011-01-28

* Description: HTMLEditor

* 增加插入图片功能

*/

 

 

HTMLEditor = Ext.extend(Ext.form.HtmlEditor,

{

    addImage: function() {

        var editor = this;

        var imgform = new Ext.FormPanel(

        {

            region: 'center',

            labelWidth: 55,

            bodyStyle: 'padding:20px 5px 0',

            autoScroll: true,

            border: false,

            buttonAlign: 'center',

            fileUpload: true,

            items: [

            {

                xtype: 'textfield',

                fieldLabel: '选择文件',

                name: 'Pic',

                inputType: 'file',

                allowBlank: false,

                blankText: '文件不能为空',

                height: 25,

                anchor: '90%'

}],

                buttons: [

            {

                text: '插入',

                type: 'submit',

                handler: function() {

                    if (!imgform.form.isValid()) {

                        return;

                    }

                    var photo = imgform.form.items.items[0].getValue();

                    var fileext = photo.substring(photo.lastIndexOf("."), photo.length).toLowerCase();

                    if (fileext != '.jpg' && fileext != '.gif' && fileext != '.jpeg' && fileext != '.png' && fileext != '.bmp') {

                        imgform.form.items.items[0].setValue('');

                        Ext.Msg.show(

                        {

                            title: '提示',

                            icon: 'ext-mb-error ',

                            width: 300,

                            msg: '对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 ',

                            buttons: Ext.MessageBox.OK

                        });

                        return;

                    }

                    imgform.form.submit(

                    {

                        waitMsg: '图片正在插入..',

                        url: editor.url + "?sign=HTMLEditor", //点击插入执行的方法,将图片保存到服务器上

                        success: function(form, action) {

                            var element = document.createElement("img");

                            element.src = action.result.data; //action.result.data "\HtmlEditorPics\abc.jpg (gsr.data)

                            if (Ext.isIE) {

                                editor.insertAtCursor(element.outerHTML);

                            }

                            else {

                                var selection = editor.win.getSelection();

                                if (!selection.isCollapsed) {

                                    selection.deleteFromDocument();

                                }

                                selection.getRangeAt(0).insertNode(element);

                            } //element <img src="\HtmlEditorPics\abc.jpg"/>

                            win.hide();

                        },

                        failure: function(form, action) {

                            form.reset();

                            if (action.failureType == Ext.form.Action.SERVER_INVALID)

                                Ext.MessageBox.alert('警告', action.result.errors.msg);

                        }

                    });

                }

            },

            {

                text: '取消',

                type: 'submit',

                handler: function() {

                    win.hide();

                }

}]

            });

            var win = new Ext.Window(

        {

            title: "插入图片",

            width: 400,

            height: 150,

            plain: true,

            modal: true,

            closeAction: 'hide',

            border: false,

            layout: "fit",

            items: imgform

        });

            win.show(this);

        },

        createToolbar: function(editor) {

            HTMLEditor.superclass.createToolbar.call(this, editor);

            this.tb.insertButton(16,

        {

            cls: "x-btn-icon",

            iconCls: "ico_insertPicture",

            handler: this.addImage,

            scope: this

        });

        }

    });

    Ext.reg('EditorEx', HTMLEditor);

 

 

 

 

在js代码中使用:

 

{

             xtype: "EditorEx",

             anchor: "98%",

             name: 'FContent',

             fieldLabel: "内容",

             height: 320,

             width: 300,

             url: '/PicUpLoad.aspx'

   }

 

其中xtype: "EditorEx",url: '/PicUpLoad.aspx' 其中xtype就是我们扩展的,url为Ajax 请求路径:

PicUpLoad.aspx.cs后台方法返回一个图片路径(存储在gsr.data中)

        /// <summary>

        /// HTMLEditor插入图片

        /// </summary>

        private void HTMLEditor()

        {

            HttpPostedFile hpf = Request.Files["Pic"];

            GSReturn gsr = new GSReturn();

            if (hpf.ContentLength > 0)

            {

                string fileName = ReportCommon.AddDateDateTimeAfter("", "") + System.IO.Path.GetExtension(hpf.FileName);

                string fileSavePath = "/HtmlEditorPics/" + fileName;

                fileSavePath = System.Web.HttpContext.Current.Server.MapPath(fileSavePath);

                //保存文件

                hpf.SaveAs(fileSavePath);

                gsr.success = true;

                gsr.data = "/HtmlEditorPics/" + fileName;

            }

            string str = JSSerialize.Serialize(gsr);

            Response.Write(str);

            Response.End();

        }

 

 

 
 扩展原理很简单,自己看代码吧!
 
                                                                                          飞天心宏  2011-01-29
  评论这张
 
阅读(7890)| 评论(14)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018