ASP.NET配置KindEditor文本编辑器

文本编辑器:CKEditor和CKFinder KindEditor

1.KindEditor

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

2.官网: http://kindeditor.net/down.php 下载

解压文件的文件结构:

asp：与asp结合的示例代码

asp.net：与asp.net结合的示例代码

attached：上传文件的根目录，可在相关的代码中修改

examples：功能演示的示例代码

jsp：与jsp结合的示例代码

lang：语言包

php：与php结合的示例代码

plugins：控件的功能代码的实现

kindeditor.js：配置文件

kindeditor-min.js：集成文件

由于使用的是ASP.NET，所以将不需要的文件夹删掉。其中在asp.net中demo.aspx是参考代码，也可以删掉。

3.配置KindEditor

(1)新建网站，将精简后的kindeditor文件夹放到网站根目录下下，并且引用kindeditor/asp.net/bin/LitJSON.dll文件。

(2)新建index.aspx文件，引入相关文件

注意路径的设置:引用文件的路径,上传管理和文件管理的路径

<link href="../kindeditor-4.1.10/plugins/code/prettify.css" rel="stylesheet" type="text/css" />

    <script src="../kindeditor-4.1.10/lang/zh_CN.js" type="text/javascript"></script>

    <script src="../kindeditor-4.1.10/kindeditor.js" type="text/javascript"></script>

    <script src="../kindeditor-4.1.10/plugins/code/prettify.js" type="text/javascript"></script>

    <script type="text/javascript">

        KindEditor.ready(function (K) {

            var editor = K.create('#content_1', {

                //上传管理

                uploadJson: '../kindeditor-4.1.10/asp.net/upload_json.ashx',

                //文件管理

                fileManagerJson: '../kindeditor-4.1.10/asp.net/file_manager_json.ashx',

                allowFileManager: true,

                //编辑器高度

                width: '624px',

                //编辑器宽度

                height: '450px',

                //配置编辑器的工具栏

                items: [

                'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',

                'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

                'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

                'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',

                'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',

                'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',

                'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',

                'anchor', 'link', 'unlink', '|', 'about'

                ]

            });

            prettyPrint();

        });

    </script>

(3)在页面中添加一个textbox控件，将id命名为content，把属性"TextMode"属性改为Multiline

<body>

    <form id="form1" runat="server">

    <div id="main">

        <asp:TextBox id="content" name="content" TextMode="MultiLine" runat="server"></asp:TextBox>

    </div>

    </form>

</body>

(4) 按照以后步骤,就可以在浏览器中看到编辑器的模样了

4.附件上传原理

在asp.net文件夹下有两个重要的file_manager_json.ashx，upload_json.ashx，一个负责文件管理，一个负责上传管理。你可以根据自己需求进行相关修改。

原理：通过实现接口IHttpHandler来接管HTTP请求。

注意路径的设置:

file_manager_json.ashx----根目录路径，相对路径,根目录URL，可以指定绝对路径,图片扩展名

upload_json.ashx----文件保存目录路径,文件保存目录URL,定义允许上传的文件扩展名

file_manager_json.ashx

<%@ webhandler Language="C#" class="FileManager" %>

/**

 * KindEditor ASP.NET

 *

 * 本ASP.NET程序是演示程序，建议不要直接在实际项目中使用。

 * 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。

 *

 */

using System;

using System.Collections;

using System.Web;

using System.IO;

using System.Text.RegularExpressions;

using LitJson;

using System.Collections.Generic;

public class FileManager : IHttpHandler

{

    public void ProcessRequest(HttpContext context)

