KindEditor官网地址:http://kindeditor.net/about.php
效果图
第一步:
项目添加LitJSON.dll引用 位置:kindeditor/asp.net/bin/LitJSON.dll
第二步:
修改KindEditor上传图片文件一般处理程序的图片位置
项目根目录添加UpFiles文件夹
file_manager_json.ashx
upload_json.ashx
第三步:
div class="my_textarea">
<textarea style="height:350px; width:60%;" id="txtContentDescription" name="txtContentDescription"></textarea>
</div>
<div class="my_btn" style="margin-top:20px;">
<input id="getValue" type="button" name="name" value="取值" />
<input id="setValue" type="button" name="name" value="赋值" />
</div>
<script src="../../Content/jquery.min.1.8.3.js" type="text/javascript"></script>
<script src="../../Content/kindeditor/kindeditor-all-min.js" type="text/javascript"></script>
<script src="../../Content/kindeditor/lang/zh-CN.js" type="text/javascript"></script>
<script src="../../Content/HtmlUtil.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
setKindEditor();
$("#getValue").click(function () {
editor.sync(); //将KindEditor的数据同步到textarea标签。
console.log($('#txtContentDescription').val());
console.log(HtmlUtil.htmlEncode($('#txtContentDescription').val()));
});
$("#setValue").click(function () {
var content = '<img src="/UpFiles/image/20200806/20200806164105_0738.jpg" alt="" />';
console.log(content);
console.log(HtmlUtil.htmlDecode(content));
editor.html(HtmlUtil.htmlDecode(content));
});
});
/*
初始化KindEditor
*/
function setKindEditor() {
editor = KindEditor.create('#txtContentDescription', {
cssPath: '/Content/kindeditor/plugins/code/prettify.css',
uploadJson: '/Content/kindeditor/asp.net/upload_json.ashx',
fileManagerJson: '/Content/kindeditor/asp.net/file_manager_json.ashx',
allowFileManager: true
});
}
</script>
HtmlUtil.js
var HtmlUtil = {
/*1.用浏览器内部转换器实现html转码*/
htmlEncode: function (html) {
if (html == "" || html == undefined || html == null || html == "undefined" || html == "null") {
return "";
}
//1.首先动态创建一个容器标签元素,如DIV
var temp = document.createElement("div");
//2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)
(temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
//3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了
var output = temp.innerHTML;
temp = null;
return output == "null" ? "" : output;
},
/*2.用浏览器内部转换器实现html解码*/
htmlDecode: function (text) {
if (text == "" || text == undefined || text == null || text == "undefined" || text == "null") {
return "";
}
//1.首先动态创建一个容器标签元素,如DIV
var temp = document.createElement("div");
//2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)
temp.innerHTML = text;
//3.最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。
var output = temp.innerText || temp.textContent;
temp = null;
return output == "null" ? "" : output;
},
/*3.用正则表达式实现html转码*/
htmlEncodeByRegExp: function (str) {
var s = "";
if (str.length == 0) return "";
s = str.replace(/&/g, "&");
s = s.replace(/</g, "<");
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/\'/g, "'");
s = s.replace(/\"/g, """);
return s;
},
/*4.用正则表达式实现html解码*/
htmlDecodeByRegExp: function (str) {
var s = "";
if (str.length == 0) return "";
s = str.replace(/&/g, "&");
s = s.replace(/</g, "<");
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/'/g, "\'");
s = s.replace(/"/g, "\"");
return s;
}
};
function HtmlFilter(s) {
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]")
var rs = "";
for (var i = 0; i < s.length; i++) {
rs = rs + s.substr(i, 1).replace(pattern, '');
}
return rs;
}
最后总结:
HtmlUtil.js 用来转义编辑器html内容,防止报错:从客户端(XXX)中检测到有潜在危险的 Request.Form 值。当然你不转义,然后后台设置一下可以取消这个错,但是讲道理的话,还是转义然后存到数据库里比较好,然后显示的时候反转义一下。