ASP.NET网站使用Kindeditor富文本编辑器配置步骤
程序员文章站
2024-03-31 16:27:10
1. 下载编辑器 下载 kindeditor 最新版本,下载页面: http://www.kindsoft.net/down.php 2. 部署编辑器 解压 kindedi...
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)
下载 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)
上一篇: Python批量查询域名是否被注册过
下一篇: MyBatis拦截器实现分页功能实例
推荐阅读
-
ASP.NET网站使用Kindeditor富文本编辑器配置步骤
-
ASP.NET网站使用Kindeditor富文本编辑器配置步骤
-
ASP.NET配置KindEditor文本编辑器图文教程
-
ASP.NET配置KindEditor文本编辑器图文教程
-
在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码(代码是.net core3.0版本)
-
在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
-
Asp.Net Core中配置使用Kindeditor富文本编辑器实现图片上传和截图上传及文件管理和上传(开源代码.net core3.0)
-
富文本编辑器 CKeditor 配置使用+上传图片
-
富文本编辑器的使用(kindeditor)
-
富文本编辑器 KindEditor的使用