    {

        String aspxUrl = context.Request.Path.Substring(, context.Request.Path.LastIndexOf("/") + );

        //根目录路径，相对路径

        String rootPath = "Admin/upload/";

        //根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/

        String rootUrl = aspxUrl + "Admin/upload/";

        //图片扩展名

        String fileTypes = "gif,jpg,jpeg,png,bmp";

        String currentPath = "";

        String currentUrl = "";

        String currentDirPath = "";

        String moveupDirPath = "";

        String dirPath = context.Server.MapPath(rootPath);

        String dirName = context.Request.QueryString["dir"];

        if (!String.IsNullOrEmpty(dirName)) {

            if (Array.IndexOf("image,flash,media,file".Split(','), dirName) == -) {

                context.Response.Write("Invalid Directory name.");

                context.Response.End();

            }

            dirPath += dirName + "/";

            rootUrl += dirName + "/";

            if (!Directory.Exists(dirPath)) {

                Directory.CreateDirectory(dirPath);

            }

        }

        //根据path参数，设置各路径和URL

        String path = context.Request.QueryString["path"];

        path = String.IsNullOrEmpty(path) ? "" : path;

        if (path == "")

        {

            currentPath = dirPath;

            currentUrl = rootUrl;

            currentDirPath = "";

            moveupDirPath = "";

        }

        else

        {

            currentPath = dirPath + path;

            currentUrl = rootUrl + path;

            currentDirPath = path;

            moveupDirPath = Regex.Replace(currentDirPath, @"(.*?)[^\/]+\/$", "$1");

        }

        //排序形式，name or size or type

        String order = context.Request.QueryString["order"];

        order = String.IsNullOrEmpty(order) ? "" : order.ToLower();

        //不允许使用..移动到上一级目录

        if (Regex.IsMatch(path, @"\.\."))

        {

            context.Response.Write("Access is not allowed.");

            context.Response.End();

        }

        //最后一个字符不是/

        if (path != "" && !path.EndsWith("/"))

        {

            context.Response.Write("Parameter is not valid.");

            context.Response.End();

        }

        //目录不存在或不是目录

        if (!Directory.Exists(currentPath))

        {

            context.Response.Write("Directory does not exist.");

            context.Response.End();

        }

        //遍历目录取得文件信息

        string[] dirList = Directory.GetDirectories(currentPath);

        string[] fileList = Directory.GetFiles(currentPath);

        switch (order)

        {

            case "size":

                Array.Sort(dirList, new NameSorter());

                Array.Sort(fileList, new SizeSorter());

                break;

            case "type":

                Array.Sort(dirList, new NameSorter());

                Array.Sort(fileList, new TypeSorter());

                break;

            case "name":

            default:

                Array.Sort(dirList, new NameSorter());

                Array.Sort(fileList, new NameSorter());

                break;

        }

        Hashtable result = new Hashtable();

        result["moveup_dir_path"] = moveupDirPath;

        result["current_dir_path"] = currentDirPath;

        result["current_url"] = currentUrl;

        result["total_count"] = dirList.Length + fileList.Length;

        List<Hashtable> dirFileList = new List<Hashtable>();

        result["file_list"] = dirFileList;

        for (int i = ; i < dirList.Length; i++)

        {

            DirectoryInfo dir = new DirectoryInfo(dirList[i]);

            Hashtable hash = new Hashtable();

            hash["is_dir"] = true;

            hash["has_file"] = (dir.GetFileSystemInfos().Length > );

            hash["filesize"] = ;

            hash["is_photo"] = false;

            hash["filetype"] = "";

            hash["filename"] = dir.Name;

            hash["datetime"] = dir.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");

            dirFileList.Add(hash);

        }

        for (int i = ; i < fileList.Length; i++)

        {

            FileInfo file = new FileInfo(fileList[i]);

            Hashtable hash = new Hashtable();

            hash["is_dir"] = false;

            hash["has_file"] = false;

            hash["filesize"] = file.Length;

            hash["is_photo"] = (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring().ToLower()) >= );

            hash["filetype"] = file.Extension.Substring();

            hash["filename"] = file.Name;

            hash["datetime"] = file.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");

            dirFileList.Add(hash);

        }

        context.Response.AddHeader("Content-Type", "application/json; charset=UTF-8");

        context.Response.Write(JsonMapper.ToJson(result));

