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在线编辑器,代码如下:
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配置步骤的更多相关文章
- 富文本编辑器kindeditor配置
<!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...
- log4j.properties 详解与配置步骤
一.log4j.properties 的使用详解 1.输出级别的种类 ERROR.WARN.INFO.DEBUGERROR 为严重错误 主要是程序的错误WARN 为一般警告,比如session丢失IN ...
- log4j.properties 详解与配置步骤(转)
找的文章,供参考使用 转自 log4j.properties 详解与配置步骤 一.log4j.properties 的使用详解 1.输出级别的种类 ERROR.WARN.INFO.DEBUGERROR ...
- MySQL数据库集群进行正确配置步骤
MySQL数据库集群进行正确配置步骤 2010-06-09 10:47 arrowcat 博客园 字号:T | T 我们今天是要和大家一起分享的是对MySQL数据库集群进行正确配置,我前两天在相关网站 ...
- Apache安装配置步骤
注释:这里以Linux 红帽商业版为例~~~~~~~纯手打啊 Apache安装配置步骤 准备:关闭其他虚拟设备 #/etc/init.d/libvirtd stop #/etc/init.d/xend ...
- Windows Live Writer配置步骤
推荐文档: [超详细教程]使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结 Live Writer 使用小贴示:发博客时始终使用图片原始 ...
- Oracle 11g客户端在Linux系统上的配置步骤详解
Oracle 11g客户端在Linux系统上的配置步骤详解 2011-07-26 10:47 newhappy2008 CSDN博客 字号:T | T 本文我们主要介绍了Oracle 11g客户端在L ...
- jenkins 邮件配置步骤
一.进行系统管理中的邮件配置步骤: 1.设置Extended E-mail Notification 二.对构建的job 添加邮件发送的步骤: 3.成功截图:
- an'gularjs 环境搭建之NodeJS、NPM安装配置步骤(windows版本)
NodeJS.NPM安装配置步骤(windows版本) :http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/ ...
随机推荐
- JQuery Plugin 2 - Passing Options into Your Plugin
overriding the default options with user-supplied options and the jQuery extend() method eg: $.fn.pu ...
- HDU 5570 balls 期望 数学
balls Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5570 De ...
- 彩票APP将演绎“快鱼吃慢鱼”的发展轨迹
思科CEO钱伯斯有句名言,叫"快鱼吃慢鱼",他觉得"在Internet经济下,大公司不一定打败小公司,可是快的一定会打败慢的."对此观点,笔者表示部分认同,首先 ...
- [Canvas] Make Canvas Responsive to Pixel Ratio
Canvas is great for high performance graphics rendering but by default the results look blocky on ph ...
- 为CentOS 加入�本地源
首先把光盘中的Packages文件夹复制到本地. [arm@Jarvis Packages]$ pwd /home/Packages 安装用于创建安装包依赖关系的软件createrepo. [arm@ ...
- 统计0到n之间1的个数
问题描写叙述 给定一个十进制整数N,求出从1到N的全部整数中出现"1"的个数. 比如:N=2时 1,2出现了1个 "1" . N=12时 1,2,3,4,5,6 ...
- as 中的反射
flash.utils包中的getDefinitionByName,getQualifiedClassName,getQualifiedSuperclassName..可以当做反射用. 1.getDe ...
- IntellijIdea中常用的快捷键
快速查找类:Ctrl+N 提示:Ctrl+Space 提示:Ctrl+Shift+Space 查看documentation:Ctrl+Q 查找类.方法.变量的引用:Alt+F7 定位类.方法.变量的 ...
- Linux添加快捷启动方式 (Ubuntu Debian CentOS)
ubuntu桌面快捷方式的创建 debian添加快捷启动方式 centos 6 桌面建立应用程序的快捷方式的方法 今天用着用着ubuntu,突然抽搐了,感觉特别别扭,特别不方便.新装的应用程序不好 ...
- IIS 发布 之 Word导出本地测试正常,发布报错
用C#动态生成Word文档功能实现了,在本地的机器运行时是好的,但程序发布 IIS 或 远程服务器 上就报错, 报错信息为:检索 COM 类工厂中 CLSID 为 {000209FF-0000-000 ...