Asp.net MVC使用KindEditor4
2013-06-10 11:12
351 查看
最近转入Asp.net MVC开发,WebForm下惯用的FreeTextBox已然不能用了。于是想找个功能全、界面雅、免费的纯JS编辑器,KindEditor4正好满足本人的要求,包括图片、Flash、视频上传及空间管理而且配置也异常的简单。下面简单说一下在Asp.net MVC环境下基本配置方法。
window.editor = K.create('#content', options);中的#content要与textarea标记的id一致
显示输出时,使用Html.Raw辅助方法才能正确显示Html
现在已经可以运行了。如果想要修改上传文件大小的限制,必须修改upload_json.ashx程序中的maxSize以及修改项目的Web.Config,在<system.web>中加入诸如<httpRuntime maxRequestLength="20000000" executionTimeout="3600" />(此处限制上传文件20MB)。上传的文件放置在KindEditor/attached目录下,如需修改,可分别在upload_json.ashx及file_manager_json.ashx中修改保存路径。
下载Demo
Step 1. 下载KindEditor
首先到KindEditor官网下载(目前是4.1.7版本),解压后删除jsp、php、asp、examples文件夹,放入Asp.net MVC项目中的Scripts文件夹中。Step 2. 添加HomeController
public class HomeController : Controller { // // GET: /Home/ [ValidateInput(false)] public ActionResult Index() { return View(); } [ValidateInput(false)] [HttpPost] public ActionResult Index(string content) { ViewBag.Content = content; return View(); } }注意ValidateInput特性设置为false,否则无法插入Html标记。
Step 3. 在视图中加入KindEditor脚本
<script src="../../Scripts/kindeditor/kindeditor-min.js" type="text/javascript"></script> <script type="text/javascript"> KindEditor.ready(function (K) { var options = { uploadJson: '../scripts/kindeditor/asp.net/upload_json.ashx', fileManagerJson: '../scripts/kindeditor/asp.net/file_manager_json.ashx', allowFileManager : true }; window.editor = K.create('#content', options); }); </script> <h2>KindEditor4编辑器</h2> @Html.Raw(@ViewBag.Content) @using (Html.BeginForm()) { <textarea id="content" name="content" style="width:700px;height:300px;"></textarea> <input type="submit" value="提交" /> }uploadJson和fileManagerJson设置值要注意路径名称
window.editor = K.create('#content', options);中的#content要与textarea标记的id一致
显示输出时,使用Html.Raw辅助方法才能正确显示Html
Step 4. 引用LitJSON.dll
项目引用KindEditor/asp.net/bin目录下的LitJSON.dll。现在已经可以运行了。如果想要修改上传文件大小的限制,必须修改upload_json.ashx程序中的maxSize以及修改项目的Web.Config,在<system.web>中加入诸如<httpRuntime maxRequestLength="20000000" executionTimeout="3600" />(此处限制上传文件20MB)。上传的文件放置在KindEditor/attached目录下,如需修改,可分别在upload_json.ashx及file_manager_json.ashx中修改保存路径。
下载Demo
相关文章推荐
- Asp.net MVC中使用KindEditor上传本地图片的注意事项
- Asp.net MVC使用KindEditor4
- Asp.net MVC使用KindEditor 4.X无法取到textarea的值
- ASP.NET MVC- KindEditor的使用
- asp.net MVC使用kindeditor编辑器
- asp.net MVC使用kindeditor编辑器
- 在线编辑器 KindEditor 在ASP.NET MVC 中使用
- 虚拟主机运行Asp.net MVC2程序体验(在不同版本的 IIS 上使用 ASP.NET MVC(转),付程序示例 )
- Asp.Net MVC Identity 2.2.1 使用技巧(一)
- StructureMap 作为 ASP.NET MVC 的 DI 框架的使用实例
- asp.net mvc中在Filter中跳转千万不要使用Response.Redirect[转]
- asp.net mvc Dropdownlist的使用绑定
- 在asp.net mvc中使用百度UEditor初始化内容遇到自数据库中读取的html字符串在UEditor中始终是html编码的问题
- 我使用Asp.net MVC WebAPI支持OData协议进行分页操作的笔记(第一篇)
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据篇
- 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
- 记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6
- Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)
- 知识树开发(使用ASP.NET MVC 模拟 MSDN)
- Asp.net MVC 使用Autofac的简单使用 IOC