ckeditor详解
源网页编辑软件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详解的更多相关文章
- WordPress代码高亮插件SyntaxHighlighter终极使用详解
子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...
- 【转】gitlab CI流水线配置文件.gitlab-ci.yml详解
目录 GitLab CI流水线配置文件.gitlab-ci.yml详解 实验环境 GitLab CI介绍 .gitlab-ci.yml 配置参数 参数详解 script image services ...
- Linq之旅：Linq入门详解（Linq to Objects）
示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...
- 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）
一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...
- EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解
前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...
- Java 字符串格式化详解
Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...
- Android Notification 详解（一）——基本操作
Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...
- Android Notification 详解——基本操作
Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...
- Git初探--笔记整理和Git命令详解
几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...
随机推荐
- C语言实现OOP 版本2
写版本2的原因,还是发现在不同的具体图形模块里发现了重复的release代码,这是坏味道,所以还是决定消除这些重复代码,DRY! shape.h #ifndef SHAPE_H #define SHA ...
- The Contiki build system 编译系统
The Contiki build system======================== The Contiki build system is designed to make it eas ...
- easyhadoop初识以及各种问题
版本:easyhadoop 1.2.1,操作系统:Centos 6.4: 首先,我要说的是要用对版本,这点很重要.我使用ubuntu12.04 64bit 的虚拟机是不行的,安装直接报错.所以就下载了 ...
- hdu 5430 Reflect （数学推导题）
Problem Description We send a light from one point on a mirror material circle,it reflects N times a ...
- Pure Css 菜单的使用
本人新手,之前偶尔接触Bootstrap,也做过一些响应式开发,但是都是略显皮毛,公司的业务需求也限制了深入学习. 现着手Pure Css学习,尝试了简单的左边菜单自动隐藏的demo.闲话少说,代码贴 ...
- All X（思维）
All X Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Subm ...
- 编码规范(CSS)
code { font-family: "PT Mono", Menlo, "Courier New", monospace; padding: 2px 4px ...
- HashMap的使用方法及注意事项
99.Map(映射):Map 的keySet()方法会返回 key 的集合,因为 Map 的键是不能重复的,因此 keySet()方法的返回类型是 Set:而 Map 的值是可以重复的,因此 valu ...
- 一、cocos2dx概念简介
cocos2dx概念介绍 1)scene,继承自CCScene 场景,一个游戏运行期间的显示界面,一个应用里面可以有多个场景,但是每次只能有一个是激活状态,也可以理解为一次只能显示一个界面. 例如,你 ...
- [HeadFirst-HTMLCSS入门][第十一章布局排版]
流 浮动布局 冻结布局 凝胶布局 绝对布局 表格显示布局 postion 绝对 静态 固定 相对 浮动元素 必须指明宽度 解决重合 中缝 设置外边距留中缝,好看一点 clear标签 不准左右有浮动元素 ...