`
bright_future
  • 浏览: 88894 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext HtmlEditor 上传图片

    博客分类:
  • ext
阅读更多

 

 出处:http://www.cnblogs.com/wuliangbo/archive/2009/03/08/1406460.html

 

 

覆盖Ext原有的HtmlEditor:
HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
    addImage : 
function() {
        
var editor = this;
        
var imgform = new Ext.FormPanel({
            region : 
'center',
            labelWidth : 
55,
            frame : 
true,
            bodyStyle : 
'padding:5px 5px 0',
            autoScroll : 
true,
            border : 
false,
            fileUpload : 
true,
            items : [{
                        xtype : 
'textfield',
                        fieldLabel : 
'选择文件',
                        name : 
'userfile',
                        inputType : 
'file',
                        allowBlank : 
false,
                        blankText : 
'文件不能为空',
                        height : 
25,
                        anchor : 
'90%'
                    }],
            buttons : [{
                text : 
'上传',
                type : 
'submit',
                handler : 
function() {
                    
if (!imgform.form.isValid()) {return;}
                    imgform.form.submit({
                        waitMsg : 
'正在上传',
                        url : 
'Default.aspx',
                        success : 
function(form, action) {
                            
var element = document.createElement("img");
                            element.src 
= action.result.fileURL;
                            
if (Ext.isIE) {
                                editor.insertAtCursor(element.outerHTML);
                            } 
else {
                                
var selection = editor.win.getSelection();
                                
if (!selection.isCollapsed) {
                                    selection.deleteFromDocument();
                                }
                                selection.getRangeAt(
0).insertNode(element);
                            }
                            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.close(
this);
                }
            }]
        })

        
var win = new Ext.Window({
                    title : 
"上传图片",
                    width : 
300,
                    height : 
200,
                    modal : 
true,
                    border : 
false,
                    iconCls : 
"picture.png",
                    layout : 
"fit",
                    items : imgform

                });
        win.show();
    },
    createToolbar : 
function(editor) {
        HTMLEditor.superclass.createToolbar.call(
this, editor);
        
this.tb.insertButton(16, {
                    cls : 
"x-btn-icon",
                    icon : 
"picture.png",
                    handler : 
this.addImage,
                    scope : 
this
                });
    }
});
Ext.reg(
'StarHtmleditor', HTMLEditor);

 

 

 

调用代码:
Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget 
= 'side';
    
var ff = new Ext.FormPanel({
                title : 
"文件上传",
                renderTo : document.body,
                width : 
600,
                height : 
480,
                labelWidth : 
55,
                frame : 
true,
                items : [{
                            xtype : 
"textfield",
                            name : 
"title",
                            fieldLabel : 
"标题",
                            anchor : 
"98%"
                        }, {
                            xtype : 
"combo",
                            name : 
"topic_id",
                            fieldLabel : 
"所属栏目",
                            anchor : 
"98%"
                        }, {
                            xtype : 
"textfield",
                            name : 
"keywords",
                            fieldLabel : 
"关键字",
                            anchor : 
"98%"
                        }, {
                            xtype : 
"StarHtmleditor",
                            name : 
"content",
                            fieldLabel : 
"内容",
                            anchor : 
"98%"
                        }]
    });

});

 

 

 

后台代码:
 protected void Page_Load(object sender, EventArgs e)
        {
            string fileName 
= string.Empty;
            string fileURL 
= string.Empty;
            string rt 
= string.Empty;
            
try
            {
                HttpPostedFile file 
= Request.Files[0];
                fileName 
= GetFileName(file.FileName);
                file.SaveAs(Server.MapPath(
"upload\\"+ fileName);
                fileURL 
= "upload/" + fileName;
                rt 
= "{success:'true',fileURL:'" + fileURL + "'}";
            }
            
catch
            {
                rt 
= "{success:'false',fileURL:'" + fileURL + "'}";
            } 
             
            Response.Write(rt);

        }
        
        private string GetFileName(string FullName)
        {
            string fileName 
= string.Empty;
            
int last = FullName.LastIndexOf(@"\");
            fileName 
= FullName.Substring(last + 1, FullName.Length - last - 1);
            
return fileName;
        }
分享到:
评论
1 楼 loveisafalse 2011-08-07  
我想问问,怎么我用弹出式panel弹出的时候,那个图标无法加载呢?

相关推荐

    Ext Htmleditor 支持上传图片

    通过以上内容,我们了解到Ext HTMLEditor如何支持上传图片,并涉及到了Ext JS的基本使用、HTMLEditor的配置、图片上传的实现原理以及相关的安全优化措施。实现这一功能需要前端与后端的配合,但带来的用户体验提升是...

    EXT扩展Htmleditor,在工具栏中添加插入图片按钮,可选择图片插入到编辑器中(也可添加其他功能按钮)

    本教程将深入讲解如何在EXT Htmleditor的工具栏中添加一个插入图片的功能按钮,并拓展讨论EXT Htmleditor的其他自定义可能性。 首先,我们来理解EXT Htmleditor的基本结构。Htmleditor是一个基于IFrame的组件,它...

    完整的Extjs4 htmleditor上传图片插件(包括实例和用法)

    在ExtJS4中,htmleditor是一个非常实用的组件,它允许用户在编辑器中进行HTML编辑,包括插入文本、格式化、链接创建等,而上传图片功能是增强编辑器功能的重要一环。本资源提供了一个完整的ExtJS4 htmleditor图片...

    新浪htmleditor修改版(添加图片,flv上传)

    总的来说,这个“新浪htmleditor修改版(添加图片,flv上传)”在保留原有功能的基础上,针对图片和视频上传进行了强化,同时改进了界面设计,提高了用户体验。对于使用新浪博客或其他需要在线编辑的平台的用户来说...

    htmleditor扩展插入图片功能,使用Extjs+servlet请求实现

    2. **上传图片处理**:当用户选择图片并点击“插入”按钮时,我们需要监听这个事件。在HTML Editor中,可以通过`getEditorField().insertImage()`方法插入图片,但图片必须有一个URL。因此,我们需要实现一个图片...

    ExtJS的编辑器HtmlEditor的一个图片插件

    HtmlEditor(编辑器)的一个图片插件,制作过程用到了图片上传等,采用Struts1.2 ,上传组件使用的是Cos,这个插件的意义并不在于插件本身,只是希望给要用ExtJS做文件上传或想做ExtJS插件的朋友提供一种思路 ...

    带插图功能的ext html编辑器

    "带插图功能的EXT html编辑器"是一个EXT社区的创新扩展,为EXT的HtmlEditor组件增加了图像上传和插入功能。这个扩展使得EXT的HTML编辑器变得更加实用,特别适合那些需要在网页内容中添加图片的场景,如博客、论坛、...

    Ext的CKEditor组件

    6. **图片上传**:CKEditor内置了图片上传功能,用户可以直接在编辑器中上传图片,这通常需要后端配合提供一个接收图片的接口。你可以通过配置CKEditor的图片上传选项来定制上传过程,比如设置上传URL、限制文件大小...

    Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现

    这篇博客文章"Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现"将详细介绍如何使用HtmlEditor以及如何实现图片上传和显示的功能。 首先,我们需要了解HtmlEditor的基本用法。HtmlEditor通常包含一个...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    在Ext中集成KindEditor4.0正式版

    3. **配置KindEditor**:KindEditor有许多可配置的选项,如语言设置、工具栏按钮、图片上传、文件管理等。这些可以通过在组件构造函数中传递配置对象来实现。例如,可以设置`langType`为`'zh-CN'`以使用中文版本,...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正HtmlEditor不能编辑的BUG(feedback:TheBox)。 -修正IE下有时会出现空白页面的情况(feedback:olivia919)。 +2009-12-06 v2.1.8 -修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 ...

    最新JAVA通用后台管理系统(ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8)Eclipse版本

    3、ExtJS的HtmlEditor的图片文件上传插件。 4、Grid列表和表单,包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5、导入导出Excel数据,支持xlsx和xls文件。 6、资源管理(菜单管理)。 7...

    ExtAspNet_v2.3.2_dll

    -修正HtmlEditor不能编辑的BUG(feedback:TheBox)。 -修正IE下有时会出现空白页面的情况(feedback:olivia919)。 +2009-12-06 v2.1.8 -修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 ...

Global site tag (gtag.js) - Google Analytics