Procedure for ASP. NET Website to use the Kindeditor Rich Text Editor

1. Download the editor
Download KindEditor latest version, download page: http://www.kindsoft.net/down.php

2. Deployment Editor
Unzip the kindeditor-x.x.x.zip file and copy the editor folder to the web directory
 
3. Add (ValidateRequest = "false") to the webpage ")
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" ValidateRequest = "false" CodeBehind = "XXX. cs" Inherits = "XXX" %>

4. Introduce the script file (XXX needs to be modified)
Copy codeThe Code is as follows:
<! -- Rich text editor configuration example -->
<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', 'strikethangout', '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>
<! -- Rich text editor configuration example -->

5. Use the Editor (XXX needs to be modified)
Copy codeThe Code is as follows:
<! -- Rich Text Editor -->
<Textarea id = "XXX" name = "XXX" runat = "server" cols = "100" rows = "8" style = "width: 1000px; height: 500px; visibility: hidden; "> </textarea>

6. modify the configuration as needed(File path: web \ editor \ asp.net \ file_manager_json.ashx)
Copy codeThe Code is as follows:
// Root directory path, relative path
String rootPath = "../../";
// Root directory URL, which can specify the absolute path
String rootUrl = aspxUrl + "../attached /";
// Image Extension
String fileTypes = "gif, jpg, jpeg, png, bmp ";

7. Get the editor content in the background(XXX needs to be modified)
Copy codeThe Code is as follows:
Request. Form ["XXX"]

Because the content is directly displayed in server programs (ASP, PHP, ASP. NET, etc.), special HTML characters (>,<,&, ") must be converted, so a tool class is written.
Copy codeThe Code is as follows:
Public class HtmlUtil
{
/// <Summary>
/// Replace special HTML characters
/// </Summary>
/// <Param name = "content"> </param>
/// <Returns> </returns>
Public static String escapeHtml (String content)
{
Return content. Replace ("&","&")
. Replace ("<", "<")
. Replace (">", "> ")
. Replace ("\"",""");
}
/// <Summary>
/// Restore special HTML characters
/// </Summary>
/// <Param name = "content"> </param>
/// <Returns> </returns>
Public static String unescapeHtml (String content)
{
Return content. Replace ("&","&")
. Replace ("<", "<")
. Replace (">", "> ")
. Replace (""","\"");
}
}

When inserting data into a database, replace special characters (XXX must be modified)
Copy codeThe Code is as follows:
HtmlUtil. escapeHtml (Request. Form ["XXX"])

Restore special characters when reading data from the database (XXX must be modified)
Copy codeThe Code is as follows:
HtmlUtil. unescapeHtml (XXX)