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变成华丽的编辑器 所谓一复制,一拖,一换就大功告成 但 ...
随机推荐
- jquery自定义方法
总结: * jQuery中添加自定义或函数方法1,如 $.fn.extend({'aa':function(){}}) 或 jQuery.fn.aa=function(){}, 这种调用时就得这样,$ ...
- 设置AD用户属性
设置AD用户属性proxyaddresses的值 $test01 = [adsi]"LDAP://cn=test01,ou=oo,ou=admins,dc=ddv,dc=com" ...
- xiaoxia的vim配置
这样已经很强大了 set nu sts=4 ts=4 sw=4 et si ai set ruler set hlsearch syntax on filetype plugin on
- 提升jQuery开发技能的教程
iPhone-like Sliding Headers Simple jQuery Spy Effect Simple use of Event Delegation Adding Keyboard ...
- Java和C++中多态的实现方式
多态是面向对象的最主要的特性之一,是一种方法的动态绑定,实现运行时的类型决定对象的行为.多态的表现形式是父类指针或引用指向子类对象,在这个指针上调用的方法使用子类的实现版本.多态是IOC.模板模式实现 ...
- 如何在 Visual Studio 2012 控制 TFS 版控時要忽略哪些檔案
幾乎在任何一種版本控管的機制裡,都會遇到那些「不應該簽入到版本庫」的潛規則,以往我們在用 SVN 的時候,我就寫過幾篇文章要大家注意這點.最近都改用 TFS 做版控,因為大多使用 Visual Stu ...
- 更换VS2012序列号的方法
转自:http://blog.sina.com.cn/s/blog_58c506600101ja49.html 今天不小心把还在试用期内的VS2012 Ultimate填上盗版Key激活了……找遍了菜 ...
- gamework的使用方法
翻译来源地址:https://github.com/Kadoba/gamework gamework是控制LOVE2D游戏进程流的一个项目. ↑ 这个是按原文译的, 当初乍看完全不懂, 接下来我来用图 ...
- Mybatis-Generator 自动生成Dao、Model、Mapping相关文档
最近在学习mybatis,结果在写Mapping的映射文件时insert语句一直报错,于是想看看标准的映射文件是什么样.百度到Mybatis-Generator 自动生成Dao.Model.Mappi ...
- spark1.2.0编译
spark 有三种编译方式:SBT.MAVEN.make-distribution.sh.SBT.MAVEN两种方式打出来的包比较大,不适合部署使用.因此我们通常使用第三种方式打包. ./make-d ...