【原创】ASP.NET MVC3使用html编辑器(kindeditor)
小弟刚接触MVC3.0,虽然已有几年web开发,也使用过fckeditor,xheditor,freetext,kindeditor等html在线编辑器。
但是在MVC环境下还没有使用过。今天自己折腾了好一会才解决。项目中使用的是kindeditor.
第一步:首先要有kindeditor,官网下载地址:http://www.kindsoft.net/down.php,目前最新版本是4.0.5,更新时间是2012.1.15
文件有600多k,但是实际使用只需要其中几个文件。解压文件后,copy 根目录2个js文件,以及themes(放的样式、图片)文件夹,plugins文件夹,lang文件夹中是语言,我们只需要其中的zh_CN.js。最后放项目中的文件如下截图:
第二步:引入js文件,初始化编辑器。对于细化编辑器的可以参考官网demohttp://www.kindsoft.net/demo.php
<script src="@Url.Content("~/Scripts/kindeditor/kindeditor.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/kindeditor/lang/zh_CN.js")" type="text/javascript"></script> <script type="text/javascript"> var editor; KindEditor.ready(function (K) { editor = K.create('textarea[name="Information"]', { allowFileManager: true }); }); </script>
第三步:使用KindEditor
@Html.TextAreaFor(model => model.Information, new { style="width:800px;height:400px"})
第四步:Controller,要设置ValidateInput false,不然有html标签会报错的。
[HttpPost] [ValidateInput(false)] public ActionResult Create(NewsEntity news) { if (ModelState.IsValid) { news.Time = DateTime.Now; PE.NewsEntity.Add(news); try { PE.SaveChanges(); return RedirectToAction("News"); } catch (Exception e) { throw e; } } return View(); }
最后在页面上效果图:
posted on 2012-03-10 21:10 BarneyZhang 阅读(3998) 评论(6) 编辑 收藏 举报