        context.Response.End();

    }

    public class NameSorter : IComparer

    {

        public int Compare(object x, object y)

        {

            if (x == null && y == null)

            {

                return ;

            }

            if (x == null)

            {

                return -;

            }

            if (y == null)

            {

                return ;

            }

            FileInfo xInfo = new FileInfo(x.ToString());

            FileInfo yInfo = new FileInfo(y.ToString());

            return xInfo.FullName.CompareTo(yInfo.FullName);

        }

    }

    public class SizeSorter : IComparer

    {

        public int Compare(object x, object y)

        {

            if (x == null && y == null)

            {

                return ;

            }

            if (x == null)

            {

                return -;

            }

            if (y == null)

            {

                return ;

            }

            FileInfo xInfo = new FileInfo(x.ToString());

            FileInfo yInfo = new FileInfo(y.ToString());

            return xInfo.Length.CompareTo(yInfo.Length);

        }

    }

    public class TypeSorter : IComparer

    {

        public int Compare(object x, object y)

        {

            if (x == null && y == null)

            {

                return ;

            }

            if (x == null)

            {

                return -;

            }

            if (y == null)

            {

                return ;

            }

            FileInfo xInfo = new FileInfo(x.ToString());

            FileInfo yInfo = new FileInfo(y.ToString());

            return xInfo.Extension.CompareTo(yInfo.Extension);

        }

    }

    public bool IsReusable

    {

        get

        {

            return true;

        }

    }

}

upload_json.ashx

<%@ webhandler Language="C#" class="Upload" %>

/**

 * KindEditor ASP.NET

 *

 * 本ASP.NET程序是演示程序，建议不要直接在实际项目中使用。

 * 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。

 *

 */

using System;

using System.Collections;

using System.Web;

using System.IO;

using System.Globalization;

using LitJson;

public class Upload : IHttpHandler

{

    private HttpContext context;

    public void ProcessRequest(HttpContext context)

    {

        String aspxUrl = context.Request.Path.Substring(, context.Request.Path.LastIndexOf("/") + );

        //文件保存目录路径

        String savePath = "Admin/upload/";

        //文件保存目录URL

        String saveUrl = aspxUrl + "Admin/upload/";

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

        Hashtable extTable = new Hashtable();

        extTable.Add("image", "gif,jpg,jpeg,png,bmp");

        extTable.Add("flash", "swf,flv");

        extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");

        extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");

        //最大文件大小

        int maxSize = ;

        this.context = context;

        HttpPostedFile imgFile = context.Request.Files["imgFile"];

        if (imgFile == null)

        {

            showError("请选择文件。");

        }

        String dirPath = context.Server.MapPath(savePath);

        if (!Directory.Exists(dirPath))

        {

            showError("上传目录不存在。");

        }

        String dirName = context.Request.QueryString["dir"];

        if (String.IsNullOrEmpty(dirName)) {

            dirName = "image";

        }

        if (!extTable.ContainsKey(dirName)) {

            showError("目录名不正确。");

        }

        String fileName = imgFile.FileName;

        String fileExt = Path.GetExtension(fileName).ToLower();

        if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)

        {

            showError("上传文件大小超过限制。");

        }

        if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring().ToLower()) == -)

        {

            showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。");

        }

        //创建文件夹

        dirPath += dirName + "/";

        saveUrl += dirName + "/";

        if (!Directory.Exists(dirPath)) {

            Directory.CreateDirectory(dirPath);

        }

        String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);

        dirPath += ymd + "/";

        saveUrl += ymd + "/";

        if (!Directory.Exists(dirPath)) {

            Directory.CreateDirectory(dirPath);

        }

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

        String filePath = dirPath + newFileName;

        imgFile.SaveAs(filePath);

        String fileUrl = saveUrl + newFileName;

        Hashtable hash = new Hashtable();

        hash["error"] = ;

        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"] = ;

        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;

        }

    }

}

5.优化改进

使用KindEditor文本编辑器时，发现不能在图片空间中修改已上传图片的信息，删除图片等，也不能进行目录操作，我觉得这是比CKEditor和CKFinder结合的文本编辑器弱势的地方。

有两个方法可以解决：

一是：独立写一个图片管理的模块，进行可视化操作

二是：修改plugins/filemanager/filemanager.js，并结合handler进行操作。（这个方法扩展性比较好）

摘抄自:http://www.cnblogs.com/ForEvErNoME/archive/2012/06/15/2551424.html

