• ASP.NET网站使用Kindeditor富文本编辑器配置步骤


    1. 下载编辑器 
    下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 

    2. 部署编辑器 
    解压 kindeditor-x.x.x.zip 文件,将editor文件夹复制到web目录下 
     
    3、在网页中加入(ValidateRequest="false") 

    1 <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeBehind="XXX.cs" Inherits="XXX" %> 

    4、引入脚本文件(XXX部分需要修改)

     1 <!--富文本编辑器配置↓ --> 
     2 <link type="text/css" rel="stylesheet" href="../editor/themes/default/default.css" /> 
     3 <link rel="stylesheet" href="../editor/plugins/code/prettify.css" /> 
     4 <script type="text/javascript" charset="utf-8" src="../editor/kindeditor-min.js"></script> 
     5 <script type="text/javascript" charset="utf-8" src="../editor/lang/zh_CN.js"></script> 
     6 <script type="text/javascript" charset="utf-8" src="../editor/plugins/code/prettify.js"></script> 
     7 <script type="text/javascript"> 
     8 KindEditor.ready(function (K) { 
     9 var editor1 = K.create('#XXX', { 
    10 items: [ 
    11 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 
    12 'removeformat', 'strikethrough', 'lineheight', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 
    13 'insertunorderedlist', '|', 'emoticons', 'link', 'insertfile', 'media', '|', 'image', 'multiimage', 'map', 'baidumap', '|', 'preview', 'fullscreen', 
    14 ], 
    15 cssPath: '../editor/plugins/code/prettify.css', 
    16 uploadJson: '../editor/asp.net/upload_json.ashx', 
    17 fileManagerJson: '../editor/asp.net/file_manager_json.ashx', 
    18 allowFileManager: true, 
    19 pasteType: 1, 
    20 afterCreate: function () { 
    21 var self = this; 
    22 K.ctrl(document, 13, function () { 
    23 self.sync(); 
    24 K('form[name=XXX]')[0].submit(); 
    25 }); 
    26 K.ctrl(self.edit.doc, 13, function () { 
    27 self.sync(); 
    28 K('form[name=XXX]')[0].submit(); 
    29 }); 
    30 } 
    31 }); 
    32 prettyPrint(); 
    33 }); 
    34 </script> 
    35 <!--富文本编辑器配置↑--> 

    5、使用编辑器(XXX部分需要修改) 

    1 <!--富文本编辑器--> 
    2 <textarea id="XXX" name="XXX" runat="server" cols="100" rows="8" style="1000px;height:500px;visibility:hidden;"></textarea> 

    6、根据自己的需要修改配置(文件路径:webeditorasp.netfile_manager_json.ashx)

    1 //根目录路径,相对路径 
    2 String rootPath = "../../"; 
    3 //根目录URL,可以指定绝对路径 
    4 String rootUrl = aspxUrl + "../attached/"; 
    5 //图片扩展名 
    6 String fileTypes = "gif,jpg,jpeg,png,bmp"; 

    7、后台获取编辑器内容(XXX部分需要修改) 

     1 Request.Form["XXX"]  

    由于服务器端程序(ASP、PHP、ASP.NET等)直接显示内容,则必须转换HTML特殊字符(>,<,&,”),所以写了个工具类

     1 public class HtmlUtil 
     2  { 
     3         /// <summary> 
     4         /// 替换HTML特殊字符 
     5         /// </summary> 
     6         /// <param name="content"></param> 
     7         /// <returns></returns> 
     8         public static String escapeHtml(String content) 
     9         { 
    10            return content.Replace("&", "&").Replace("<", "<").Replace(">", ">").Replace(""", """); 
    11         } 
    12         /// <summary> 
    13         /// 还原HTML特殊字符 
    14         /// </summary> 
    15         /// <param name="content"></param> 
    16         /// <returns></returns> 
    17         public static String unescapeHtml(String content) 
    18         { 
    19             return content.Replace("&", "&").Replace("<", "<").Replace(">", ">").Replace(""", """); 
    20         } 
    21  } 

    往数据库插入时,进行替换特殊字符(XXX部分需要修改) 

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

    从数据库读取数据时,进行还原特殊字符(XXX部分需要修改) 

     1 HtmlUtil.unescapeHtml(XXX)  

  • 相关阅读:
    ajax
    前端学数据库之子查询
    读书笔记:《HTML5开发手册》Web表单
    阅读《编写可读代码的艺术》笔记
    windows环境下sublime的nodejs插件详细安装图解
    有关css3的一些问题
    前面的话
    gulp思考
    10种排序算法分析
    ajax异步请求
  • 原文地址:https://www.cnblogs.com/felix-wang/p/6367086.html
Copyright © 2020-2023  润新知