当前位置:编程问答 > C#/ASP.NET >

asp.net KindEditor及CkEditor配置说明

今天我们讲到的是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

    如:<asp:textbox id="txtcontent" textmode="multiline"  runat="server"></asp:textbox>

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

<script src="../kindeditor/kindeditor.js" type="text/javascript"></script>
<script type="text/javascript">
    ke.show({
        id: txtcontent,
        imageuploadjson: '/handler/upload_json.ashx',
        items : [
     'source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste',
     'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
     'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
     'superscript', '|', 'selectall', '-',
     'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
     'italic', 'underline', 'strikethrough', 'removeformat', '|', 'image',
     'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink'
         ]
    });
</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教程中,稍作修改,代码如下:

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
{
    /// <summary>
    /// upload_json 的摘要说明
    /// </summary>
    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;
            }
        }
    }
}

、配置成功


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

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

(ckeditor 不具备上传功能,需要集成 文件管理器ckfinder 才能实现上传功能。)

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

不管那种web开发,经常都会应用到编辑器了,上面讲的是两种常用的编辑器了,其它文章写的是根据手册来的,你只要根据参考手册就可以快速的使用各种网页编辑器了。

补充:asp.net教程,.Net开发 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,