出处: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; } |
分享到:
相关推荐
通过以上内容,我们了解到Ext HTMLEditor如何支持上传图片,并涉及到了Ext JS的基本使用、HTMLEditor的配置、图片上传的实现原理以及相关的安全优化措施。实现这一功能需要前端与后端的配合,但带来的用户体验提升是...
本教程将深入讲解如何在EXT Htmleditor的工具栏中添加一个插入图片的功能按钮,并拓展讨论EXT Htmleditor的其他自定义可能性。 首先,我们来理解EXT Htmleditor的基本结构。Htmleditor是一个基于IFrame的组件,它...
在ExtJS4中,htmleditor是一个非常实用的组件,它允许用户在编辑器中进行HTML编辑,包括插入文本、格式化、链接创建等,而上传图片功能是增强编辑器功能的重要一环。本资源提供了一个完整的ExtJS4 htmleditor图片...
总的来说,这个“新浪htmleditor修改版(添加图片,flv上传)”在保留原有功能的基础上,针对图片和视频上传进行了强化,同时改进了界面设计,提高了用户体验。对于使用新浪博客或其他需要在线编辑的平台的用户来说...
2. **上传图片处理**:当用户选择图片并点击“插入”按钮时,我们需要监听这个事件。在HTML Editor中,可以通过`getEditorField().insertImage()`方法插入图片,但图片必须有一个URL。因此,我们需要实现一个图片...
HtmlEditor(编辑器)的一个图片插件,制作过程用到了图片上传等,采用Struts1.2 ,上传组件使用的是Cos,这个插件的意义并不在于插件本身,只是希望给要用ExtJS做文件上传或想做ExtJS插件的朋友提供一种思路 ...
"带插图功能的EXT html编辑器"是一个EXT社区的创新扩展,为EXT的HtmlEditor组件增加了图像上传和插入功能。这个扩展使得EXT的HTML编辑器变得更加实用,特别适合那些需要在网页内容中添加图片的场景,如博客、论坛、...
6. **图片上传**:CKEditor内置了图片上传功能,用户可以直接在编辑器中上传图片,这通常需要后端配合提供一个接收图片的接口。你可以通过配置CKEditor的图片上传选项来定制上传过程,比如设置上传URL、限制文件大小...
这篇博客文章"Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现"将详细介绍如何使用HtmlEditor以及如何实现图片上传和显示的功能。 首先,我们需要了解HtmlEditor的基本用法。HtmlEditor通常包含一个...
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 ...
3. **配置KindEditor**:KindEditor有许多可配置的选项,如语言设置、工具栏按钮、图片上传、文件管理等。这些可以通过在组件构造函数中传递配置对象来实现。例如,可以设置`langType`为`'zh-CN'`以使用中文版本,...
-修正HtmlEditor不能编辑的BUG(feedback:TheBox)。 -修正IE下有时会出现空白页面的情况(feedback:olivia919)。 +2009-12-06 v2.1.8 -修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 ...
3、ExtJS的HtmlEditor的图片文件上传插件。 4、Grid列表和表单,包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5、导入导出Excel数据,支持xlsx和xls文件。 6、资源管理(菜单管理)。 7...
-修正HtmlEditor不能编辑的BUG(feedback:TheBox)。 -修正IE下有时会出现空白页面的情况(feedback:olivia919)。 +2009-12-06 v2.1.8 -修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 ...