ASP.NET MVC使用kindeditor

大爱.NET!

asp.net mvc相对于webform显得更加简洁,分层明确,能将html和逻辑代码隔离,也能方便的参考PHP 、JSP等页面风格,总之就是微软大法好!

前几日为了写一个文章发表页面,需要一个富文本编辑器,网上搜罗了很多,发现kindeditor挺合适的,对ASP.NET支持很好。www.kindsoft.net

使用还不是很熟练,大部分按样板搭建,结合到MVC上,步骤及要点如下,如有不足请大家指正。

1.下载kindeditor插件

在kindeditor官方网站www.kindsoft.net下载下载插件包,添加到MVC项目中。


kindeditor目录结构


根据官方文档,删除多余的PHP、JSP等页面,留下asp.net页面。

2.在view页面中引用kindeditor

kindeditor的引用主要有两部份,一是添加textarea,而是引用插件的JS代码


textarea

本例使用html扩展方法实现textarea,并用model接收textarea的数据。


js代码引用

这是官方示例js代码,未作修改 直接引用,注意脚本和css的路径,以及表单和textarea的ID和那么属性,可自行修改,须与js代码对应就行,否则文本框不能初始化。

uploadJson和fileManagerJson分别用来存储文件和返回文件引用html标记。

使用这两个服务必须要引用LitJson

LitJson

uploadJson是对上传文件处理的封装,包含文件存储路径,文件类型,文件大小,用户可自行修改。

fileManagerJson是对已有文件的管理,与editor中的文件空间有关联,建议谨慎使用,能浏览已上传文件。


如此,便完成简单的kindeditor的使用。效果如下

kindeditor界面

界面模式可更具官方文档设置精简版及其他主题。

3.view表单处理

在mvc4(大概)之后表单时默认开启了预验证,如果不关闭,在提交含有html标签的内容时候,则会显示Request.For具有潜在威胁。


使用html标签<strong>
验证错误

为解决这个问题,只需要在处理表单的控制器前加上 [ValidateInput(false)] 关闭表单验证。

关闭表单验证

在现实view中显示html标签时需用html辅助方法

@Html.Raw(HttpUtility.HtmlDecode(Model.context))

如此,kindeditor的简单使用就完成,model处理就省略了。若有错误,欢迎大家指正。

推荐阅读更多精彩内容