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

View代码

 <script src="<%= Url.Content("~/Content/fckeditor/fckeditor.js") %>" type="text/javascript"></script>

<% 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:

Controller

 1 [AcceptVerbs(HttpVerbs.Post)]
 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版,大家参考下:

Helper

 1 using System;
 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:

代码

<script src="<%= Url.Content("~/Content/fckeditor/fckeditor.js") %>" type="text/javascript"></script>
     <%=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:

代码

     <script src="<%= Url.Content("~/Content/ckeditor/ckeditor.js") %>" type="text/javascript"></script>

<% 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方法,根据不同的参数来应用不同的配置,例如

代码

<script type="text/javascript">

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的使用相关推荐

  1. ASP.NET MVC实践系列9-filter原理与实践

    filter实际上是一个特性(attribute),它提供了一种向controller 或 action中添加某些任务的方法,当controller 或 action被调用时,会触发filter中定义 ...

  2. ASP.NET MVC实践系列6-Grid实现(上)

    ASP.NET MVC中不推荐使用webform的控件了,也就是说当希望列表显示数据时不能使用GridView了,很多开源软件为ASP.NET MVC实现了列表的解决方案,这些具体的解决方案我们放到下 ...

  3. ASP.NET MVC实践系列1-UrlRouting

    为了调研ASP.NET MVC是否适合在公司项目中应用,研究了一段时间.感觉网上资料中讲实践的比较少,我在这里总结一下以备以后查用. ASP.NET MVC 包含了一个强大的URL路由引擎,它允许我们 ...

  4. ASP.NET MVC实践系列5-结合jQuery

    现在做web开发肯定都听说过jQuery,jQuery在ASP.NET MVC被支持的很好,而且据说vs2010中也会集成进去,所以使用ASP.NET MVC了解jQuery肯定有莫大的好处,所以这里 ...

  5. mvc ajax helpers,ASP.NET MVC 实践系列4-Ajax应用

    ASP.NET MVC中支持Ajax的方式和webform中有些区别,没有了updatepanel,所以对于初学者来说在最开始应用时似乎没有在webform中简单,但实际使用上更为灵活而跟webfor ...

  6. ASP.NET MVC Framework 系列

    序言 做为设计模式的王者,MVC在众多领域都成为良好的模型的代名词,从前在ASP.NET下我们只能依靠Monorail来实现ASP.NET下无控件的MVC,但是现在ASP.NET 下的MVC已经成为现 ...

  7. ASP.NET MVC 入门系列教程

    一个居于ASP.NET MVC Beta的系列入门文章,有朋友提议说写一个示例程序来同步讲解,那样更加容易学习.所以就写选择了写一个Blog程序来作为示例程序.(原来是居于ASP.NET MVC Pr ...

  8. Scott的ASP.net MVC框架系列文章之四:处理表单数据(2)

    前几周我发表了一系列文章介绍我们正在研究的ASP.NET MVC框架.ASP.NET MVC框架为你提供了一种新的开发Web应用程序的途径,这种途径可以让应用程序变得更加层次清晰,而且更加有利于对代码 ...

  9. ASP.NET MVC学习系列(一)-WebAPI初探

    由于即将要接手的新项目计划用ASP.NET MVC3来开发,所以最近一段时间一直在看相关的书或文章.因为之前在大学里也曾学习过MVC2开发,也做过几个简单的MVC2的小型测试项目,不过在后来工作以后主 ...

最新文章

  1. 云计算技术 — Kubernetes v.s. OpenShift
  2. oracle动态 returning,oracle returning
  3. SpringCloud-Eureka-ProviderConsumer
  4. VBS脚本获取安全标识符SID(Security Identifiers)的方法
  5. [js] 在不支持js的浏览器中如何隐藏JavaScript代码?
  6. jquery与php数据传输,【网页制作-jquery, php】key-value 网页书签(php与js之间的数据传递)...
  7. Flink 有状态计算的状态容错
  8. 如何用java实现使用电子邮件控制你的电脑
  9. php mysql_fetch_array 函数大全,深入探讨PHP mysql_fetch_array()函数
  10. Vue设置页面的title
  11. JS AES加密解密实现
  12. 解决安装闪退打不开问题,Sketch v84 Mac中文版已更新。支持M1intel处理器,支持monterey最新系统
  13. 泛微e9隐藏明细表_泛微Ecology权限整理大全相当全要点
  14. 企业erp系统对企业预算和采购环节的作用
  15. 浏览器默认主页被篡改(chrome,IE)
  16. FPGA开发中常见报错或警告汇总
  17. oracle统计每日归档大小,归档大小日志计算
  18. jQuery邮票人 --> 案例
  19. hive的beeline使用
  20. android图片消失动画效果,用setAnimationStyle来设置popwindow显示消失的动画效果

热门文章

  1. 看我如何挖到 Dropbox Windows 版的这个 0day(微补丁发布)
  2. 编程在线--- 网站(IT技术学习、面试、交流)上线了
  3. 《前端十年心路》书稿规划
  4. PHP多进程初探 --- 再次谈daemon进程
  5. 深入理解javascript原型和闭包 1
  6. 听飞狐聊JavaScript设计模式系列11
  7. 使用FileReader对象的readAsDataURL方法来读取图像文件
  8. Linux高性能server规划——多线程编程(在)
  9. 转--linux开启FrameBuffer
  10. 评:我从编程中悟出八个字(不算原创,不过希望让大家能看看)