发布于 2015-01-04 09:43:02 | 5150 次阅读 | 评论: 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调用方式
在ckeditor的根目录找到config.js,以下提供的示例是一个典型的配置示例:
config.toolbar = [
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo', 'Bold', 'Italic',"Image","Format","FontSize","TextColor" ,"Link" ,"Unlink","CodeSnippet"]
效果如图
示例如下
<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>
效果如下