ASP.NET网站使用Kindeditor富文本编辑器步骤

1. 下载编辑器

下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php

2. 部署编辑器

解压 kindeditor-x.x.x.zip 文件,将editor文件夹复制到web目录下



3、在网页中加入(ValidateRequest="false")

<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeBehind="XXX.cs" Inherits="XXX" %>

4、引入脚本文件(XXX部分需要修改)

<!--富文本编辑器配置↓ -->	
                <link type="text/css" rel="stylesheet" href="../editor/themes/default/default.css" />
	            <link rel="stylesheet" href="../editor/plugins/code/prettify.css" />
                <script type="text/javascript" charset="utf-8" src="../editor/kindeditor-min.js"></script>
	            <script type="text/javascript" charset="utf-8" src="../editor/lang/zh_CN.js"></script>
	            <script type="text/javascript" charset="utf-8" src="../editor/plugins/code/prettify.js"></script>
	            <script type="text/javascript">
	                KindEditor.ready(function (K) {
	                    var editor1 = K.create('#XXX', {
	                        items: [
                                    'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						            'removeformat', 'strikethrough', 'lineheight', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						            'insertunorderedlist', '|', 'emoticons', 'link', 'insertfile', 'media', '|', 'image', 'multiimage', 'map', 'baidumap', '|', 'preview', 'fullscreen',
                            ],
	                        cssPath: '../editor/plugins/code/prettify.css',
	                        uploadJson: '../editor/asp.net/upload_json.ashx',
	                        fileManagerJson: '../editor/asp.net/file_manager_json.ashx',
	                        allowFileManager: true,
	                        pasteType: 1,
	                        afterCreate: function () {
	                            var self = this;
	                            K.ctrl(document, 13, function () {
	                                self.sync();
	                                K('form[name=XXX]')[0].submit();
	                            });
	                            K.ctrl(self.edit.doc, 13, function () {
	                                self.sync();
	                                K('form[name=XXX]')[0].submit();
	                            });
	                        }
	                    });
	                    prettyPrint();
	                });
	            </script>
				<!--富文本编辑器配置↑-->

5、使用编辑器(XXX部分需要修改)

<!--富文本编辑器-->
<textarea id="XXX" name="XXX" runat="server" cols="100" rows="8" style="width:1000px;height:500px;visibility:hidden;"></textarea>

6、根据自己的需要修改配置(文件路径:web\editor\asp.net\file_manager_json.ashx)

//根目录路径,相对路径
String rootPath = "../../";
//根目录URL,可以指定绝对路径
String rootUrl = aspxUrl + "../attached/";
//图片扩展名
String fileTypes = "gif,jpg,jpeg,png,bmp";

7、后台获取编辑器内容(XXX部分需要修改)

Request.Form["XXX"]

由于服务器端程序(ASP、PHP、ASP.NET等)直接显示内容,则必须转换HTML特殊字符(>,<,&,”),所以写了个工具类


往数据库插入时,进行替换特殊字符(XXX部分需要修改)

HtmlUtil.escapeHtml(Request.Form["XXX"])

从数据库读取数据时,进行还原特殊字符(XXX部分需要修改)

HtmlUtil.unescapeHtml(XXX)



  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值