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变成华丽的编辑器 所谓一复制,一拖,一换就大功告成 但 ...
随机推荐
- PING的原理以及ICMP协议
主要内容: 1.ping的原理以及工作过程 2.ICMP协议 3.ICMP的应用:ping,traceroute 1.ping的原理以及工作过程 ping的原理 ping 程序是用来探测主机到主机 ...
- 使用jQuery-AJAX–读取获得跨域JSONP数据的示例
在项目开发中,如果在同一个域名下就不存在跨域情况,使用$.getJSON()即可实现.但是需要跨域请求其他域名下面的Json数据就需要JSONP的方式去请求,跨域写法和getJSON有差异.如下: ...
- 升级xcode时更换appid账户
转自:http://blog.csdn.net/zhuzhihai1988/article/details/39803743 为了免下载安装Xcode,安装时使用了别人提供的Xcode.dmg安装,而 ...
- How can I terminate a thread that has a seperate message loop?
http://www.techques.com/question/1-10415481/How-can-I-terminate-a-thread-that-has-a-seperate-message ...
- 推荐大家使用的CSS书写规范及顺序
@设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...
- 转换到 COFF 期间失败: 文件无效或损坏 解决方法
转自csdn 终极解决方案:VS2010在经历一些更新后,建立Win32 Console Project时会出“error LNK1123” 错误,解决方案为将 项目|项目属性|配置属性|清单工具|输 ...
- 64位ubuntu下装32位软件
本帖最后由 wuy069 于 2013-10-25 12:28 编辑 很多软件只有32位的,有的依赖32位库还挺严重的:从ubuntu 13.10已经废弃了ia32-libs,但可以使用多架构,安装软 ...
- pjsip视频通信开发(上层应用)之EditText重写
我们经常使用手机的打电话功能,当我们按键盘的时候,有一个地方显示我们按键的内容,当我们的手点击那个地方的时候,并没有弹出软件盘,所以我们再有数字键盘的时候,要屏蔽系统的软件盘. 我们分析一下,软件盘弹 ...
- 一个小巧的C++Log输出到文件类 （转）
http://blog.csdn.net/dpsying/article/details/17122739 有时候需要输出一些程序运行的信息,供我们不需要调试就可以直接查看程序运行状态.所以我们需 ...
- mysql中自己定义函数编程
语法: 新建: Create function function_name(參数列表)returns返回值类型 函数体 函数名,应该合法的标识符,而且不应该与已有的keyword冲突. 一个函数应该属 ...