Ext.Net中HtmlEditor控件扩展插入图片、保存等功能

不明白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也可以用此方法搞定。

转载于:https://www.cnblogs.com/weifangyh/p/3193651.html