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="取值" />&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 值。當然你不轉義，然後後臺設定一下可以取消這個錯，但是講道理的話，還是轉義然後存到資料庫裡比較好，然後顯示的時候反轉義一下。