不明白Ext.NET这么强大的控件库为什么把HtmlEditor做的这么简陋。
目标:给HtmlEditor加入插入图片功能。
解决方案:
1.建立一个js文件NewHtmlEditor.js,js里面用到的图片资源,根据实际情况定义。
/** * 重载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({ waitMsg: '正在上传......', url: '../HtmlEditorUpLoadServer.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); } }); } }] }) //上传文件窗体 var win = new Ext.Window({ title: "上传图片", width: 385, height: 110, modal: true, border: false, layout: "fit", items: imgform }); win.show(); }, addSave: function () {//保存 alert('保存'); }, //工具栏项 createToolbar: function (editor) { HTMLEditor.superclass.createToolbar.call(this, editor); this.tb.insertButton(16, { cls: "x-btn-icon", icon: "../Images/Icon/picture.png", handler: this.addImage, scope: this }); this.tb.insertButton(0, { cls: "x-btn-icon", icon: "../Images/Icon/disk.png", handler: this.addSave, scope: this }); } }); Ext.reg('NewHtmleditor', HTMLEditor);
2.在项目根目录建立一个Upload文件夹,用来存放传上来的图片。
3.建立上传图片服务HtmlEditorUpLoadServer.aspx
设计页:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HtmlEditorUpLoadServer.aspx.cs" Inherits="HtmlEditorUpLoadServer" %>
后台代码:
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.新建一个TestHtmlEditor.aspx,在页面中引入
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
2.引入NewHtmleditor.js,并创建HtmlEditor
<script src="../JS/NewHtmleditor.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var ff = new Ext.Panel({
title: "",
renderTo: document.body,
width: 800,
height: 480,
labelWidth: 55,
frame: true,
layout: 'fit',
items: [
{
xtype: "NewHtmleditor",
name: "content",
enableColors: true
}]
});
});
</script>
</html>
一切ok,如果是extjs也可以用此方法搞定。