注：使用CKEditor版本为js版本的CKEditor 4，所有配置均参考自CKEditor官方API：http://docs.ckeditor.com/，以及实践经验

一、快速使用

1、引入CKEditor的js文件

// 当此文件载入完毕之后，CKEditor的JavaScript API就已准备就绪，可以使用

<script src="ckeditor/ckeditor.js"></script>

2、页面中使用CKEditor

// 在需要使用编辑器的地方插入textarea标签

<textarea name="editor" id="editor"></textarea>

CKEDITOR.replace('editor');

具体示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Learning CKEditor</title>

 </head>

 <body>

   <textarea name="editor" id="editor" cols="30" rows="10"></textarea>

   <script type="text/javascript" src="ckeditor/ckeditor.js"></script>

   <script type="text/javascript">

     CKEDITOR.replace('editor');

   </script>

 </body>

 </html>

二、CKEditor的配置

配置方法一：

使用CKEditor提供的config.js文件，文件所在目录跟ckeditor.js的文件在同一目录下：

 // 直接将配置内容写在function函数内即可

 CKEDITOR.editorConfig = function( config ) {

   config.uiColor = '#f1e4db';

   config.height = 200;

   config.removePlugins = 'elementspath,resize'; // 移除编辑器底部状态栏显示的元素路径和调整编辑器大小的按钮

   config.allowedContent = false; // 是否允许使用源码模式进行编辑

   config.forcePasteAsPlainText = true; // 是否强制复制过来的文字去除格式

   config.enterMode = CKEDITOR.ENTER_BR; // 编辑器中回车产生的标签CKEDITOR.ENTER_BR(<br>),CKEDITOR.ENTER_P(<p>),CKEDITOR_ENTER(回车)

   // 设置快捷键

   // 用于实现Ctrl + V进行粘贴

   // 无此配置，无法进行快捷键粘贴

   config.keystrokes = [

     [CKEDITOR.CTRL + 86 /* V */, 'paste']

   ];

   // 设置快捷键，可能与浏览器冲突plugins/keystrokes/plugin.js

   // 用于实现Ctrl + V进行粘贴

   // 此配置将会启动粘贴之前进行过滤，若无此配置，将会出现粘贴之后才弹出过滤框

   config.blockedKeystrokes = [

     CKEDITOR.CTRL + 86

   ];

   // 图片上传相关

   config.filebrowserImageUploadUrl = './upload'; // 图片上传路径

   config.image_previewText = ' '; // 图片信息面板预览区内容的文字内容，默认显示CKEditor自带的内容

   config.removeDialogTabs = 'image:advanced;image:Link'; // 移除图片上传页面的'高级','链接'页签

 }

配置方法二：

直接在使用CKEditor的地方配置：

// 以对象方式作为配置参数

CKEDITOR.replace('editor', {

  uiColor: '#ffccdd'

});

还有一种配置方式是直接更改CKEditor源码进行配置，这种方式破坏了CKEditor原有的数据，个人认为，实在不应该，这里不对其进行介绍。有兴趣的可以自己研究。

注意：直接在使用的地方进行配置比在config.js文件中配置CKEditor的优先级高，而config.js文件中的配置又比CKEditor的默认配置优先级高，即若这几个地方都有进行配置，则直接在页面配置的参数会覆盖config.js页面的配置，config.js的配置又会覆盖默认配置
另注：未进行配置的项，将使用CKEditor的默认配置
另：还有一些其他的配置方式，有兴趣的可以去官网看看：http://docs.ckeditor.com/#!/guide/dev_configuration

CKEditor工具栏配置

方法一：使用工具栏配置程序，通过界面操作自动生成，配置程序在ckeditor下的sample文件夹内，点击index.html即可启动

可以在界面进行操作，通过界面上方的工具栏来查看生成的配置会将我们的工具栏配置成什么模样。
操作结束之后点击Get toolbar config按钮，即可查看当前配置，程序默认配置如下

也可以点击上方的Basic-Advanced开关按钮进行生成配置：

