ASP.NET網站使用Kindeditor富文字編輯器步驟

文章目錄

• 1. 下載編輯器
• 2. 部署編輯器
• 4、引入指令檔（XXX部分需要修改）
• 5、使用編輯器（XXX部分需要修改）
• 6、根據自己的需要修改配置（檔案路徑：web\editor\asp.net\file_manager_json.ashx）
• 7、後台擷取編輯器內容（XXX部分需要修改）

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特殊字元(>,<,&,”)，所以寫了個工具類

往資料庫插入時，進行替換特殊字元（XXX部分需要修改）

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

從資料庫讀取資料時，進行還原特殊字元（XXX部分需要修改）

HtmlUtil.unescapeHtml(XXX)