ckeditor 4.x toolbar 工具栏按钮配置方法
发布于 2015-01-04 09:43:02 | 5142 次阅读 | 评论: 0 | 来源: PHPERZ
这里有新鲜出炉的CKEditor 4 开发人员指南，程序狗速度看过来！
CKEditor网页编辑器
CKEditor 即 FCKEDITOR 。FCKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了FCKeditor。
本文为大家讲解的是ckeditor 4 工具栏toolbar的配置方法，交大家如何自定义按钮，感兴趣的同学参考下。
CKEditor 即 FCKEDITOR 。FCKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了FCKeditor。
要想自定义ckeditor 4的工具栏，必须要下载full版本的 而不是stander版本(官方给提供了三个以经配置好的版本：基础版，标准版和完整版)。
你可以在ckeditor\samples\plugins\toolbar 目录下方找到官方说明
官方说明有2种方式1,toolbar ;2,toolbargroup 本文我们为大家讲解的是toolbar方式
配置自定义工具栏有二种方式，一种是在ckeditor的根目录config.js里配置。
另一种直接在调用ckeditor的下面定义，本文为将为大家分别讲解这二种配置方式，关于ckeditor 4的调用方式见：ckeditor 4调用方式
1，config.js配置方式
在ckeditor的根目录找到config.js，以下提供的示例是一个典型的配置示例：
config.toolbar = [
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo', 'Bold', 'Italic',"Image","Format","FontSize","TextColor" ,"Link" ,"Unlink","CodeSnippet"]
效果如图
2,在ckeditor的调用地方用CKEDITOR.replace语法定义
示例如下
<textarea name="body" id="body" class="ckeditor"></textarea>
<script>
CKEDITOR.replace( 'body', { toolbar: [
{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], // Defines toolbar group without name.
'/', // Line break - next group will be placed in new line.
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
]
});
</script>
效果如下
