欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-02 07:53:12
在开始之前,感性的认知一下ckeditor源码的组织形式是很有用的. ckeditor固有的一些文件被组织到ckeditor\_source目录里. 核心的功能,诸如dom...

在开始之前,感性的认知一下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",输入以下代码:

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",输入如下代码:

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",找到

fullpage:false,height:200,plugins:'about,basicstyles

然后在"about"后面增加"date",这里就变成

plugins:'about,date,basicstyles

继续查找"about",找到

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 前面增加

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",你可以加在你想要的位置,例如

['maximize','showblocks','-','date']

5、进入"ckeditor\lang",在"zh-cn.js"中增加"date:'日期插件'"。

,date:{toolbar: '日期控件'}, link: { toolbar: '插入/编辑超链接', other: '<其他>', 

6、对ckeditor的修改已经ok了。

当然了,显示ckeditor的工具栏时,也可以配置:打开config.js

/*
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)
  ];


};

实例图片:

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

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

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