asp.net KindEditor及CkEditor配置说明

作者：袖梨 2022-06-25

今天我们讲到的是ckeditor_3.2及ckfinder_asp教程net_1.4.3编辑器了，这也是现在比较流行网页在线编辑器，下面开始看吧。

一、kindeditor

kindeditor是一套开源的html可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容ie、firefox、chrome、safari、opera等主流浏览器。 kindeditor使用网页特效编写，可以无缝的与java、.net、php教程、asp等程序接合。
kindeditor非常适合在cms、商城、论坛、博客、wiki、电子邮件等互联网应用上使用，2006年7月首次发布2.0以来，kindeditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的编辑器之一。

目前最新版本 kindeditor 3.5.2，官网及下载地址

kindeditor配置步骤：

1、在项目中建立kindeditor文件夹，把下载下来后的文件解压，将其中的skins，plugins，kindeditor.js 拷到该kindeditor文件夹目录下；

2、在.aspx文件中放入textbox控件，并设置控件id

如：

3、在.aspx文件中引入kindeditor.js文件及js代码，可将textbox控件设置成kindeditor在线编辑器，代码如下：

其中，id为textbox控件的id，imageuploadjson: '/handler/upload_json.ashx'可设置图片上传(文件上传设置同理)，item为设置编辑器工具栏上的每一个功能是否显示，可根据需要手动增删对应单词，如不需要“html代码”功能则删除“'source',”；

4、在.aspx页面的第一句话及page指令中加上validaterequest=”false”，禁止.net自动屏蔽上传html代码；

　　如：<%@ page language="c#" validaterequest="false"...

5、设置完毕，后台可直接通过textbox的text属性来获取编辑器内容；

另：设置kindeditor的图片上传功能
1、在刚才在.aspx页面中添加的js代码中添加imageuploadjson参数，

　　如：imageuploadjson: '/handler/upload_json.ashx'
2、建立一般处理程序页面upload_json.ashx，该页面用于编写文件上传代码，在下载下来的源码有，在asp.net教程中，稍作修改，代码如下：

using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.collections;
using system.io;
using system.globalization;
using litjson; // 需先手动添加litjson.dll的引用，在asp.netbin中

namespace yongbin.shop.web.handler
{
    ///

    /// upload_json 的摘要说明
    ///

    public class upload_json : ihttphandler
    {
        //文件保存目录路径
        private string savepath = "/upload/" + datetime.now.tostring("yyyymmdd") + "/"; // 修改上传目录
        //文件保存目录url(显示在kindeditor编辑器中的地址)
        private string saveurl = "/upload/" + datetime.now.tostring("yyyymmdd") + "/";
        //定义允许上传的文件扩展名
        private string filetypes = "gif,jpg,jpeg,png,bmp";
        //最大文件大小
        private int maxsize = 1000000;

        private httpcontext context;

        public void processrequest(httpcontext context)
        {
            this.context = context;

            httppostedfile imgfile = context.request.files["imgfile"];
            if (imgfile == null)
            {
                showerror("请选择文件。");
            }

            string dirpath = context.server.mappath(savepath);
            if (!directory.exists(dirpath))
            {
                directory.createdirectory(dirpath); // 复制过来的代码改了这里，自动创建目录
            }

            string filename = imgfile.filename;
            string fileext = path.getextension(filename).tolower();
            arraylist filetypelist = arraylist.adapter(filetypes.split(','));

            if (imgfile.inputstream == null || imgfile.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;

            imgfile.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 false;
            }
        }
    }
}