在MVC3中使用富文本编辑器:KindEditor的配置及上传图片
2013-07-20 23:55
387 查看
现在比较常用的富文本编辑挺多的,如ueditor、fckeditor、kingeditor等,本文主要介绍一下KindEditor的配置与使用。
先去官网http://www.kindsoft.net/下载此编辑器的最新版本,比如现在的4.1.7版本,下载回来后,可以进行精简,将一些用不到的文件或文件夹删除。
一、将解压出来的整个KindEditor4.1.7文件夹复制到项目的Content文件夹下,并重命名为kindeditor。
可以将asp、jsp、php、examples这四个文件夹直接删除,没有用处,只留下asp.net、attached、lang、plungins、themes这五个文件夹和其它的JS文件就行了。
注意:图片上传成功后,是放在attached这个文件夹中的。
二、将asp.net文件夹下,bin文件夹中的LitJSON.dll这个文件,复制到整个项目的bin文件夹中。
三、在需要放置编辑器的视图,引入如下的文件以及配置
注意uploadJson: '@Url.Content("~/Content/kindeditor/asp.net/upload_json.ashx")',这一行是用来实现图片上传的。name="content",这里的content就是你用来存放文章正文的表格字段名称。
在需要放置编辑器的地方,加上代码
content替换成您自己的表格字段名,宽度和高度可变。
至此,编辑器配置完成,也可以上传图片哦。但是图片的大小只能在1M以内。
先去官网http://www.kindsoft.net/下载此编辑器的最新版本,比如现在的4.1.7版本,下载回来后,可以进行精简,将一些用不到的文件或文件夹删除。
一、将解压出来的整个KindEditor4.1.7文件夹复制到项目的Content文件夹下,并重命名为kindeditor。
可以将asp、jsp、php、examples这四个文件夹直接删除,没有用处,只留下asp.net、attached、lang、plungins、themes这五个文件夹和其它的JS文件就行了。
注意:图片上传成功后,是放在attached这个文件夹中的。
二、将asp.net文件夹下,bin文件夹中的LitJSON.dll这个文件,复制到整个项目的bin文件夹中。
三、在需要放置编辑器的视图,引入如下的文件以及配置
<script type="text/javascript" src="@Url.Content("~/Content/kindeditor/kindeditor-min.js")"></script> <script type="text/javascript" src="@Url.Content("~/Content/kindeditor/lang/zh_CN.js")"></script> <script type="text/javascript"> var editor; KindEditor.ready(function (K) { editor = K.create('textarea[name="content"]', { resizeType: 1, allowFileManager : true, uploadJson: '@Url.Content("~/Content/kindeditor/asp.net/upload_json.ashx")', fileManagerJson:'@Url.Content("~/Content/kindeditor/asp.net/file_manager_json.ashx")' }); }); </script>
注意uploadJson: '@Url.Content("~/Content/kindeditor/asp.net/upload_json.ashx")',这一行是用来实现图片上传的。name="content",这里的content就是你用来存放文章正文的表格字段名称。
在需要放置编辑器的地方,加上代码
@Html.TextAreaFor(m => m.content, new { style = "width:750px;height:400px" })
content替换成您自己的表格字段名,宽度和高度可变。
至此,编辑器配置完成,也可以上传图片哦。但是图片的大小只能在1M以内。
相关文章推荐
- 三步在mvc中使用KindEditor开发富文本编辑器上传图片功能
- KindEditor - 富文本编辑器 - 使用+上传图片
- 在使用富文本编辑器kindeditor时,使用图片上传的功能报不允许访问路径***的HTTP谓词POST
- 富文本编辑器 CKeditor 配置使用+上传图片
- kindeditor4.1.10图片上传配置及使用说明
- 百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法
- 使用kindeditor来替换ecshop的fckeditor编辑器,让ecshop可以批量上传图片
- 【Ts 3】Nginx的Http(图片)服务器配置+ftp上传使用说明
- 低版本net项目使用ueditor 图片上传配置
- 关于kindeditor富文本编辑的上传图片、音频、和视频的使用
- ueditor1.4.3配置过程(包含单独上传文件以及图片的使用)
- ckeditor组合ckfinder的配置使用图片上传功能
- 手把手教你百度富文本编辑器的相关配置包括图片上传(for jsp)
- Ueditor1.4.3百度编辑器配置(包括上传图片)的使用心得
- KindEditor上传图片无法使用绝对路径
- xheditor 与strut2 配置使用并提供上传图片!
- Struts2使用Kindeditor4.0.3在线编辑器--上传图片、视频、FLASH、附件
- Asp.net MVC3 文本编辑器KindEditor使用及图片上传浏览
- 【T电商 3】Nginx的Http(图片)服务器配置+ftp上传使用说明
- CKEditor-4.6.2结合Struts2的使用,加CKEditor图片上传的配置