CKEDITOR二次开发的插件开发方法

在开始之前，从情感上了解CKEditor源代码的组织形式是非常有用的。CKEditor中固有的一些文件被组织到CKEditor \u source目录中。核心功能如DOM元素操作、事件处理、初始化脚本和一些环境设置都包含在ckeditor \u source \u core文件夹中。其他功能，例如格式化、复制粘贴、图片和链接都是作为插件在文件夹ckeditor \u source \u plugins中实现的。每个文件夹代表一个插件。在每个文件夹中，都有一个plugin.js文件，其中包含插件所需的代码。

您可以看到源代码被组织成不同的文件。为了减少HTTP请求，CKEditor将不同的文件压缩并打包成ckeditor.js和ckeditor_basic.js

创建日期插件(日期)

1.在“ckeditor\plugins”目录下创建一个新的“date”目录，然后在“date”目录下创建一个新的“plugin.js ”,并输入以下代码：

CKEDITOR.plugins.add('date '，{ requires 3360[' dialog ']，init:函数(a) { var b=a.addCommand('date '，new ckeditor . dialog command(' date '))；a.ui.addButton('date '，{ label: a.lang.date.toolbar，command: 'date '，icon : this . path ' images/date . jpg ' })；CKEDITOR.dialog.add('date '，this . path ' dialogs/date . js ')；}});2.添加“图片”目录，放一张“date.jpg”的图片。当然，你可以从谷歌上找到一个，16*16的尺寸刚刚好。

3.添加“dialogs”目录，创建一个新的“date.js”，并输入以下代码：

CKEDITOR.dialog.add('date '，function(editor){ var escape=function(value){返回值；};返回{title:' calendar control '，可调整大小的： ckeditor。dialog _ resize _ both，minwidth : 300，min have : 80，contents 3360 [{id :' CB '，Name:' CB '，label:' CB '，title:' CB '，element: [{type:' text '，label: '，请输入日期控件的名称'，id3360' lang '，required: true。}，{type:' html '，html:' span说明：日历控件选择的日期和时间将被回填到此输入框中。/span' }] }]，onok : function(){ lang=this . getvalueof(' CB '，' lang ')；editor . insert HTMl(' p ' lang '/p ')；}，onLoad:函数(){ } }；});4.下一步是将插件添加到CKEditor中。我正在直接修改CKEditor插件的核心文件。

在ckeditor目录中找到“ckeditor.js”。这里的代码是压缩的。我们借鉴了CKEditor的原始关于插件。寻找“大约”，找到

全页：假，高度：200，插件： '关于，基本样式然后在'关于'后面加上'日期'，就变成了

插件： '关于，日期，基本风格继续搜索'关于'并找到它

j.add('about '，{ init : function(l){ var m=l . addcommand(' about '，new a . dialogcommand(' about '))；m.modes={wysiwyg:1，source :1 }；m.canUndo=falsel.ui.addButton('About '，{label:l.lang.about.title，command : ' About ' })；a.dialog.add('about '，this . path ' dialogs/about . js ')；}});在这个j之前加上

j.add('date '，{ requires 3360[' dialog ']，init : function(l){ l . addcommand(' date '，new a . dialogcommand(' date '))；l.ui.addButton('date '，{label: l.lang.date.toolbar，command: 'date '，icon : this . path ' images/code . jpg ' })；a.dialog.add('date '，this . path ' dialogs/date . js ')；}});接下来，查找‘I . toolbar _ Basic=’，这是CKEditor的默认工具栏。我们在此添加“日期”，您可以将其添加到您想要的位置，例如，

['最大化'，'显示区块'，'-'，'日期'] 5。输入“ckeditor\lang”并在“zh-cn.js”中添加“date:”日期插件。

，date : { toolbar : ' date control ' }，link: {toolbar: '插入/编辑超链接'，other:' others '，6。对控制器的修改是可以的。

当然，在显示ckeditor的工具栏时，也可以配置：打开config.js

/*版权所有2003-2012年，CKSource-Frederico knaben .保留所有权利。有关许可，请参见LICENSE.html或http://ckeditor.com/license*/CKEDITOR.editorConfig=函数（配置){ //在此定义对默认配置的更改。例如：//config。语言=' fr//配置。uicolor=' # AADC6Econfig.toolbar=[ ['Source']，['Cut '，' Copy '，' PasteText '，' PasteFromWord '，'-'，' Print '，' Link '，' Unlink '，' Anchor']，['Undo '，' Redo '，'-'，' Find '，' Replace '，'-'，' SelectAll '，' ImageButton '，' Image']，[' style '，' Format '，' Font '，' FontSize']，['TextColor '，' BGColor']，['date']刚创建的日期插件（日期)];};实例图片：