最新版CKEditor的配置方法及插件（插件)编写示例

FCKEditor重写了射流研究…框架，并改名为CKEditor。第一次在CKEditor网站上看到演示界面，就被CKEditor友好的界面和强大的功能所震撼。毫无疑问，CKEditor是当前互联网上最优秀的开源多媒体超文本标记语言编辑器。

本文记录配置CKEditor过程，并以文章分页插件为例，简要CKEditor插件编写过程。从官网http://ckeditor.com/download下载最新版CKEditor，解压。

1.调用CKEditor方法

在页面里加载核心射流研究…文件：脚本类型=' text/JAVAScript ' src=' http : cke ditor/cke ditor。js /脚本，按常规方式放置文本区，如：文本区域id=' editor 1 "名称=' editor 1 "行=' 10 '列=' 80 '初始化超文本标记语言内容/textarea然后在文本区域后面写js:脚本类型=' text/JavaScript ' ckeditor。替换('编辑器1 ')；/script

其他调用方式可参考样本(_ s)目录下的示例。

2.配置个性化工具栏

ckeditor默认的工具栏中很多不常用，或者相对中文来说不适用。可通过配置默认工具栏方式实现，最简洁的方法是直接修改配置文件config.js我的config.js内容如下：

凯迪特。editor config=function(config){//在此定义对默认配置的更改。例如：//config。语言=' frconfig . uicolor=' # DDD config . toolbar=' Cmsconfig。toolbar _ Cms=[[[[' Source '，'-']，['Cut '，' Copy '，' PasteText '，' PasteFromWord '，'-']，['Undo '，' Redo '，'-'，' Find '，' Replace '，' RemoveFormat']，['Link '，' Unlink '，' anchorizontalrule '，'-']，['Maximize '，'/'，['Bold '，' Italic '，'下划线，' Strike '-']，['FontSize '，[' textcoloconfig。文件browseruploadurl='/CK finder/core/connector/PHP/connector。PHP？命令=快速上传类型=文件；配置。font size _ size=' 10/10px；12/12px；14/14px；16/16px；18/18px；20/20px；22/22px；24/24px；28/28px；32/32px；48/48px；'；config . extra plugins=' apage }；3.将编辑器内文字修改为14px(默认12px，对中文显示不太好看)

1)可视化编辑里默认字体大小：修改根目录下contents.css将身体中font-size: 12px改为font-size: 14px

2)源代码视图字体大小：修改皮肤\kama\editor.css，在最后加一句：cke _ skin _ kama文本区。cke _ source { font-size :14 px}

4.插件编写流程和实例代码

1) 在插件目录新建文件夹阿帕奇，在阿帕奇下新建文件：plugin.js内容如下：

CKEDITOR.plugins.add('apage '，{ init :函数(编辑器){ //添加链接和取消链接按钮editor.addCommand('apage '，new ckeditor。dialog command(' apage ')；editor.ui.addButton('Page '，{//label : editor。朗。链接。工具栏，标签: "Page '，//icon: 'images/anchor.gif '，命令： ' apage ' })；//CKEDITOR.dialog.add('link '，这个。“路径”对话框/链接。js’)；CKEDITOR.dialog.add('apage '，函数（编辑器){ return { title : '文章分页，minWidth : 350，minHeight : 100，内容： [ { id : 'tab1 '，标签: '第一个标签'，标题： '第一个标签'，元素： [ { id : 'pagetitle '，类型： '文本'，标签: '请输入下一页文章标题br /(不输入默认使用当前标题数字形式)' } ] } ]，onOk :函数(){编辑器。插入html('[page=' this。getvalueof '(选项卡1 '、页面标题')'])；} };} );},需要：['假物件']})；2)在工具栏中加一项页面，并在配置中声明添加扩展插件config.extraPlugins=' apage有两种方法实现，方法一是直接在config.js中添加，示例本文上面的config.js示例代码；方法二：在引用CKEditor的地方加配置参数，如：

CKEDITOR.replace('editor1 '，{ extra plugins : ' examplenlink '，工具栏： [ ['撤消'，'重做'，'-'，'剪切'，'复制'，'粘贴']，['示例链接'，'粗体'，'斜体'，'下划线，]，['Link '，' Unlink '，' Anchor '，'-'，' Source']，[' Page ']})；此时你应该看到编辑器里多了一个空白的按钮了。

解决空白按钮的方法有二：

方法1:修改插件代码，插件，将图标定义为一个存在的图标。

方法2:让编辑显示标签的文字。需要加在放编辑器的页面里加css(注意：cke_button_apage的名称与实际保持一致。)

样式类型='text/css ' .cke_button_apage .cke_icon { display : none！重要；} .cke_button_apage .cke_label { display : inline！重要；}/样式如果你的分页只需要插入一个分页符，不需要像本文需要填写标题，那更简单，只需要修改插件代码即可。请在红麦软件团队维基网上查看本文提到的所有代码：http://www . team wiki.cn/js/ckeditor _ config _ plugin

CKEditor配置及插件编写示例

CKEditor配置

config.js

凯迪特。editor config=function(config){//在此定义对默认配置的更改。例如：//config。语言=' frconfig . uicolor=' # DDD config . toolbar=' Cmsconfig。toolbar _ Cms=[[[[' Source '，'-']，['Cut '，' Copy '，' PasteText '，' PasteFromWord '，'-']，['Undo '，' Redo '，'-'，' Find '，' Replace '，' RemoveFormat']，['Link '，' Unlink '，' anchorizontalrule '，'-']，['Maximize '，'/'，['Bold '，' Italic '，'下划线，' Strike '-']，['FontSize '，[' textcoloconfig。文件browseruploadurl='/CK finder/core/connector/PHP/connector。PHP？命令=快速上传类型=文件；配置。font size _ size=' 10/10px；12/12px；14/14px；16/16px；18/18px；20/20px；22/22px；24/24px；28/28px；32/32px；48/48px；'；config . extra plugins=' apage }；CKEditor分页插件1:到提示输入下一页文章标题

CKEDITOR.plugins.add('apage '，{init :函数(编辑器){//添加链接和取消链接按钮。editor.addCommand('apage '，new ckeditor。dialog command(' apage '))；editor.ui.addButton('Page '，{//label : editor。朗。链接。工具栏，标签: 'Page '，//icon: 'images/anchor.gif '，命令： ' apage ' })；//CKEDITOR.dialog.add('link '，这个。“路径”对话框/链接。js’)；CKEDITOR.dialog.add('apage '，函数（编辑器){return {title : '文章分页，minWidth : 350，minHeight : 100，内容： [{id : 'tab1 '，标签: '第一个标签'，标题： '第一个标签'，元素：[{id : 'pagetitle '，类型： '文本'，标签: '请输入下一页文章标题br /(不输入默认使用当前标题数字形式)' }]}]，onOk :函数(){编辑器。插入html('[page=' this。getvalueof '(选项卡1 '、页面标题')']')；}};} );},需要：['假物件']})；CKEditor分页插件2:直接插入分页符

因为编辑器的默认转码，使用过程中需要将「页面」中的『』去掉。

CKEDITOR.plugins.add('apage '，{ var cmd={ exec : function(editor){ editor }。insert html('[[page]]')；}}init :函数（编辑器){//添加链接和取消链接按钮。editor.addCommand('apage '，cmd)；editor.ui.addButton('Page '，{//label : editor。朗。链接。工具栏，标签: 'Page '，//icon: 'images/anchor.gif '，命令： ' apage ' })；},需要：['假物件']})；