- 解决方案结构
- HtmlEditor_Upload.js 脚本
- HtmlEditorUploadImg.ashx 上传图片到服务器
- 演示 htmleditor 控件添加插入图片功能
解决方案结构
图 1 解决方案结构
说明：
- Handle 目录，是上传图片到服务器端的 Handle 处理程序；Handle2 目录，功能 Handle 目录里一样，只是另外一种写法，各有优点。Handle2 目录里的方法是目录在任何位置都能上传，而 Handle 目录里的，因为是 .net 自己封装的，需要上传目录在网站目录下，这样，如果把上传目录放在虚拟目录或是其他应用程序下就不行。看你的需求是什么，如果将来可能要做图片服务器，那 Handle2 里的方式比较合适。
- Images 目录，是扩展 ext js/Ext.Net htmleditor 控件功能需要的相关图标。
- Js 目录里的 HtmlEditor_Upload.js 文件，是扩展 ext js/Ext.Net htmleditor 控件功能的脚本，使其具备插入图片功能。
- UploadImgs 目录，是上传图片保存到服务器的目录。
- MsgInfo 类，是封装上传图片到服务器端后，服务器返回给客户端的自定义状态信息。
- WebForm1.aspx 页面，是演示扩展 ext js/Ext.Net htmleditor 控件功能。
HtmlEditor_Upload.js 脚本
HtmlEditor_Upload.js 是利用 ext js/Ext.Net 扩展其 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,
width: 300
}
],
buttons: [{
text: '确定',
type: 'submit',
handler: function () {
if (!imgform.form.isValid()) { return; }
imgform.form.submit({
waitTitle: '提示',
waitMsg: '正在上传……',
method: 'post',
url: 'Handle/HtmlEditorUploadImg.ashx',
//
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.removeAll();
win.hide();
},
//
failure: function (form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID) {
Ext.MessageBox.alert('警告', action.result.msg);
}
else {
Ext.MessageBox.alert('警告', action.result.msg);
}
}
});
}
}]
});
// 创建上传的窗体
var win = new Ext.Window({
title: "上传图片",
width: 500,
height: 200,
modal: true,
border: false,
layout: "fit",
items: imgform
});
win.show();
}, // addImage end
//保存
addSave: function () {
// do something
alert('保存');
},
// 插入 htmleditor 工具栏项
createToolbar: function (editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16,
{
cls: "x-btn-icon",
icon: "../Images/upload_1.jpg",
handler: this.addImage,
scope: this
});
this.tb.insertButton(0,
{
cls: "x-btn-icon",
icon: "../Images/upload_2.jpg",
handler: this.addSave,
scope: this
});
}
});
Ext.reg('htmleditor_upload', HTMLEditor);