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

网络编程 2024/12/22 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

在开始之前，感性的认知一下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插件开发

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“CKEDITOR二次开发之插件开发方法”

暂无CKEDITOR二次开发之插件开发方法的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

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

CKEDITOR插件开发

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

ckeditor自定义插件使用方法详解

评论“CKEDITOR二次开发之插件开发方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接