CKEDITOR二次开发之插件开发方法
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
在开始之前,感性的认知一下CKEditor源码的组织形式是很有用的. CKEditor固有的一些文件被组织到ckeditor\_source目录里. 核心的功能,诸如DOM元素操作,事件处理,初始化脚本和一些环境设置被包含在ckeditor\_source\core文件夹内. 而其它的一些功能, 比如格式化,拷贝和粘贴, 图片和链接, 都被实现为插件形式放在ckeditor\_source\plugins文件夹内. 每个文件夹表示一个插件. 并且在每个文件夹内, 有一个plugin.js的文件包含了该插件需要用到的代码.
你可以看到源代码被组织成不同的文件. 为了减少HTTP请求, CKEditor把不同的文件压缩并打包到ckeditor.js和ckeditor_basic.js里。
创建一个日期插件(date)
1、在"ckeditor\plugins\"目录下新建一个"date"目录,然后在"date"目录下新建一个"plugin.js",输入以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 | CKEDITOR.plugins.add( 'date' , { requires: [ 'dialog' ], init: function (a) { var b = a.addCommand( 'date' , new CKEDITOR.dialogCommand( '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、增加"images"目录,放入一个"date.jpg"的图片,当然图片可以从google找一个,16*16的正好。
3、增加"dialogs"目录,新建一个"date.js",输入如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | CKEDITOR.dialog.add( 'date' , function (editor){ var escape = function (value){ return value; }; return { title: '日历控件' , resizable: CKEDITOR.DIALOG_RESIZE_BOTH, minWidth: 300, minHeight: 80, contents: [{ id: 'cb' , name: 'cb' , label: 'cb' , title: 'cb' , elements: [{ type: 'text' , label: '请输入日期控件名称' , id: 'lang' , required: true , },{ type: 'html' , html: '<span>说明:日历控件选择的日期、时间将回填到该输入框中。</span>' }] }], onOk: function (){ lang = this .getValueOf( 'cb' , 'lang' ); editor.insertHtml( "<p>" + lang + "</p>" ); }, onLoad: function (){ } }; }); |
4、接下来就是把插件加入到CKEditor里了,我是直接修改CKEditor插件的核心文件。
找到ckeditor目录下的"ckeditor.js",这里的代码是经过压缩的,我们用CKEditor原来的about插件做参考。查找"about",找到
然后在"about"后面增加"date",这里就变成
继续查找"about",找到
1 | j.add('about',{init:function(l){var m=l.addCommand('about',new a.dialogCommand('about'));m.modes={wysiwyg:1,source:1};m.canUndo=false;l.ui.addButton('About',{label:l.lang.about.title,command:'about'});a.dialog.add('about',this.path+'dialogs/about.js');}}); |
在这个 j 前面增加
1 | j.add('date', {requires: ['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默认的工具栏了,我们在这里加上"date",你可以加在你想要的位置,例如
5、进入"ckeditor\lang",在"zh-cn.js"中增加"date:'日期插件'"。
6、对CKEditor的修改已经OK了。
当然了,显示ckeditor的工具栏时,也可以配置:打开config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.editorConfig = function ( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.toolbar = [ [ 'Source' ], [ 'Cut' , 'Copy' , 'Paste' , 'PasteText' , 'PasteFromWord' , '-' , 'Print' , 'Link' , 'Unlink' , 'Anchor' ], [ 'Undo' , 'Redo' , '-' , 'Find' , 'Replace' , '-' , 'SelectAll' , 'ImageButton' , 'Image' ], [ 'Styles' , 'Format' , 'Font' , 'FontSize' ], [ 'TextColor' , 'BGColor' ], [ 'date' ] //刚创建的日期插件(date) ]; }; |
实例图片:
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
FCKEditor常用Js代码,获取FCK内容,统计FCK字数,向FCK写入指定代码
FCKEditor常用Js代码,获取FCK内容,统计FCK字数,向FCK写入指定代码,使用FCKEditor的朋友可以参考下。增加编辑器的人性化功能。2010-04-04Fckeditor XML Request error:internal server error (500) 解决方法
本文章收藏了关于FCKEditor XML Request Error:Internal Server Error(500)各种问题的解决办法2012-09-09解决SyntaxHighlighter 代码高亮不换行问题的解决方法
用SyntaxHighlighter 语法高亮插件的朋友可能都遇到过代码显示不换行的问题,这个问题在网上也找不到什么解决办法,一直困扰了我很久,今天算是把它解决了,办法其实简单,下面说下如何解决2014-11-11
最新评论