您的位置：首页 > 编程技术 > ASP.NET  >  ASP.NET网站使用Kindeditor富文本编辑器配置步骤

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

 更新时间：2021年9月22日 10:15  点击：1836
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特殊字符(>,<,&,”)，所以写了个工具类
复制代码 代码如下:

public class HtmlUtil
{
/// <summary>
/// 替换HTML特殊字符
/// </summary>
/// <param name="content"></param>
/// <returns></returns>
public static String escapeHtml(String content)
{
return content.Replace("&", "&")
.Replace("<", "<")
.Replace(">", ">")
.Replace("\"", """);
}
/// <summary>
/// 还原HTML特殊字符
/// </summary>
/// <param name="content"></param>
/// <returns></returns>
public static String unescapeHtml(String content)
{
return content.Replace("&", "&")
.Replace("<", "<")
.Replace(">", ">")
.Replace(""", "\"");
}
}

往数据库插入时，进行替换特殊字符（XXX部分需要修改）
复制代码 代码如下:

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

从数据库读取数据时，进行还原特殊字符（XXX部分需要修改）
复制代码 代码如下:

HtmlUtil.unescapeHtml(XXX)
[!--infotagslink--]

相关文章

  • php KindEditor文章内分页的实例方法

    我们这里介绍php与KindEditor编辑器使用时如何利用KindEditor编辑器的分页功能实现文章内容分页，KindEditor编辑器在我们点击分页时会插入代码，我们只要以它为分切符，就...2016-11-25

  • 超漂亮的Bootstrap 富文本编辑器summernote

    Summernote 是一个简单，灵活，所见即所得（WYSIWYG）的编辑器，基于 jQuery 和 Bootstrap 构建。对bootstrap 文本编辑器相关知识感兴趣的朋友一起学习吧...2016-04-06

  • 帝国CMS会员注册字段增加编辑器、发送短消息改为编辑框

    通过本教程可以实现帝国CMS后台给前台注册用户发消息，把内容输入框改为编辑器，可上传图片，等打开文件\e\admin\member\SendMsg.php 大约84行<textarea name="msgtext" cols="6...2016-01-27

  • ASP.NET百度Ueditor编辑器实现上传图片添加水印效果

    这篇文章主要给大家介绍了ASP.NET百度Ueditor编辑器1.4.3这个版本实现上传图片添加水印效果的相关资料，文中通过图文及示例代码介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。...2021-09-22

  • C# RichTextBox制作文本编辑器

    这篇文章主要为大家详细介绍了C# RichTextBox制作文本编辑器的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • KindEditor编辑器调用方法

    KindEditor编辑器调用方法,这个编辑器可使用到任何语言中,他是一个纯js的编辑器,但它默认的编辑是utf-8如果是gb2312编辑的朋友就是KindEditor.js打开,重保存为gb2312...2016-11-25

  • C#实现简单文本编辑器

    这篇文章主要为大家详细介绍了C#实现简单文本编辑器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • 同一页面放多个百度编辑器 Ueditor 并用PHP获取 Ueditor 的值的实例

    UEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果，本文我们解决在同一个页面上如何放多个 UEditor ，然后再用 PHP 接收 UEditor 的值...2016-11-25

  • PHP编辑器PhpStrom运行缓慢问题

    小编推荐的这篇文章介绍了PHP编辑器PhpStrom运行缓慢问题的解决办法，有兴趣的同学快来看看吧 最近在使用phpstorm开发项目的时候，在加载文件运行时，不管有多大，如果项...2017-07-06

  • 浅析Yii2集成富文本编辑器redactor实例教程

    yii2集成另外一个强大好用的富文本编辑器Redactor。接下来通过本文给大家介绍Yii2集成富文本编辑器redactor实例教程，感兴趣的朋友一起学习吧...2016-04-28

  • ArtEditor富文本编辑器增加表单提交功能

    artEditor是一款基于jQuery的移动端富文本编辑器，支持插入图片，后续完善其他功能。接下来通过本文给大家介绍ArtEditor富文本编辑器增加表单提交功能，对arteditor编辑器相关知识感兴趣的朋友一起学习吧...2016-04-19

  • 如何在sublime编辑器中安装python

    这篇文章主要介绍了如何在sublime编辑器中安装python,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-20

  • php 中调用fckeditor网页编辑器方法

    下面中要在html 中调用就行了 <script src=”fckeditor/fckeditor.js”></script> <script type=”text/网页特效”> function showfck(){...2016-11-25

  • yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法

    这篇文章主要介绍了yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法的相关资料,需要的朋友可以参考下...2016-04-23

  • Unity编辑器下重启的方法

    这篇文章主要介绍了Unity编辑器下重启的方法的相关资料,希望通过本文能帮助到大家，让大家学习理解这部分内容，需要的朋友可以参考下...2020-04-25

  • dotnet封装的kindeditor编辑器控件

    KindEditor很不错，没有ForNet的扩展,我是搞.net开发的,就用它简单封装了一个控件，拖过来即可使用，使用更加简单...2021-09-22

  • 新浪在线可视化编辑器PHP版

    调用 <?php /** * 新浪博客编辑器PHP版封装类调用方法 * */ header(\'Content-Type:text/html;Charset=utf-8;\'); include_once(\'sinaEditor.class.php\'...2016-11-25

  • fckediter、 tiny_mce 编辑器安装方法

    fckediter： 效果图： 用法： 首先去网上下载fckediter，然后按着这四步来： 1.复制fckeditor到网站跟目录下 2.复制fredck.fckeditorv2.dll到bin目录下，再添加引用 3.配web.con...2016-09-20

  • C语言实现简易文本编辑器

    这篇文章主要为大家详细介绍了C语言实现简易文本编辑器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-09

  • 解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法

    下面小编就为大家带来一篇解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-05-09