发布于 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调用方式 

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>

效果如下

另附:CKEditor工具栏toolbar全部按钮名称 



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务