CKEditor配置及使用
注：使用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原有的数据，个人认为，实在不应该，这里不对其进行介绍。有兴趣的可以自己研究。
CKEditor工具栏配置
方法一：使用工具栏配置程序，通过界面操作自动生成，配置程序在ckeditor下的sample文件夹内，点击index.html即可启动
也可以点击上方的Basic-Advanced开关按钮进行生成配置：
config.toolbar = [
[ 'Source' ],
[ 'Cut', 'Undo' ]
];
关于图片上传的问题
当在使用CKEditor的时候，即使我们的工具栏中有图片上传的工具，但打开的时候却没有上传的页签，只有一个图片详细信息的页面
这个是因为我们没有配置图片上传路径所导致的，即没有配置filebrowserImageUploadUrl，加上这个配置就会出现其他的页签
关于CKEditor赋值问题
<textarea id='editor'>Test Data</textarea>
解决方式二：
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);
解决方式三：
var waitCKEditorReady = function(data) {
if(CKEditor.status == 'ready') {
CKEditor.setData(data);
} else {
setTimeout(function() {
waitCKEditorReady(data);
}, 20);
}
}
setTimeout(function() {
waitCKEditorReady('Test Data');
}, 50);
网络上对于以上提出的一些问题，处理方式大都是直接去修改部分CKEditor的源码。个人认为，这虽然也是一种方式，但却不是好的做法，较好的做法应该是根据现有的资源在不改动源码的前提下对CKEditor进行更改，或者写个自己的插件对CKEditor进行拓展。而这也不该仅仅局限于CKEditor，而该是对所有的库进行这样的做法。
以上为本人对于CKEditor使用的粗浅见解，有错漏之处敬请指出，共同探讨！
CKEditor配置及使用的更多相关文章
- CKeditor 配置使用
CKeditor 配置使用 一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js<script type="text/javascrip ...
- MVC5富文本编辑器CKEditor配置CKFinder
富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- 富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
- ckeditor、ckeditor配置--整合
1.将ckeditor和ckfinder文件夹拷入项目文件夹中,刷新项目. 2.ckfinder把文件夹中的bin目录下的dll文件(CKFinder.dll)添加到网站的引用中,防止出现找不到类的错 ...
- Ckeditor配置
配置参考文档,主要将ckeditor中的(adapters.images.lang.plugins.skins.themes.ckeditor.js.config.js.contents.css)解压 ...
- 富文本编辑器 CKeditor 配置使用 （带附件）
Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...
- 富文本编辑器 CKeditor 配置使用
作者:Tyler Ning出处:http://www.cnblogs.com/tylerdonet/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
- struts2+ckeditor配置图片上传
又是一个漫漫长夜. 公司的编辑器坏了,用的是百度编辑器,上传图片的网址被框架给拦截了,我们本地怎么测试都没问题,放到服务器就这样了.和老李找了半天,疯了,没原因的. 笔者以前用过jsp+ckedito ...
- CKEditor+SWFUpload实现功能较为强大的编辑器（一）---CKEditor配置
CKEditor爆表的强大功能大家都有目共睹,号称最强大的在线编辑器,只要将文件复制到项目中,在添加引用,在一句代码就可以将普通的textarea变成华丽的编辑器 所谓一复制,一拖,一换就大功告成 但 ...
随机推荐
- （剑指Offer）面试题27：二叉搜索树与双向链表
题目: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 二叉树的定义如下: struct TreeNode{ int val; Tr ...
- Flex XML
一.创建XML类 1.把字符串对象转换为XML: var xmlStr:String="<students><student><name>吕布</n ...
- 10.关联（Association）
关联关系是类与类之间最常用的一种关系,它是一种结构化关系,用于表示一类对象与另一类对象之间有联系.它体现的是两个类.或者类与接口之间语义级别的一种强依赖关系,比如我和我的朋友.这种关系比依赖更强.不存 ...
- HDU 4278 Faulty Odometer 8进制转10进制
Faulty Odometer Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...
- A. Fox and Box Accumulation
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
- LuaFileSystem学习心得
LuaFileSystem(简称lfs)是一个用于lua进行文件訪问的库,和Lua版本号同步.且是跨平台的,在为lua安装lfs之前须要先安装luarocks, luarocks是一个用于安装lua库 ...
- SQL Server事务日志介绍
SQL Server中的数据库都是由一或多个数据文件以及一或多个事务日志文件组成的. 顾名思意,数据文件主要存储数据库的数据,包括数据库内容结构,数据页,索引页等等.那么事务日志到底是干什么的呢?它主 ...
- LINUX 内存结构
1.页框管理 Linux采用4KB页框大小作为标准的内存分配单元.内核必须记录每个页框的状态,这种状态信息保存在一个类型为page的页描述符中,所有的页描述存放在mem_map中.virt_to_pa ...
- 基于jQuery的宽屏可左右切换的焦点图插件
之前分享了很多实用的jQuery焦点图插件,大家可以看看.今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片.效果图如下: 在线预览 源码 ...
- php连接数据库时候的字符集设置
最好的办法:设置mysql服务器的字符集,当然也可以通过mysql提供的api来设置运行时的字符集 Ideally a proper character set will be set at the ...