您的位置：首页 > 编程语言 > ASP

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

2015-02-23 14:10 1221 查看

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

所用软件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肯定会带来一些安全问题。目前不会更好的解决办法，如果谁有，欢迎分享~

好了，至此大功告成！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航