KindEditor及CkEditor配置说明

最新推荐文章于 2025-04-18 16:33:51 发布

danile2009

最新推荐文章于 2025-04-18 16:33:51 发布

阅读量4.6k

点赞数

文章标签： textbox string fckeditor 文件管理器 upload 扩展

http://www.cnblogs.com/fishtreeyu/archive/2011/02/11/1951516.html

一、KindEditor

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与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

如：<asp:TextBox ID="txtContent" TextMode="MultiLine" runat="server"></asp:TextBox>

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

 
     01<script src="../kindeditor/kindeditor.js" type="text/javascript"></script> 
 
     02<script type="text/javascript"> 
 
     03    KE.show({ 
 
     04        id: txtContent, 
 
     05        imageUploadJson: '/handler/upload_json.ashx', 
 
     06        items : [ 
 
     07        'source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste', 
 
     08        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 
 
     09        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 
 
     10        'superscript', '|', 'selectall', '-', 
 
     11        'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 
 
     12        'italic', 'underline', 'strikethrough', 'removeformat', '|', 'image', 
 
     13        'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink'
 
     14         ] 
 
     15    }); 
 
     16</script>

其中，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中，稍作修改，代码如下：

 
     01using System; 
 
     02using System.Collections.Generic; 
 
     03using System.Linq; 
 
     04using System.Web; 
 
     05using System.Collections; 
 
     06using System.IO; 
 
     07using System.Globalization; 
 
     08using LitJson; // 需先手动添加LitJson.dll的引用，在asp.net/bin中 
 
     09  
 
     10namespace Yongbin.Shop.Web.handler 
 
     11{ 
 
     12    /// <summary> 
 
     13    /// upload_json 的摘要说明 
 
     14    /// </summary> 
 
     15    public class upload_json : IHttpHandler 
 
     16    {  
 
     17        //文件保存目录路径 
 
     18        private String savePath = "/upload/" + DateTime.Now.ToString("yyyyMMdd") + "/";  // 修改上传目录  
 
     19        //文件保存目录URL(显示在kindeditor编辑器中的地址) 
 
     20        private String saveUrl = "/upload/" + DateTime.Now.ToString("yyyyMMdd") + "/"; 
 
     21        //定义允许上传的文件扩展名 
 
     22        private String fileTypes = "gif,jpg,jpeg,png,bmp"; 
 
     23        //最大文件大小 
 
     24        private int maxSize = 1000000; 
 
     25  
 
     26        private HttpContext context; 
 
     27  
 
     28        public void ProcessRequest(HttpContext context) 
 
     29        { 
 
     30            this.context = context; 
 
     31  
 
     32            HttpPostedFile imgFile = context.Request.Files["imgFile"]; 
 
     33            if (imgFile == null) 
 
     34            { 
 
     35                showError("请选择文件。"); 
 
     36            } 
 
     37  
 
     38            String dirPath = context.Server.MapPath(savePath); 
 
     39            if (!Directory.Exists(dirPath)) 
 
     40            { 
 
     41                Directory.CreateDirectory(dirPath);  // 复制过来的代码改了这里，自动创建目录 
 
     42            } 
 
     43  
 
     44            String fileName = imgFile.FileName; 
 
     45            String fileExt = Path.GetExtension(fileName).ToLower(); 
 
     46            ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(',')); 
 
     47  
 
     48            if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize) 
 
     49            { 
 
     50                showError("上传文件大小超过限制。"); 
 
     51            } 
 
     52  
 
     53            if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1) 
 
     54            { 
 
     55                showError("上传文件扩展名是不允许的扩展名。"); 
 
     56            } 
 
     57  
 
     58            String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt; 
 
     59            String filePath = dirPath + newFileName; 
 
     60  
 
     61            imgFile.SaveAs(filePath); 
 
     62  
 
     63            String fileUrl = saveUrl + newFileName; 
 
     64  
 
     65            Hashtable hash = new Hashtable(); 
 
     66            hash["error"] = 0; 
 
     67            hash["url"] = fileUrl; 
 
     68            context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); 
 
     69            context.Response.Write(JsonMapper.ToJson(hash)); 
 
     70            context.Response.End(); 
 
     71        } 
 
     72  
 
     73        private void showError(string message) 
 
     74        { 
 
     75            Hashtable hash = new Hashtable(); 
 
     76            hash["error"] = 1; 
 
     77            hash["message"] = message; 
 
     78            context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); 
 
     79            context.Response.Write(JsonMapper.ToJson(hash)); 
 
     80            context.Response.End(); 
 
     81        } 
 
     82  
 
     83        public bool IsReusable 
 
     84        { 
 
     85            get
 
     86            { 
 
     87                return false; 
 
     88            } 
 
     89        } 
 
     90    }  
 
     91}

3、配置成功

二、CkEditor
看过一个非官方非正式的关于.net在线编辑器的使用调查，CkEditor是被使用做多的，属于重量级编辑器，功能很强大；

CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。

（CKEditor 不具备上传功能，需要集成文件管理器CKFinder 才能实现上传功能。）

我这里使用的版本是ckeditor_3.2及ckfinder_aspnet_1.4.3

未完待补充