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


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


所用软件VS2012旗舰版

KindEditor下载地址(本文实例中所用版本4.1.10):

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

官网(版本可能会更新):

http://kindeditor.net/

实现后效果:

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

二、详细步骤:

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 >
<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”>
   

来源:蘑菇猎手

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2015年1月20日
下一篇 2015年1月20日

相关推荐