源网页编辑软件FCKEditor在09年发布更新到3.0,并改名为CKEditor。改进后的ckeditor更加模块话,配置更加灵活,和以前的fckeditor使用方式上也有所不同。在我的mvc项目中由于要用到 ckeditor,特意研究了下它的使用方法,写下来和大家分享。

我用的是最新版本的:ckeditor_3.0.1  下载地址:http://ckeditor.com/

下载后直接解压得到ckeditor文件夹,包括如下内容:

其中sample为例子,source为源文件,为了减少editor的体积,直接删除。然后将整个文件夹直接拷贝到网站的根目录下.

在你需要使用editor控件的页面头部添加:

<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>
在页面相应位置上添加:
<textarea name="editor1"></textarea>
<script type="text/javascript"> window.onload = function() { CKEDITOR.replace( 'editor1' ); }; </script>  注意:js代码一定要写在textarea后 其实可以这样理解editor控件只是对textarea做了一个漂亮的包装,我们的输入其实都在上面的texarea中,最终也是通过textarea 提交到服务器端。
知道这些,服务器端代码就太简单了: [AcceptVerbs(HttpVerbs.Post)] [ValidateInput(false)] public ActionResult Create(FormCollection collection) { blog.Content = collection["editor1"]; 。。。 } collection["editor1"]即可取得editor中的输入。这里需要注意的是由于textarea中有特殊字符,出于 安全原因,默认情况mvc框架不允许提交的,应在相应方法上加上[ValidateInput(false)]属性。效果如下:

还是相当不错的。
新的editor中去除了上传功能,也就是说我们不能通过上传插入图片、flash了。如图:editor中的插入图片对话框并没有提供上传功能:
幸好有个插件ckfinder可以辅助我们完成以下功能,插件的下载地址同样在 http://ckeditor.com/  最新版本:ckfinder_aspnet_1.4.1.1 解压后,得到一个名为ckfinder的文件夹,同样删除掉source、sample目录(原因同上),拷贝到网站根目录下。如图:
注意:这里还有些配置必须要做:
  • 把文件夹中的bin目录下的dll文件添加到网站的引用中,防止出现找不到类的错误。
  • 打开config.ascx,修改public override bool CheckAuthentication()     {        reture false;//改为return true;     }此处修改是为了有权限上传。
接下来就要把ckfinder集成到ckeditor中了,代码如下:  var editor = CKEDITOR.replace('editor1');  CKFinder.SetupCKEditor(editor, '/ckfinder/');
当然,在页面相应位置引用script代码是必不可少的。 <script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
好了,最后一步了,由于ckfinder不是免费的,所以默认情况下会在上传页面中有红色的广告提示,虽然不影响使用,但总是觉得 不爽。 去除方法如下:找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js,将其中的en.call(window,qo);    代码注释或直接删除。
至此我们的ckfinder全部配置完毕,运行效果如下:
补充: 要自己配置eidtor的外观,可打开eidtor文件夹下的:config.js文件进行配置。 CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E';
// config.width = 200; }; 此处配置是针对网站中所有页面的editor,如单个页面需要单独配置,直接在页面中写配置代码,示例如下: CKEDITOR.config.height = 400;

ckeditor详解的更多相关文章

  1. WordPress代码高亮插件SyntaxHighlighter终极使用详解

    子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...

  2. 【转】gitlab CI流水线配置文件.gitlab-ci.yml详解

    目录 GitLab CI流水线配置文件.gitlab-ci.yml详解 实验环境 GitLab CI介绍 .gitlab-ci.yml 配置参数 参数详解 script image services ...

  3. Linq之旅:Linq入门详解(Linq to Objects)

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

  4. 架构设计:远程调用服务架构设计及zookeeper技术详解(下篇)

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

  5. EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解

    前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...

  6. Java 字符串格式化详解

    Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...

  7. Android Notification 详解(一)——基本操作

    Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...

  8. Android Notification 详解——基本操作

    Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...

  9. Git初探--笔记整理和Git命令详解

    几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...

随机推荐

  1. 安装 adobe flash player

    安装方法:     1. 下载Adobe Flash Player:        http://fpdownload.macromedia.com/get/flashplayer/pdc/11.2. ...

  2. OC和C语言的混编注意点和好处

    苹果的Objective-C编译器批准用户在统一个源文件里自由地混杂利用C++和Objective-C,混编后的语言叫Objective-C++.有了它,你就能够在Objective-C利用过程中利用 ...

  3. LeetCode_Search a 2D Matrix

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  4. Flash型单片机的加密与解密

    厂商利用单片机进行产品开发时,都会关心其代码和数据的保密性.考虑到用户在编写和调试代码时所付出的时间和精力,代码的成本是不言而喻的.    早期的单片机,代码是交给芯片制造商制成掩膜ROM.有两种加密 ...

  5. 《Programming WPF》翻译 第5章 1.不使用样式

    原文:<Programming WPF>翻译 第5章 1.不使用样式 作为一个样式如何使其在WPF使用的例子,,让我们看一下TTT简单的实现,如示例5-1. 示例5-1 <!-- W ...

  6. MVC后台绑定dropdownList

     public ActionResult Index()         {             List<SelectListItem> items = new List<Se ...

  7. 软硬结合的可穿戴式app

    可穿戴设备已经非常的火热了,各种手环.手表之类的硬件设备已经层出不穷,并且功能也已经越发强大,从简单的运动.心率追踪,到现在的血糖.心电图监测,“量化自我”的愿景似乎已经变得越来越明朗,但也正是在这样 ...

  8. OpenStack术语名词及问题调试

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAEkCAIAAAA3pAtBAAAgAElEQVR4nOy953tUx7o9uCrt2EmtHB

  9. VBA清除Excelpassword保护,2003/2007/2010均适用

    Sub Macro1() ' ' Breaks worksheet and workbook structure passwords. Jason S ' probably originator of ...

  10. hdu 5071 Chat(模拟|Splay)

    Chat Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Total Sub ...