ASP.NET一款免费富文本（RichText）编辑器KindEditor，实现在线排版编辑文章。这里简单介绍下如何使用

最新推荐文章于 2024-08-03 11:41:10 发布

蘑菇猎手

最新推荐文章于 2024-08-03 11:41:10 发布

阅读量6.7k

点赞数

文章标签： asp.net vs2012 富文本编辑器 KindEditor RichText

本文链接：https://blog.csdn.net/DongGeGe214/article/details/43916309

版权

一般用到富文本编辑器的地方：留言板，论坛的发帖页以及回复页等。

所用软件VS2012旗舰版

KindEditor下载地址（本文实例中所用版本4.1.10）：

http://download.csdn.net/detail/donggege214/8454299

官网（版本可能会更新）:

http://kindeditor.net/

实现后效果：

下面介绍如何具体实现。

一、目录结构图：

二、详细步骤：

1、将下载好的KindEditor解压到你的网站根目录（例子中的根目录是KindEditor），对着目录结构中那个“地球网KindEditor”，右键，添加引用->浏览->找到刚才解压文件夹里的asp.net目录下bin目录下的LitJSON.dll->确定。

2、添加web窗体->Default.aspx（网页名字随便，这里用的是默认的命名）->确定。

（1）前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="/kindeditor-4.1.10/themes/default/default.css" />
<link rel="stylesheet" href="/kindeditor-4.1.10/plugins/code/prettify.css" />
<script charset="utf-8" src="/kindeditor-4.1.10/kindeditor.js"></script>
<script charset="utf-8" src="/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script charset="utf-8" src="/kindeditor-4.1.10/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function (K) {
var editor1 = K.create('#content1', {
cssPath: '/kindeditor-4.1.10/plugins/code/prettify.css',
uploadJson: '/kindeditor-4.1.10/asp.net/upload_json.ashx',
fileManagerJson: '/kindeditor-4.1.10/asp.net/file_manager_json.ashx',
allowFileManager: true,
afterCreate: function () {
var self = this;
K.ctrl(document, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
K.ctrl(self.edit.doc, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
}
});
prettyPrint();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>



<table style="width:500px">
<tr>
<td>留言板</td>
</tr>
<tr>
<td><textarea id="content1" cols="100" rows="8" style="width:100%;height:200px;visibility:hidden;" runat="server"></textarea></td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
</tr>
</table>
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
</form>
</body>
</html>

蓝色高亮显示部分是路径，如果路径设置不正确，那么调试时textarea是不会显示成富文本编辑框的。这里简单说一下，“/”代表站点的根目录，“../”代表上层目录。

（2）后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Label1.Text = Request.Form["content1"];
}
}

（3）Web.config：

<?xml version="1.0"?>

<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0"/>
<pages validateRequest="false" />
<httpRuntime requestValidationMode="2.0" />
</system.web>
</configuration>

如果这里不配置Web.config，当文字有样式时，会提示有危险值...的报错。当然，这里将validateRequest设为false肯定会带来一些安全问题。目前不会更好的解决办法，如果谁有，欢迎分享~

好了，至此大功告成！