ASP.NET配置KindEditor文本编辑器的更多相关文章

ASP.NET 配置KindEditor文本编辑器
ASP.NET 配置KindEditor文本编辑器跟着这篇博客做了两个小时,只搞出了下面这么个东西. 时间浪费在了原博客里这样的一句话:将kindeditor/asp.net/bin/LitJSON ...
ASP.NET配置KindEditor文本编辑器-图文实例
1.什么是KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(tex ...
Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
asp.net mvc4 使用KindEditor文本编辑器
最近做项目要用文本编辑器,编辑器好多种,这里介绍KindEditor在asp.net mvc4中的使用方法. 一.准备工作: 1.下载KindEditor.去官网:http://www.kindsof ...
mvc4使用KindEditor文本编辑器
最近做项目要用文本编辑器,编辑器好多种,这里介绍KindEditor在asp.net mvc4中的使用方法. 一.准备工作: 1.下载KindEditor.去官网:http://www.kindsof ...
laravel-admin 配置富文本编辑器流程
laravel-admin默认去除富文本编辑器的,官方也给出了配置方法. 我配置的是wangEditor,本来配置完后就能愉快得使用了,可万万没想到还是有坑的.默认是用base64上传的,也就是数据库 ...
使用kindeditor文本编辑器
aspx中代码: <%@ Page Language="C#" ValidateRequest="false" AutoEventWireup=" ...
Django-xadmin后台配置富文本编辑器（方法一）
1.https://github.com/twz915/DjangoUeditor3下载包,进入包文件夹,找到DjangoUeditor包拷贝到项目下,和xadmin同级目录 2.找到项目的setti ...
KindEditor 文本编辑器
官网:http://kindeditor.net/docs/usage.html 目前支持ASP.ASP.NET.PHP.JSP.

随机推荐

Java 注解指导手册（上）
编者的话:注解是java的一个主要特性且每个java开发者都应该知道如何使用它. 我们已经在Java Code Geeks提供了丰富的教程, 如Creating Your Own Java A ...
LeetCode 109. 有序链表转换二叉搜索树（Convert Sorted List to Binary Search Tree）
题目描述给定一个单链表,其中的元素按升序排序,将其转换为高度平衡的二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点的左右两个子树的高度差的绝对值不超过 1. 示例: 给定的有序链表: ...
js向input的value赋值
js与jquery:在我印象里面都是一样的,今天利用空闲的时间来总结一下,js与jquery究竟有什么区别? js : 是一门网页的脚本语言 jquery :jquery是基于js的一种框架,也就是说 ...
uboot下如何读写rtc pcf2127的寄存器?
一. pcf2127简介 pcf2127是实时时钟计数器模块,支持两种接口,i2c和spi,笔者以i2c为例二. pcf2127的读写操作时序 2.1 写操作根据i2c的规范https://www ...
javascript定时器方法使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
numpy之填充为nan的数据为该列平均值
# coding=utf-8 import numpy as np ''' 填充nan的数据,为该列的平均值 ''' def fill_ndarray(t1): for i in range(t1.s ...
Proxmox
vmware: vmware 12 pro proxmox 下载地址往下会比较麻烦一点,这里就不做展示了(仅供参考)
jinja2渲染使用
说明:通过jinja2渲染后只能打印出来效果,目前无法保存例1:渲染 .j2 文件 1.安装jinja2模块 pip3 install jinja2 2.定义模板说明:变量必须是小写,大写有的情况 ...
WPF子线程更新UI（Dispatcher.BeginInvoke）
在做WPF开发时,如果直接在子线程里更新UI会报错—–“调用线程无法访问此对象,因为另一个线程拥有该对象.”,这是因为WPF禁止在非UI线程里直接更新UI界面. 解决方案: 在子线程里调用D ...
WebApiTestClient
1.WebApiTestClient组件作用主要有以下几个: (1).将WebApi的接口放到了浏览器里面,以可视化的方式展现出来,比如我们通过http://localhost:8080/Help这个 ...

ASP.NET配置KindEditor文本编辑器

ASP.NET配置KindEditor文本编辑器的更多相关文章

随机推荐

热门专题