其中'/'是对工具栏进行换行显示，并且toolbarGroups与toolbar两个的配置选项不太一样，其中toolbarGroups中的groups是CKEditor已经默认分好的组别，放在一起的多个组别之间会自动添加分割线，每个组别有一至多个项，每个项代表一个操作，而toolbar配置中的item则表示的是每一个项，可以通过添加'-'来进行分割。toolbarGroups数组和toolbar数组中的name，则是为了屏幕阅读器而提供的。
以上生成的配置，可以写在config.js也可以直接写在页面上。
如果不想使用配置程序，也可以自己进行编写配置，大致配置可以参考配置程序生成的配置。以下只举例item的另一种书写方式

config.toolbar = [

  [ 'Source' ],

  [ 'Cut', 'Undo' ]

];
不添加name，直接使用数组形式去书写。
注意：item的这种方式toolbar数组内的每个元素都是数组，而之前的方式toolbar和toolbarGroups数组内的每个元素都是一个对象。

关于图片上传的问题

当在使用CKEditor的时候，即使我们的工具栏中有图片上传的工具，但打开的时候却没有上传的页签，只有一个图片详细信息的页面

这个是因为我们没有配置图片上传路径所导致的，即没有配置filebrowserImageUploadUrl，加上这个配置就会出现其他的页签

变成了四个页签，上传页签也出来了，通过config.removeDialogTabs = 'image:advanced;image:Link';配置，可以移除链接也高级两个页签
注：CKEditor中的图片上传使用到了JSONP跨域传输

关于CKEditor赋值问题

在CKEditor中，若要为CKEditor赋值，可以使用.setData('user data')方法。
BUT，这有个问题，若我是在页面一打开的时候就对CKEditor进行赋值，这会不会导致什么问题呢？答案是会的，因为CKEditor不一定已经准备就绪可以对其进行操作。
解决方式一：
可以直接将值写在<textarea>标签中
<textarea id='editor'>Test Data</textarea>

解决方式二：

使用CKEditor的instanceReady事件
在初始化CKEditor的时候，将CKEditor存储下来，之后添加instanceReady事件

CKEditor = CKEDITOR.replace('editor');

// 添加instanceReady事件

