LiuCabbage-KindEditor HTML编辑器简单使用 .NET 版本

06 08月 2020

KindEditor官网地址：http://kindeditor.net/about.php

效果图

undefined

第一步：

项目添加LitJSON.dll引用位置：kindeditor/asp.net/bin/LitJSON.dll

第二步：

修改KindEditor上传图片文件一般处理程序的图片位置

项目根目录添加UpFiles文件夹

file_manager_json.ashx

undefined

upload_json.ashx

undefined

第三步：

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="取值" />&nbsp;&nbsp;
        <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 = '&lt;img src="/UpFiles/image/20200806/20200806164105_0738.jpg" alt="" /&gt;';

                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 值。当然你不转义，然后后台设置一下可以取消这个错，但是讲道理的话，还是转义然后存到数据库里比较好，然后显示的时候反转义一下。

非特殊说明，本文版权归 LiuCabbage 所有，转载请注明出处.

本文标题： KindEditor HTML编辑器简单使用 .NET 版本

本文网址： http://www.baocaige.top/Article/Detail/15

延伸阅读

发表评论