出处: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 支持上传 图片
extjs htmleditor 图片上传和添加网络图片编辑器
完整的Extjs4 htmleditor上传图片插件(包括实例和用法) 有图片上传的前台和后台代码
新浪博客用的在线编辑器,修改了一部分功能,换了几个好看的图标。
提供给Htmleditor的插件栏使用,使用方法,在定义Htmleditor时,在plugins中创建该工具栏即可。不只可以添加插入图片按钮,其他任何功能都可以添加,此处只是做个添加按钮的示范。
htmleditor扩展插入图片功能,使用Extjs+servlet请求实现。 htmleditor插入图片功能 Extjs servlet
HtmlEditor(编辑器)的一个图片插件,制作过程用到了图片上传等,采用Struts1.2 ,上传组件使用的是Cos,这个插件的意义并不在于插件本身,只是希望给要用ExtJS做文件上传或想做ExtJS插件的朋友提供一种思路 ...
Ext的CKEditor组件,方便在Ext表单输入HTML内容
Extjs_htmleditor插件
简单Winform Html代码编辑器 htmleditor
163HtmlEditor.zip 欢迎下载,请在项目中使用,不要直接使用谷歌浏览器访问index.html会出问题的,究其原因请参见博客:http://blog.csdn.net/gaohuanjie/article/details/25781445
47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50、Ext.form.NumberField类 ………… 44 51、Ext.form.TextArea类 …………… 45 52、...
C# htmleditor230820064
tk.eclipse.plugin.htmleditor_2.1.0
最简单的HtmlEditor.rar,谁能填加上排版功能就好了。
Winform HtmlEditor 相对来说比较强大。
htmleditor在线编辑器,带flv格式上传多媒体功能
c#的HtmlEditor 综合的网页编辑器源码控件
ExtJs HtmlEditor 扩展 可上传视频上传文件上传图片
htmleditor jsp版编辑器,所见即所得的html编辑器,修复了一些使用方面的bug,放心下载