`

asp.net 的文本编辑器kindeditor的使用

asp.net 
阅读更多
1、作用：
    在.net开发过程中，经常需要文章信息发布功能，常用的开源的文本编辑器ckeditor和kindeditor等。kindeditor是一款比较好用的编辑插件，功能齐全。

2、代码
<%@ Page Language="C#" AutoEventWireup="true" validateRequest="false" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
    this.Literal1.Text = Request.Form["content1"];
}

</script>

<!doctype html>

<html>
<head runat="server">
    <meta charset="utf-8" />
    <title>KindEditor ASP.NET</title>
    <link rel="stylesheet" href="webEditor/themes/default/default.css" />
<link rel="stylesheet" href="webEditor/plugins/code/prettify.css" />
<script charset="utf-8" src="webEditor/kindeditor.js"></script>
<script charset="utf-8" src="webEditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="webEditor/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function(K) {
var editor1 = K.create('#content1', {
cssPath : 'webEditor/plugins/code/prettify.css',
uploadJson : 'webEditor/upload_json.ashx',
fileManagerJson : 'webEditor/file_manager_json.ashx',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
K('form[name=example]')[0].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
K('form[name=example]')[0].submit();
});
}
});
prettyPrint();
});
</script>
</head>
<body>

<asp:Label ID="Label1" runat="server" Text="">
     
   
    </asp:Label>
   
    <asp:Literal ID="Literal1" runat="server"></asp:Literal>

 

    <form id="example" runat="server">
        <textarea id="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;" runat="server"></textarea>
        <br />
        <asp:Button ID="Button1" runat="server" Text="提交内容" /> (提交快捷键: Ctrl + Enter)
    </form>
</body>
</html>



kindeditor一个比较给力的WYSISG编辑器，比较给力，爆米花工作室提供的网站中，kindeditor基本上是标配。然而，kindeditor缺失一个比较重要的功能：上传附件，虽然有上传图片的功能与上传附件类似，但上传附件功能的缺失造成了一定的影响，于是，只有将自己弄了。

比较幸运的是，kindeditor基于插件的设计，扩展方便，整一个插件很简单，于是，本文参照上传图片插件，并参考了网上的一些资料，完成了一个简单的上传附件的插件。

功能限定

上传附件插件允许*.zip和*.rar的文件，上传到编辑器目录的attached目录下，附件上传完成后，编辑器的文本中，添加一个“下载附件”链接，指向上传的附件，服务器端为.net环境。

插件开发

(1) 基本配置

kindeditor的脚本文件kindeditor.js的KE.lang中，添加accessory : '插入附件'

invalidAccessory: "请上传有效的文件，只允许rar,zip格式。"KE.lang通过JSON格式，定义了“语言资源”。


(2) 上传附件的对话框HTML文件
<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Accessory</title>
        <style type="text/css">
            body { font-size: 12px; margin: 0px; background: #F0F0EE; overflow: hidden; }
        </style>
        <script type="text/javascript">
            var KE = parent.KindEditor;
            location.href.match(/\?id=([\w-]+)/i);
            var id = RegExp.$1;
            KE.event.ready(function () { KE.util.hideLoadingPage(id); }, window, document);
        </script>
    </head>
    <body>
        <iframe name="uploadIframe" id="uploadIframe" style="display:none;"></iframe>
        <form name="uploadForm" method="post" enctype="multipart/form-data" action="../accessory_upload_json.ashx" target="uploadIframe">
            <input type="hidden" id="editorId" name="id" value="" />
                <table border="0" cellpadding="0" cellspacing="0" align="center">
                  <tr><td><input type="file" id="accessoryFile" name="accessoryFile" style="width:220px;" /></td></tr>
                </table>
        </form>
    </body>
</html>以上代码，作为accessory.html文件，置于编辑器目录的plugin目录下。

(3) 上传附件的服务器端文件<%@ WebHandler Language="C#" class="Accessory" %>

using System;
using System.Collections;
using System.Web;
using System.IO;
using System.Globalization;
using LitJson;

public class Accessory : IHttpHandler
{
    private String savePath = "./attached/";
    //文件保存目录URL
    private String saveUrl = "../Scripts/Editor/attached/";
    //定义允许上传的文件扩展名
    private String fileTypes = "zip,rar";
    //最大文件大小(bytes)
    private int maxSize = 100000000;

    private HttpContext context;

    public void ProcessRequest(HttpContext context)
    {
        this.context = context;

        HttpPostedFile accessoryFile = context.Request.Files["accessoryFile"];
        if (accessoryFile == null)
        {
            showError("请选择文件。");
        }

        String dirPath = context.Server.MapPath(savePath);
        if (!Directory.Exists(dirPath))
        {
            showError("上传目录不存在。");
        }

        String fileName = accessoryFile.FileName;
        String fileExt = Path.GetExtension(fileName).ToLower();
        ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(','));

        if (accessoryFile.InputStream == null || accessoryFile.InputStream.Length > maxSize)
        {
            showError("上传文件大小超过限制。");
        }

        if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
        {
            showError("上传文件扩展名是不允许的扩展名。");
        }

        String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
        String filePath = dirPath + newFileName;

        accessoryFile.SaveAs(filePath);

        String fileUrl = saveUrl + newFileName;

        Hashtable hash = new Hashtable();
        hash["error"] = 0;
        hash["url"] = fileUrl;
        context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
        context.Response.Write(JsonMapper.ToJson(hash));
        context.Response.End();
    }

    private void showError(string message)
    {
        Hashtable hash = new Hashtable();
        hash["error"] = 1;
        hash["message"] = message;
        context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
        context.Response.Write(JsonMapper.ToJson(hash));
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return true;
        }
    }
}以上.net代码，作为accessory_upload_json.ashx文件，置于编辑器目录之中。

(3) 插件核心KE.plugin['accessory'] = {
    click : function (id) {
        KE.util.selection(id);
        this.dialog = new KE.dialog({
            id : id,
            cmd : 'accessory',
            file : 'accessory.html',
            width : 310,
            height : 55,
            loadingMode : true,
            title : KE.lang['accessory'],
            yesButton : KE.lang['yes'],
            noButton: KE.lang['no']
        });
        this.dialog.show();
    },
    check: function (id) {
        var dialogDoc = KE.util.getIframeDoc(this.dialog.iframe);
        var url = KE.$('accessoryFile', dialogDoc).value;
        if (url.match(/\.(rar|zip)$/i) == null) {
            alert(KE.lang['invalidAccessory']);
            window.focus();
            KE.g[id].yesButton.focus();
            return false;
        }
        return true;
    },
    exec : function (id) {
        var self = this;
        var dialogDoc = KE.util.getIframeDoc(this.dialog.iframe);
        if (!this.check(id)) return false;
        KE.$('editorId', dialogDoc).value = id;
var uploadIframe = KE.$('uploadIframe', dialogDoc);
KE.util.showLoadingPage(id);

        var onloadFunc = function() {
            KE.event.remove(uploadIframe, 'load', onloadFunc);
            KE.util.hideLoadingPage(id);
            var uploadDoc = KE.util.getIframeDoc(uploadIframe);
            var data = '';
            try {
                data = KE.util.parseJson(uploadDoc.body.innerHTML);
            } catch(e) { alert(KE.lang.invalidJson); }
            if (typeof data === 'object' && 'error' in data) {
                if (data.error === 0) {
                    self.insert(id, data.url);
                } else {
                    alert(data.message);
                    return false;
                }
            }
        };

        KE.event.add(uploadIframe, 'load', onloadFunc);
        dialogDoc.uploadForm.submit();

        return;
    },
    insert : function (id, url) {
        KE.util.insertHtml(id, '<a href="' + url + '" >下载附件</a>');
        this.dialog.hide();
        KE.util.focus(id);
    }
};以上代码，作为插件的核心，置于脚本文件kindeditor.js中，可以看到，kindeditor的代码设计风格非常好。

(4) 插件的图标

插件于Kindeditor中，图标是通过Css Sprite实现的16*16，网上找了个简单的，压缩成16*16，通过PhotoShop将之附在编辑器目录的skins/default的default.gif的最后，再将下面的CSS Sprite代码，置于编辑器目录的skins目录的default.css中。.ke-icon-accessory
{
    background-position: 0px -960px;
    width: 16px;
    height: 16px;
}(5) 插件启用

kindeditor.js的KE.setting中，将’accessory’添加到items中，启用插件

插件的基本效果

(1) kindeditor的基本界面



开发完成的测试中，出现了一个比较有趣的问题，就是提交了附件，一直处于等待状态，没有任何提示，后来跟踪调试了下，原来是文件过大，抛出了“超过了最大请求长度”的异常。

于是，修改了Web.config下配置：
<system.web>
    <httpRuntime maxRequestLength="***" executionTimeout="***" />
</system.web>maxRequestLength指定了最大请求长度（KB），executionTimeout指定了超时时间（s）

小结：

以上代码仅实现了上传rar与zip格式，要上传其他格式，修改如下

1、修改accessory_upload_json.ashx文件

//定义允许上传的文件扩展名
private String fileTypes

2、修改kindeditor.js

KE.plugin['accessory']下边的

check: function (id) 函数里面的正
分享到：
| asp.net系统增加用户登录后修改密码的功能
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    asp.net富文本编辑 kindeditor

    KindEditor则是一款流行的JavaScript富文本编辑器，适用于多种Web开发环境，包括ASP.NET。这款编辑器提供了一种用户友好的界面，允许用户在网页上进行类似Word的文字编辑操作。 富文本编辑器如KindEditor的主要功能...

    富文本编辑框asp.net mvc功能源码kindeditor4

    【标题】"富文本编辑框asp.net mvc功能源码kindeditor4"指的是在ASP.NET MVC框架下，使用KindEditor4这一开源富文本编辑器实现的功能完善的代码示例。KindEditor是一款广泛应用于Web开发中的轻量级、高性能的富文本...

    富文本编辑器kindeditor-4.0.1

    富文本编辑器KindEditor-4.0.1是一款广泛应用在网页开发中的专业级富文本编辑组件。它以其功能强大、全面而闻名，为开发者提供了一种便捷的方式来创建和编辑具有格式化的文字内容，如HTML文档。这个编辑器适用于各种...

    kindeditor，asp.net富文本框编辑器

    KindEditor是一款功能强大的开源富文本框编辑器，尤其在ASP.NET开发环境中被广泛使用。它提供了丰富的文本格式化、图片上传、链接插入等编辑功能，极大地提升了用户在网页上编辑内容的体验。作为一款轻量级但功能...

    在ASP.NET中使用KindEditor，并在后台获取值

    总结，本示例主要讲解了如何在ASP.NET项目中集成KindEditor，创建富文本编辑器实例，以及在后台获取、清空和重新设置编辑器的值。通过理解这些步骤，你可以更方便地在你的应用程序中使用KindEditor，提供给用户一个...

    上传本地图片的asp.net文本编辑器

    在这个场景中，我们关注的是一个与ASP.NET相关的特定功能：一个能够上传本地图片的文本编辑器。文本编辑器在网页上允许用户创建和编辑富文本内容，如HTML文档，而添加图片上传功能则使得用户可以将本地图片嵌入到...

    [Asp.Net傻瓜式]KindEditor编辑器.rar

    可以直接把子目录"KindEditor"文件夹打包拷走自己使用。 也可以完全不修改直接使用。总之傻瓜，干净，通俗易懂，完爆全网其它教程，一波三折，好用请给高评价。 如果在母版页不显示，是因为textbox的ID控件被重写...

    kindeditor文本编辑器(asp.net中使用)

    kindeditor文本编辑器(asp.net中使用) 源代码都在

    asp.net KindEditor4.0.4 最新在线编辑器（C#）

    KindEditor是一款功能强大的开源在线文本编辑器，特别适用于Web应用程序中的富文本输入需求。它支持多种浏览器环境，包括IE、Firefox、Chrome、Safari和Opera等。在ASP.NET环境中，KindEditor可以为用户提供类似桌面...

    kindeditor编辑器在asp.net 中使用介绍

    kindeditor编辑器在asp.net 中使用介绍 编辑器功能强大，实现了文本格式，包含图片，视频以及flash以及动态地图的上传实现。上传部分自己总结的常用方法的封装，有不足和不完美之处，希望大家指出来，愿意一起

    asp.net+kindeditor

    ASP.NET与KindEditor的整合是Web开发中常见的一种应用场景，主要目的是为了在网站上提供一个功能丰富的文本编辑器，使得用户可以方便地编辑和格式化文本内容。在本项目中，"asp.net+kindeditor"已经预先配置好，可以...

    最新文本编辑器kindeditor-4.0.1forjsp,php,asp,asp.net

    KindEditor是一款功能强大的开源文本编辑器，适用于多种服务器平台，包括JSP、PHP、ASP以及ASP.NET。在本文中，我们将深入探讨KindEditor的主要特点、使用场景、安装过程及其核心功能。 1. **主要特点** - **多...

    asp.net版本kindeditor4.1.10

    KindEditor则是一款开源的富文本编辑器，常用于网页中的文本输入区域，提供类似Word的编辑体验，使得用户在网页上也能进行格式化的文字编辑。 标题“asp.net版本kindeditor4.1.10”指的是将KindEditor 4.1.10版本...

    Asp.net C# KindEditor 演示项目

    【Asp.net C# KindEditor 演示项目】是一个基于.NET Framework的Web应用程序，它展示了如何在ASP.NET环境中集成并使用KindEditor富文本编辑器。这个项目是为开发者准备的，他们希望在C#后端和ASP.NET前端提供一个...

    asp KindEditor后台文本编辑器 好用

    ASP KindEditor 后台文本编辑器是一款在ASP环境中使用的强大且易用的富文本编辑工具。它具有良好的浏览器兼容性，特别强调了对Internet Explorer的支持，同时也适应其他主流浏览器，如Firefox, Chrome, Safari和...

    kindeditor添加图片压缩功能(Asp.net版)

    KindEditor是一款开源的在线富文本编辑器，常用于网页内容编辑。在Asp.net环境中，为了让用户上传的图片在服务器端自动进行压缩，提高网站性能并节省存储空间，我们需要为KindEditor添加图片压缩功能。本项目是作者...

    kindeditor在线编辑器asp.net能用版本

    KindEditor是一款功能强大的开源在线文本编辑器，专为Web应用设计。它支持多种浏览器环境，如Internet Explorer、Firefox、Chrome、Safari等，提供丰富的编辑功能，包括文字格式化、图片上传、链接插入、表格操作等...

    kindeditor（asp,php,jsp,asp.net)在线编辑器源码

    KindEditor是一款功能强大的开源在线富文本编辑器，它支持多种服务器端语言，包括ASP、PHP、JSP和ASP.NET。这个编辑器以其易用性、跨浏览器兼容性和丰富的功能集而受到开发者的欢迎。在本篇文章中，我们将深入探讨...

Magicbox
Global site tag (gtag.js) - Google Analytics