2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 关于ASP.NET用MVC开发的Kindeditor使用以及上传图片的个人经验

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

时间:2023-05-28 16:34:55

相关推荐

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

关于用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, "&", "&amp;")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文件夹下的话会继续报错,这里如果有什么更好的方法希望各位可以给我提出来。

上传图片提交后提示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里面的代码实现。

然后就可以实现图片回传了。

感谢各位,有什么问题请提出来交流。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。