关于ASP.NET用MVC开发的Kindeditor使用以及上传图片的个人经验

关于ASP.NET用MVC开发的Kindeditor使用以及上传图片的个人经验

Kindeditor是一个很不错的富文本框插件，引入的话会给网站开发大大减少很多工作，只是在使用的时候看官网的介绍总会有一些理解上的差别，在这里我希望通过我的经验来记录一下遇见的问题并帮助各位使用Kindeditor。我一直学习并使用的是ASP.NET，最近在做MVC的一个网站，也由于网上很多资料没有这方面的内容，所以希望可以帮助到更多同行。

一，关于网站页面使用富文本框

在Kindeditor官网上的方法介绍很多都是默认的代码以及方法，所以在实际操作中还有很多需要自己修改的地方，在这里我列举一下自己遇到的问题，在这里也算一个记录，各位观看时希望结合官网的教程内容查看，这里至讨论代码内容：

1. 搭载富文本框时前台应该改什么 ：

   KindEditor.ready(function (K) {
      window.editor = K.create('#editor_id');
   });
   
   

   这是官网给出的添加代码，这是必须的内容，如果没有这段代码，富文本框将无法加载。

   var options = {
     cssPath : '../../Content/kindeditor/plugins/code/prettify.css',
     filterMode : true
   };
   
   var editor = K.create('textarea[name="content"]', options);
   
   
   });
   
   

我的富文本框是这样设计的：

<form name="Tex" method="post">
    <textarea id="editor_id" name="content" style="width:700px;height:300px;">
    HTML内容
    </textarea>
    <input type="submit" name="button" value="提交内容" onclick="KeyDown" /> (提交快捷键: Ctrl + Enter)
</form>

第一段代码顾名思义，cssPath代表的是富文本框的css地址，这段代码也是必须的，没有的话富文本框只是一个难看的框框，而如果参考下载到本地的demo文件的话写法会很不一样，建议用官网的代码。

这样基本上就完成了KindEditor的搭载在主页的代码内容。

2. Request.Form后，提示有HTML的标签安全问题如何解决 ：
   这是我困扰多天的问题，最后才发现解决比较简单。
   楼主JSP方法并不在行，所以没法在提交之前像网上的做法那样用replace方法：

      str = Replace(str, "&", "&")
   str = Replace(str, "<", "&lt;")
   str = Replace(str, ">", "&gt;")
   str = Replace(str, """", "&quot;")
   
   

   我采用的相对安全性差一些但是没那么差的方法：
   后台代码在 [HttpPost]下添[ValidateInput(false)]，然后切记再Web.config中：

    <system.web>
   <httpRuntime requestValidationMode="2.0"/>
   <compilation debug="true" targetFramework="4.7.2" />
     <!--<httpRuntime targetFramework="4.7.2" />-->
   </system.web>
   
   

   这个Web.config是全局的文件，如果用View文件夹下的话会继续报错，这里如果有什么更好的方法希望各位可以给我提出来。

3. 上传图片提交后提示405错误 ：
   这是一个官网内容没有给出的办法，同时也是需要各位同僚自己发现的东西，如果是老手的话在报错界面下方看到url带php可能就知道是怎么回事了，但是对于我这样的新手确实是煞费苦心，在这里给大家分享一下自己的经验。
   前台界面添加：

      //上传图片内容如下：
   KindEditor.ready(function(K) {
    K.create('#editor_id', {
            uploadJson : '../../Content/kindeditor/asp.net/upload_json.ashx',
            fileManagerJson : '../../Content/kindeditor/asp.net/file_manager_json.ashx',
            allowFileManager : true
    });
    prettyPrint();
    });
   
   

   这本是需要在demo里面复制出来的代码，也可以是从官网找到的内容，只是需要修改的是路径，而路径是需要你注意的，都是asp.net文件夹里面的内容。
   然后才是困扰我多时的解决方法所在，那就是改kindereidtor-all.js文件。
   kinddeitor的默认方法是php，所以在主要的js文件里用的也是php的路径，这个内容没有在官网提到，所以需要自己找办法，其实也简单，在文件里ctrl+F查找“php”，然后关于路径的都改成asp.net文件夹下的内容就可以了。需要大家仔细认真一点，这样才不会马虎大意又改错。
   405问题可以顺利解决。

4. 上传路径不存在 ：
   打开upload_json.ashx文件，找到;

   String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1);
     
     //文件保存目录路径
     String savePath = "Files/";
   
     //文件保存目录URL../Files
     String saveUrl = aspxUrl + "Files/";
   

   其中savePath和saveUrl的字符串内容是我自己改过的，这是一个虚拟路径，因为上传到服务器的都是需要虚拟路径的，如果用绝对路径那就是读取我们本地文件夹下的东西了，当然也是会报错的。在这里我在kindeditor的asp.net文件夹下创建了一个Files文件夹，用来上传图片。
   这样便不会报错了。

   关于图片回显，回显是需要指定图片的路由，而路由就是我们的saveurl，aspxUrl是upload_json所在的文件夹也就是asp.net这个文件夹（根据默认的文件夹），而根据我自己的代码，我需要在我的asp.net文件夹下创建一个Files文件夹(上述代码内容写的Files就是这里的文件夹名称)，里面创建一个image文件夹，image里面是的文件夹是日期文件夹，日期文件夹里面是改过名字的上传后的图片，以上创建文件夹的过程的都由upload_json里面的代码实现。
   然后就可以实现图片回传了。
   感谢各位，有什么问题请提出来交流。