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在线编辑器,代码如下:

view sourceprint?

<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中,稍作修改,代码如下:

view sourceprint?

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.net/bin中

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;

}

}

}

}

3、配置成功

KindEditor配置步骤的更多相关文章

  1. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  2. log4j.properties 详解与配置步骤

    一.log4j.properties 的使用详解 1.输出级别的种类 ERROR.WARN.INFO.DEBUGERROR 为严重错误 主要是程序的错误WARN 为一般警告,比如session丢失IN ...

  3. log4j.properties 详解与配置步骤(转)

    找的文章,供参考使用 转自 log4j.properties 详解与配置步骤 一.log4j.properties 的使用详解 1.输出级别的种类 ERROR.WARN.INFO.DEBUGERROR ...

  4. MySQL数据库集群进行正确配置步骤

    MySQL数据库集群进行正确配置步骤 2010-06-09 10:47 arrowcat 博客园 字号:T | T 我们今天是要和大家一起分享的是对MySQL数据库集群进行正确配置,我前两天在相关网站 ...

  5. Apache安装配置步骤

    注释:这里以Linux 红帽商业版为例~~~~~~~纯手打啊 Apache安装配置步骤 准备:关闭其他虚拟设备 #/etc/init.d/libvirtd stop #/etc/init.d/xend ...

  6. Windows Live Writer配置步骤

    推荐文档: [超详细教程]使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结 Live Writer 使用小贴示:发博客时始终使用图片原始 ...

  7. Oracle 11g客户端在Linux系统上的配置步骤详解

    Oracle 11g客户端在Linux系统上的配置步骤详解 2011-07-26 10:47 newhappy2008 CSDN博客 字号:T | T 本文我们主要介绍了Oracle 11g客户端在L ...

  8. jenkins 邮件配置步骤

    一.进行系统管理中的邮件配置步骤: 1.设置Extended E-mail Notification 二.对构建的job 添加邮件发送的步骤: 3.成功截图:

  9. an'gularjs 环境搭建之NodeJS、NPM安装配置步骤(windows版本)

    NodeJS.NPM安装配置步骤(windows版本)  :http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/ ...

随机推荐

  1. crm操作货币实体

    using System;     using Microsoft.Xrm.Sdk;     using Microsoft.Crm.Sdk.Messages; /// <summary> ...

  2. 解决Android上的QPython不能import urllib的问题

    试用了一下QPython,感觉很强大,Kivy也包含进去了,下载一些第三方库也很方便,相对于SL4A来说确实先进了很多. 但是很快发现不能import urllib,提示大概是这样的内容: No mo ...

  3. C++ 对象没有显式初始化

    C++ 对象没有显式初始化,结果是什么? 首先考虑非静态对象 1.方法内的局部对象: a.类类型:调用default构造方法 b.基本类型:值不确定 2.类中的数据成员: a.类类型:调用defaul ...

  4. PP常用T-CODE

    与BOM相关 CS00 BOM 菜单 BOM Menu CS01 生成物料 BOM Create Material BOM CS02 更改物料 BOM Change Material CS03 显示物 ...

  5. php使用openssl进行Rsa长数据加密,解密保存问题

    原来代码: public function encrypt($data) { if (openssl_public_encrypt(base64_encode($data), $encrypted, ...

  6. juggle

    /** @inheritDoc */ public function advanceTime(time:Number):void { if (time == 0 || (mCurrentTime == ...

  7. mybatis0212 mybatis逆向工程 (MyBatis Generator)

    1mybatis逆向工程 (MyBatis Generator) .1什么是mybatis的逆向工程 mybatis官方为了提高开发效率,提高自动对单表生成sql,包括生成 :mapper.xml.m ...

  8. solaris知识库

    http://xjsunjie.blog.51cto.com/999372/d-9/p-1

  9. apue.h

    [root@localhost unix_env_advance_prog]# cat apue.h #ifndef _APUE_H #define _APUE_H #define _XOPEN_SO ...

  10. 分布式文件系统之GPFS

    GPFS是IBM公司通过完善和发展其Tiger Shark文件系统发展而来.GPFS通过共享磁盘结构来实现其强大的扩展性.一个GPFS系统由许多集群节点组成,GPFS文件系统和应用程序在上面运行.这些 ...