关于用MVC开发的Kindeditor使用以及上传图片的个人经验
Kindeditor是一个很不错的富文本框插件,引入的话会给网站开发大大减少很多工作,只是在使用的时候看官网的介绍总会有一些理解上的差别,在这里我希望通过我的经验来记录一下遇见的问题并帮助各位使用Kindeditor。我一直学习并使用的是,最近在做MVC的一个网站,也由于网上很多资料没有这方面的内容,所以希望可以帮助到更多同行。
一,关于网站页面使用富文本框
在Kindeditor官网上的方法介绍很多都是默认的代码以及方法,所以在实际操作中还有很多需要自己修改的地方,在这里我列举一下自己遇到的问题,在这里也算一个记录,各位观看时希望结合官网的教程内容查看,这里至讨论代码内容:
搭载富文本框时前台应该改什么:
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的搭载在主页的代码内容。
Request.Form后,提示有HTML的标签安全问题如何解决:
这是我困扰多天的问题,最后才发现解决比较简单。
楼主JSP方法并不在行,所以没法在提交之前像网上的做法那样用replace方法:
str = Replace(str, "&", "&")str = Replace(str, "<", "<")str = Replace(str, ">", ">")str = Replace(str, """", """)
我采用的相对安全性差一些但是没那么差的方法:
后台代码在 [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文件夹下的话会继续报错,这里如果有什么更好的方法希望各位可以给我提出来。
上传图片提交后提示405错误:
这是一个官网内容没有给出的办法,同时也是需要各位同僚自己发现的东西,如果是老手的话在报错界面下方看到url带php可能就知道是怎么回事了,但是对于我这样的新手确实是煞费苦心,在这里给大家分享一下自己的经验。
前台界面添加:
//上传图片内容如下:KindEditor.ready(function(K) {K.create('#editor_id', {uploadJson : '../../Content/kindeditor//upload_json.ashx',fileManagerJson : '../../Content/kindeditor//file_manager_json.ashx',allowFileManager : true});prettyPrint();});
这本是需要在demo里面复制出来的代码,也可以是从官网找到的内容,只是需要修改的是路径,而路径是需要你注意的,都是文件夹里面的内容。
然后才是困扰我多时的解决方法所在,那就是改kindereidtor-all.js文件。
kinddeitor的默认方法是php,所以在主要的js文件里用的也是php的路径,这个内容没有在官网提到,所以需要自己找办法,其实也简单,在文件里ctrl+F查找“php”,然后关于路径的都改成文件夹下的内容就可以了。需要大家仔细认真一点,这样才不会马虎大意又改错。
405问题可以顺利解决。
上传路径不存在:
打开upload_json.ashx文件,找到;
String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1);//文件保存目录路径String savePath = "Files/";//文件保存目录URL../FilesString saveUrl = aspxUrl + "Files/";
其中savePath和saveUrl的字符串内容是我自己改过的,这是一个虚拟路径,因为上传到服务器的都是需要虚拟路径的,如果用绝对路径那就是读取我们本地文件夹下的东西了,当然也是会报错的。在这里我在kindeditor的文件夹下创建了一个Files文件夹,用来上传图片。
这样便不会报错了。
关于图片回显,回显是需要指定图片的路由,而路由就是我们的saveurl,aspxUrl是upload_json所在的文件夹也就是这个文件夹(根据默认的文件夹),而根据我自己的代码,我需要在我的文件夹下创建一个Files文件夹(上述代码内容写的Files就是这里的文件夹名称),里面创建一个image文件夹,image里面是的文件夹是日期文件夹,日期文件夹里面是改过名字的上传后的图片,以上创建文件夹的过程的都由upload_json里面的代码实现。
然后就可以实现图片回传了。
感谢各位,有什么问题请提出来交流。