CKEditor.on('instanceReady',function(data) {

  CKEditor.setData(data);

}

以上方式能够较好的解决CKEditor的赋值问题

BUT，方式二还是会出现问题：instanceReady事件只会触发一次，那就是在CKEditor实例创建完毕之后便触发，若我是在实例创建之后的一段时间，即是在事件触发时间之后才对其进行赋值，那么赋值一样会失败，事件触发的时候，data数据是空的。

那这时候应该怎么办呢？将instanceReady事件和.setData()方法直接结合起来使用，像这样

 // 添加instanceReady事件

 CKEditor.on('instanceReady',function(data) {

   CKEditor.setData(data);

 }

 CKEditor.setData(data);
以上这种方法也是一种方式，不过，这样看起来太low了点。
那么，我们换种方式

解决方式三：

CKEditor中有个状态属性status，这个属性就可以被我们拿来使用了
CKEditor处于不同的阶段，status就有不同的值，总共有四个值：unloaded, loaded, ready, destroyed
而我们需要用到的就是ready状态值

 var waitCKEditorReady = function(data) {

   if(CKEditor.status == 'ready') {

     CKEditor.setData(data);

   } else {

     setTimeout(function() {

       waitCKEditorReady(data);

     }, 20);

   }

 }

 setTimeout(function() {

   waitCKEditorReady('Test Data');

 }, 50);
以上这种方法，可以很好的解决之前提到的赋值问题，能够放在ajax的回调中进行使用。
建议：若有可能尽量使用方式一

网络上对于以上提出的一些问题，处理方式大都是直接去修改部分CKEditor的源码。个人认为，这虽然也是一种方式，但却不是好的做法，较好的做法应该是根据现有的资源在不改动源码的前提下对CKEditor进行更改，或者写个自己的插件对CKEditor进行拓展。而这也不该仅仅局限于CKEditor，而该是对所有的库进行这样的做法。

以上为本人对于CKEditor使用的粗浅见解，有错漏之处敬请指出，共同探讨！

CKEditor配置及使用的更多相关文章

  1. CKeditor 配置使用

    CKeditor 配置使用 一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js<script type="text/javascrip ...

  2. MVC5富文本编辑器CKEditor配置CKFinder

    富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  3. 富文本编辑器 CKeditor 配置使用+上传图片

    参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置  ...

  4. ckeditor、ckeditor配置--整合

    1.将ckeditor和ckfinder文件夹拷入项目文件夹中,刷新项目. 2.ckfinder把文件夹中的bin目录下的dll文件(CKFinder.dll)添加到网站的引用中,防止出现找不到类的错 ...

  5. Ckeditor配置

    配置参考文档,主要将ckeditor中的(adapters.images.lang.plugins.skins.themes.ckeditor.js.config.js.contents.css)解压 ...

  6. 富文本编辑器 CKeditor 配置使用 （带附件）

    Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...

  7. 富文本编辑器 CKeditor 配置使用

    作者:Tyler Ning出处:http://www.cnblogs.com/tylerdonet/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...

  8. struts2+ckeditor配置图片上传

    又是一个漫漫长夜. 公司的编辑器坏了,用的是百度编辑器,上传图片的网址被框架给拦截了,我们本地怎么测试都没问题,放到服务器就这样了.和老李找了半天,疯了,没原因的. 笔者以前用过jsp+ckedito ...

  9. CKEditor+SWFUpload实现功能较为强大的编辑器（一）---CKEditor配置

    CKEditor爆表的强大功能大家都有目共睹,号称最强大的在线编辑器,只要将文件复制到项目中,在添加引用,在一句代码就可以将普通的textarea变成华丽的编辑器 所谓一复制,一拖,一换就大功告成 但 ...

随机推荐

  1. SQL SERVER：开窗函数 SUM() OVER() 数据统计中一例使用

    由于前一段时间胃痛,导致博客园博客都停更了一个月左右.近几天,胃病终于稍微有所好转,决定重新写博文. 前几天,有个朋友刚好问到本人有关 SQL 语句,大致是原表有两列,分别为月份.月份销售额,而需要一 ...

  2. wikioi 1083 Cantor表

    题目描述 Description 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 - 2/1 2/ ...

  3. 关于Excel导入的HDR=YES; IMEX=1详解

    于Excel导入的HDR=YES; IMEX=1详解2011年12月27日 星期二 11:17 参数HDR的值:HDR=Yes,这代表第一行是标题,不做为数据使用 ,如果用HDR=NO,则表示第一行不 ...

  4. WPF中的数据模板(DataTemplate)(转)

    原文地址 http://www.cnblogs.com/zhouyinhui/archive/2007/03/30/694388.html WPF中的数据模板(DataTemplate)        ...

  5. Java程序打包成jar包

    方法一:通过jar命令 jar命令的用法: 下面是jar命令的帮助说明: 用法:jar {ctxui}[vfm0Me] [jar-file] [manifest-file] [entry-point] ...

  6. Swift学习笔记十四

    Deinitialization 当类的实例对象即将要被释放时,会立即调用deinitializer,通过deinit关键字来定义deinitializer,和initializer一样,它也只存在于 ...

  7. CodeForces 164A Variable, or There and Back Again 搜索

    Variable, or There and Back Again 题目连接: http://codeforces.com/problemset/problem/164/A Description L ...

  8. Codeforces Good bye 2015 B. New Year and Old Property dfs 数位DP

    B. New Year and Old Property 题目连接: http://www.codeforces.com/contest/611/problem/B Description The y ...

  9. Html Agility Pack基础类介绍及运用

    第一篇只对Html Agility Pack做了一个大概的介绍,在接下来的章节会比较深入的介绍Html Agility Pack. Html Agility Pack 源码中的类大概有28个左右,其实 ...

  10. initrd映像文档的作用和制作

    1.http://pan.baidu.com/s/1dDrGeKL 2.http://wenku.baidu.com/link?url=qPa_jfkEZCbERnwMYWLwm9EZJ_ebMRJA ...