ASP.NET MVC实践系列11-FCKEditor和CKEditor的使用
FCKEditor是一款强大的在线编辑器,简单实用,多浏览器兼容,免费开源,应用十分广泛,据他的官方网站上称有三百多万的下载量,而且无数的知名大公司正在使用它。所以FCKEditor是很值得信赖的,现在 FCKeditor项目已转向下一代版本命名CKEditor的产品开发,基本上采用Fckeditor并对部分进行了重新设计和采用新技术以改善结构,性能更好扩展性更强。下面我们来介绍一个这两个编辑器,对于FCKEditor我们只讲一下在ASP.NET MVC中的用法其配置可以参考官方文档。
一、FCKEditor使用:
1、FCKEditor在ASP.NET MVC中的应用:
首先到http://ckeditor.com/download下载FCKeditor 2.6.5(我下载的时候报地址暂时有问题,但FCKEditor网上保有量很多,可以任意下载一个),将下载好的文件解压缩然后拷贝到你项目的Content文件夹下:
View
<% using (Html.BeginForm())
{ %>
<%= Html.TextArea("FckEditor1", "Some Value", new { @name="FckEditor1" })%>
<input type="submit" value="提交" />
<% } %>
<p>
</p>
<script type="text/javascript">
window.onload = function() {
var sBasePath = '<%= Url.Content("~/Content/fckeditor/") %>';
var oFCKeditor = new FCKeditor('FckEditor1');
oFCKeditor.BasePath = sBasePath;
oFCKeditor.ReplaceTextarea();
}
</script>
Controller:
2 [ValidateInput(false)]
3 public ActionResult Test(string FckEditor1)
4 {
5 this.ValidateRequest = false;
6 return Content(FckEditor1);
7 }
8 public ActionResult Test()
9 {
10 return View();
11 }
这里要注意[ValidateInput(false)]特性,它的目的是为了防止在提交时报“检测到有潜在危险的客户端输入值”,另外这里还有个奇怪的现象就是这个View不能在Index.aspx中,在Index.aspx即使使用了[ValidateInput(false)]特性还是会报错,换个新View就没这个问题了,不知道为什么?
2、Helper版
为了让大家使用的更简单,我写了个Helper版,大家参考下:
2 using System.Web;
3 using System.Web.Mvc;
4 using System.Web.Mvc.Html;
5 using System.Text;
6 using System.Web.Routing;
7 using System.Collections.Generic;
8 public static class Extension
9 {
10 public static string FckEditor(this HtmlHelper htmlHelper, string sBasePath,string textName,object values)
11 {
12 StringBuilder sb = new StringBuilder();
13 sb.AppendLine("<script type=\"text/javascript\">");
14 sb.AppendLine("window.onload = function() {");
15 sb.AppendLine("var sBasePath = '" + sBasePath+"'");
16
17 sb.AppendLine("var oFCKeditor = new FCKeditor('"+textName+"');");
18 sb.AppendLine(" oFCKeditor.BasePath = sBasePath;");
19 sb.AppendLine("oFCKeditor.ReplaceTextarea();");
20 sb.AppendLine(" }");
21 sb.AppendLine(" </script>");
22 TagBuilder tagBuilder = new TagBuilder("textarea");
23 RouteValueDictionary rd = new RouteValueDictionary(values);
24 tagBuilder.GenerateId(textName);
25 tagBuilder.MergeAttributes(rd);
26 return tagBuilder.ToString()+sb.ToString();
27
28 }
29 }
View:
<%=Html.FckEditor(Url.Content("~/Content/fckeditor/"), "lfm", new { x = "x" })%>
二、CKEditor使用
1、CKEditor在ASP.NET MVC中的应用:
首先到http://ckeditor.com/download下载CKEditor。
CKEditor在ASP.NET MVC的使用就相当的简单了,只需要在脚本中执行CKEDITOR.replace(id);id为你需要拥有编辑功能的textarea的id。
View:
<% using (Html.BeginForm())
{ %>
<%= Html.TextArea("ckEditor1", "Some Value", new { @name="ckEditor1" })%>
<input type="submit" value="提交" />
<% } %>
<p>
</p>
<script type="text/javascript">
CKEDITOR.replace('ckEditor1');
</script>
结果:
2、CKEditor配置:
CKEditor配置也很容易, 使用CKEDITOR.replace方法,根据不同的参数来应用不同的配置,例如
CKEDITOR.replace( 'editor2',
{
extraPlugins : 'uicolor',
uiColor: '#14B8C4',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
} );
</script>
得到的结果:
其他配置可以参考官方文档。同时_samples文件夹中也有大量例子可供参考。
3、CKEditor瘦身:
如果你觉得整个编辑器太大,你可以删除文件。
例如把_samples、_source、文件夹删除,进入lang文件目录,保留en.js、zh.js、zh-cn.js三个文件,其余的语言文件如果你用不到,可以删除。
三、参考
http://www.ff-bb.cn/logs/46479725.html
http://www.codeproject.com/KB/aspnet/fckeditor.aspx
我的ASP.NET MVC实践系列
ASP.NET MVC实践系列1-UrlRouting
ASP.NET MVC实践系列2-简单应用
ASP.NET MVC实践系列3-服务器端数据验证
ASP.NET MVC实践系列4-Ajax应用
ASP.NET MVC实践系列5-结合jQuery
ASP.NET MVC实践系列6-Grid实现(上)
ASP.NET MVC实践系列7-Grid实现(下-利用Contrib实现)
ASP.NET MVC实践系列8-对查询后分页处理的解决方案
ASP.NET MVC实践系列9-filter原理与实践
ASP.NET MVC实践系列10-单元测试
其他:
在ASP.NET MVC中对表进行通用的增删改
ASP.NET MVC实践系列11-FCKEditor和CKEditor的使用相关推荐
- ASP.NET MVC实践系列9-filter原理与实践
filter实际上是一个特性(attribute),它提供了一种向controller 或 action中添加某些任务的方法,当controller 或 action被调用时,会触发filter中定义 ...
- ASP.NET MVC实践系列6-Grid实现(上)
ASP.NET MVC中不推荐使用webform的控件了,也就是说当希望列表显示数据时不能使用GridView了,很多开源软件为ASP.NET MVC实现了列表的解决方案,这些具体的解决方案我们放到下 ...
- ASP.NET MVC实践系列1-UrlRouting
为了调研ASP.NET MVC是否适合在公司项目中应用,研究了一段时间.感觉网上资料中讲实践的比较少,我在这里总结一下以备以后查用. ASP.NET MVC 包含了一个强大的URL路由引擎,它允许我们 ...
- ASP.NET MVC实践系列5-结合jQuery
现在做web开发肯定都听说过jQuery,jQuery在ASP.NET MVC被支持的很好,而且据说vs2010中也会集成进去,所以使用ASP.NET MVC了解jQuery肯定有莫大的好处,所以这里 ...
- mvc ajax helpers,ASP.NET MVC 实践系列4-Ajax应用
ASP.NET MVC中支持Ajax的方式和webform中有些区别,没有了updatepanel,所以对于初学者来说在最开始应用时似乎没有在webform中简单,但实际使用上更为灵活而跟webfor ...
- ASP.NET MVC Framework 系列
序言 做为设计模式的王者,MVC在众多领域都成为良好的模型的代名词,从前在ASP.NET下我们只能依靠Monorail来实现ASP.NET下无控件的MVC,但是现在ASP.NET 下的MVC已经成为现 ...
- ASP.NET MVC 入门系列教程
一个居于ASP.NET MVC Beta的系列入门文章,有朋友提议说写一个示例程序来同步讲解,那样更加容易学习.所以就写选择了写一个Blog程序来作为示例程序.(原来是居于ASP.NET MVC Pr ...
- Scott的ASP.net MVC框架系列文章之四:处理表单数据(2)
前几周我发表了一系列文章介绍我们正在研究的ASP.NET MVC框架.ASP.NET MVC框架为你提供了一种新的开发Web应用程序的途径,这种途径可以让应用程序变得更加层次清晰,而且更加有利于对代码 ...
- ASP.NET MVC学习系列(一)-WebAPI初探
由于即将要接手的新项目计划用ASP.NET MVC3来开发,所以最近一段时间一直在看相关的书或文章.因为之前在大学里也曾学习过MVC2开发,也做过几个简单的MVC2的小型测试项目,不过在后来工作以后主 ...
最新文章
- 云计算技术 — Kubernetes v.s. OpenShift
- oracle动态 returning,oracle returning
- SpringCloud-Eureka-ProviderConsumer
- VBS脚本获取安全标识符SID(Security Identifiers)的方法
- [js] 在不支持js的浏览器中如何隐藏JavaScript代码?
- jquery与php数据传输,【网页制作-jquery, php】key-value 网页书签(php与js之间的数据传递)...
- Flink 有状态计算的状态容错
- 如何用java实现使用电子邮件控制你的电脑
- php mysql_fetch_array 函数大全,深入探讨PHP mysql_fetch_array()函数
- Vue设置页面的title
- JS AES加密解密实现
- 解决安装闪退打不开问题,Sketch v84 Mac中文版已更新。支持M1intel处理器,支持monterey最新系统
- 泛微e9隐藏明细表_泛微Ecology权限整理大全相当全要点
- 企业erp系统对企业预算和采购环节的作用
- 浏览器默认主页被篡改(chrome,IE)
- FPGA开发中常见报错或警告汇总
- oracle统计每日归档大小,归档大小日志计算
- jQuery邮票人 --> 案例
- hive的beeline使用
- android图片消失动画效果,用setAnimationStyle来设置popwindow显示消失的动画效果