注：使用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. （剑指Offer）面试题17：合并两个排序的链表

    题目: 输入两个递增排序的链表,合并这两个链表并使新链表中的结点仍然时按照递增排序的. 链表结点定义如下: struct ListNode{ int val; ListNode* next; }; 思 ...

  2. jqGrid初次使用遇到的问题及解决方法

    问题一:初始化定义翻页用的导航栏时,表中出现"undefined"方框: 解决:需要导入grid.locale-cn.js文件. 问题二:页面只有一页,无法翻页: 解决:初始化设置 ...

  3. CSS hack 和 IE浏览器条件判断 集中汇总

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-16) 未完待续 css hack ie 浏览器判断语句 360大多数网页的各浏览器兼容方法: <!DOCTYPE h ...

  4. PL/pgSQL学习笔记之十一

    http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 39.3.4. Row 类型 name table_name%R ...

  5. Codeforces Round #253 (Div. 1) A. Borya and Hanabi 暴力

    A. Borya and Hanabi Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/442/p ...

  6. hdu 4597 Play Game 区间dp

    Play Game Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=459 ...

  7. Shell脚本[运算表达式,条件控制语句]

    #!/bin/bash #你值得收藏的四则表达式运算. val1=1 val2=1 val3=1 val4=1 val5=1 val6=1 val7=1 let val1++ ((val2++)) v ...

  8. 设备\Device\Harddisk1\DR1 有一个不对的区块

    近期遇到一个windows上的Oracle DB system表空间有问题.然后第一个反应就是查看windows的日志查看器,确实发现了报错: 设备\Device\Harddisk1\DR1 有一个不 ...

  9. Swift2.0 中的String（二）：基本操作

    Swift中的字符串,第二篇,基本操作.其他的几篇传送门(GitHub打不开链接的同学请自行把地址github改成gitcafe,或者直接去归档里找:-P): Swift2.0 中的String(一) ...

  10. 疑难杂症：org.hibernate.MappingException: Unknown entity，annotation配置Entity类报错

    引言: 夜声人静,外面下着稀里哗啦的雨,周末的晚上,还在键盘上舞动手指. 此刻很感激一个人一篇随笔,感谢xiaochao以及他的<org.hibernate.MappingException: ...