手把手教你 CKEDITOR 4 扩展插件制作

本文实例讲述了CKEDITOR 4 扩展插件制作。分享给大家供大家参考,具体如下:

今天让我们来探索一下ckeditor的扩展功能,换句话说就是自定义按钮,以及点击按钮之后实现的功能。

要实现自定义按钮,我们要做几个事情:

  • 1、准备一个图标,最好是16*16大小的png格式图片,你没有的话,姜哥帮你准备了一张。
  • 2、在plugins目录下建立我们和自定义插件同名的目录,并且在里面建立一个叫plugin.js的文件。
  • 3、在我们自己的插件目录中,建立一个dialogs目录,并且在里面新建一个与我们插件同名的js文件,实现插件的功能。

动手!

1、建立相应的文件夹和文件,姜哥在ckeditor/plugins/下新建了一个myplug目录,将来我的插件就叫myplug

2、编辑plugin.js文件,填入以下内容,特别要注意里面的名字前后保持一致,后期运行有问题,多半是名字写错了:

(function(){
  //Section 1 : 按下自定义按钮时执行的代码
  var a= {
    exec:function(editor){
      alert("This a custome button!");
    }
  },
  //Section 2 : 创建自定义按钮、绑定方法
  b='myplug';  //注意myplug名字
  CKEDITOR.plugins.add(b,{
    init:function(editor){
      CKEDITOR.dialog.add('myplugDialog', this.path + 'dialogs/myplug.js'); //注意myplug名字
      editor.addCommand('myplug', new CKEDITOR.dialogCommand('myplugDialog')); //注意myplug名字
      //注意myplug名字 和 图片路径
      editor.ui.addButton('myplug',{
        label:'打开我的插件',
        icon: this.path + 'myplug.png',
        command:b
      });
    }
  });
})();

3、配置config.js中的toolbar,将自定义插件显示出来:

CKEDITOR.editorConfig = function( config ) {
  config.extraPlugins="myplug";  //增加了我们的自定义插件
  config.toolbar = 'Full';
  config.toolbar_Full =
  [
    { name: 'custome_plugin', items : [ 'myplug'] }, //将自定义插件加入toolbar
    { name: 'insert', items : [ 'upload','album','-','Table' ] },
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] },
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','-','Blockquote',
    '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
    { name: 'colors', items : [ 'TextColor','BGColor' ] },
    { name: 'document', items : [ 'Source' ] },
  ];
};

在这里我们只加了两行,一行是config.extraPlugins="myplug";这个向ckeditor注册了我们的自定义插件,告诉ckeditor还有我们的这个myplug这么个东西;另一行是{ name: 'custome_plugin', items : [ 'myplug'] },用来配置toolbar,让ckeditor将我们的按钮显示出来,注意后面的逗号,不要漏了噢。

保存之后,看一下运行效果,图标出来了,可是点击以后一闪而过,那是因为我们还没有开发对应的dialog代码:

注意:如果大家这一步失败了,可以尝试从两个方面排查:

①、前面我一再强调的,名字有没有弄错;
②、也许是文件编码的问题,尝试把所有的中文都删掉,换成英文试试。

4、开发dialogs/myplug.js,实现业务功能

在myplug/dialogs/新建一个叫myplug.js的文件,这个其实和前面一步中,plugin.js文件中的这一行是对应的:

CKEDITOR.dialog.add('myplugDialog', this.path + 'dialogs/myplug.js'); //注意myplug名字

在那个文件中,其实指定了我们dialog文件的目录和文件名,理论上是可以随意的,但是为了容易管理,墙裂建议大家搞成一样的,不要给自己制造麻烦~来看一下,我们要在myplug.js里写什么:

(function () {
    function myplugDialog(editor) {
    return {
      title: 'Who does you want to say hello?', //窗口标题
      minWidth: 300,
      minHeight: 80,
      buttons: [{
        type: 'button',
        id: 'someButtonID',
        label: 'Button',
        onClick: function () {
          alert('This is a custome button');
        }
        //对话框底部的自定义按钮
      },
      CKEDITOR.dialog.okButton, //对话框底部的确定按钮
      CKEDITOR.dialog.cancelButton], //对话框底部的取消按钮
      contents:           //每一个contents在对话框中都是一个tab页
      [
        {
          id: 'user',      //contents的id
          label: 'You name',
          title: 'You name',
          elements:       //定义contents中的内容,我们这里放一个文本框,id是name
          [
            {
              id: 'name',
              type: 'text',
              style: 'width: 50%;',
              label: 'You name',
            }
          ]
        }
      ],
      onLoad: function () {
        //alert('onLoad');
      },
      onShow: function () {
        //alert('onShow');
      },
      onHide: function () {
        //alert('onHide');
      },
      onOk: function () {
        //点击 确定 按钮之后触发的事件
        var name = this.getValueOf( 'user', 'name' );
        //从界面上取值的方法,getValueOf( 'contents的id', '控件的id' )
        editor.insertHtml('<p>' + name + ' : Hello world!' + '</p>');
        //将内容放入到editor
        this.commitContent();
      },
      onCancel: function () {
        //alert('onCancel');
      },
      resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT
    };
  }
  CKEDITOR.dialog.add('myplugDialog', function (editor) {
    return myplugDialog(editor);
  });
})();

在上面这段程序里,我们首先定义了一个myplugDialog,并且给他设置了标题、最小宽度、最小高度,然后又添加了一个tab页,在里面放了一个对话框。在程序的底部,我们把这个对话框注册到ckeditor中去,这样前端点击按钮,才可以调用到这个对话框。

常见错误:

1、名字没有匹配,再次强调一下,这里面myplugDialog千万千万要前后一致,而且,要和plugin.js中的名称一致!

2、中文的问题,如果出现点击没有效果,大家可以首先尝试,将我这段代码中,所有的中文都删掉试试。或者用另外的方法,转换一下编码格式,在Notepad++中,可以这样:

用我标红的两个选项试试看,一般都是可以的,重新保存之后,再次运行:

点击我们的插件后,出来一个对话框,填入我的名字,姜哥,再按确定。

我们填入的内容就被插入到当前光标处了!

好了,今天我们学习了ckeditor的自定义插件,以及插件中内容的交互。内容还是比较多的,大家也可能会碰到各种问题,姜哥再这里再唠叨两句,问题一般都是两种原因引起的:

①、名称前后不一致;
②、中文编码格式引起的乱码。

完整实例代码点击此处本站下载

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript错误与调试技巧总结》、《JavaScript操作XML文件技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • 添加FCKeditor插件需要注意的地方

    于是在上WC之际决定要改造一下编辑器.不过我一般动手之前会google一下,这样往往会很有效果,发现了其实FCKeditor支持插件的,很多插件经过简单的配制就可以使用了.不过这方面讲怎么用插件的资料就很少了(也许我太笨),给你一个插件包,究竟要怎么用呢?试验了几个插件也找到了相应的方法,其实很简单的. 1.把插件放到相应的插件目录"/FCKeditor/edito/plugins/"里面. 2.打开"/FCKeditor/fckconfig.js",找到"

  • ckeditor插件开发简单实例

    CKeditor就是FCKeditor,在发布一个新版本的时候,把自己的名字都改了,不要"F". 需求:我需要在编辑文本的时候,选择一段文字,点击自定义的按钮,就能够在这段文字后面增加一个图标,图标超链接去一个地址,以选中的文字作为参数. 做法: 1.在CKeditor的plugins文件夹下,创建新文件夹"addmap",这个名字可以自定义,这个名字是我项目中用的名字 2.在addmap文件夹下,放一张gif图片"map.gif",用来作图标用

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

    在开始之前,感性的认知一下CKEditor源码的组织形式是很有用的. CKEditor固有的一些文件被组织到ckeditor\_source目录里. 核心的功能,诸如DOM元素操作,事件处理,初始化脚本和一些环境设置被包含在ckeditor\_source\core文件夹内. 而其它的一些功能, 比如格式化,拷贝和粘贴, 图片和链接, 都被实现为插件形式放在ckeditor\_source\plugins文件夹内. 每个文件夹表示一个插件. 并且在每个文件夹内, 有一个plugin.js的文件包

  • SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

    上网搜索了一下相关的文章不少,大同小异,本人一直使用的是CKeditor的文字编辑器,所以偿试使用网上很多网友介绍的SyntaxHighlighter配合CKEditor插件的方式实现.可能是因为SyntaxHighlighter和CKEditor版本不同,过程中遇到了一些问题,解决的同时也根据个人理解做部分调整,所以本文所描述的方法仅供参考. 一.SyntaxHighlighter简介 SyntaxHighlighter(原名:dp.SyntaxHighlighter)是一套在浏览器上对各种代

  • fckeditor 插件开发参考文档

    一:插件的目录结构 插件目录的名称必须和插件的名称一样,而且目录里面必须包含一个fckplugin.js文件.可选包含一个lang目录用来实现界面的国际化.每一个文件定义一种语言,文件名不包含.js,用FCKConfig.Plugins.Add()注册.如果实现的插件命令没有界面,也可以不需要支持任何语言. 比如:findreplace插件的目录结构如下: /editor/plugins/findreplace/fckplugin.js /editor/plugins/findreplace/l

  • FCKeditor 插件开发 示例(详细版本)

    (FCKeditor.地址是:http://www.fckeditor.net/.我下载的版本是:2.6.3.)What ?      FCKeditor一直是web上编辑器的比较好的一个选择,他是开源的,而且效果不错.FCKeditor的插件是对FCKeditor的扩展功能.Why?尽管一般条件下FCKeditor能适应使用,但你可能对FCKeditor仅有的功能不满意,好.FCKeditor提供了插件开放功能,只要你能想到,你就做吧.How?        我就一个简单的"Hello&quo

  • ckeditor syntaxhighlighter代码高亮插件配置分享

    最近由于自己想做一个网站形式的代码库,自已写一个在线文本编辑器,对于现在的我来,确实是很不切实际,呵呵!再说了,现在有一个非常好的在线文本编辑器(ckeditor)了,我和必再去费这等功夫呢!有现成的,拿过用就是的呗!正所谓的拿来主义!不过这个在线文本编辑器,对于我们程序员来说有一个算是缺陷吧!没有代码高亮的功能!这样把代码贴上去,很不好看!今天晚上,我总是把他给弄出来了.当然也采在别人的肩膀上做成的.在此感谢他们的分享!费话不多说了!咱们进入正题吧! 首先去官方网站下载个ckeditor 其次

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

    ckeditor是一款功能很强大的富文本编辑的工具,给我们提供了绝大多数功能,满足我们日常开发所用,但由于特殊情况,可能会需要修改ckeditor的插件.ckeditor提供了给我们很方便扩展插件的接口. 最经由于项目的需要,需要重写ckeditor的上传图片的功能,以下是自定义图片上传功能的部分代码: 1.在ckeditor/plugins/目录下新建editorupload目录,用来存放自定义插件;在该目录下新建目录images用来存放自定以图片,在images目录下放入插件图片image.

  • fckeditor 修改记录添加行距功能插件

    fckconfig.js 中修改 添加 复制代码 代码如下: FCKConfig.LineHeights = '100%;150%;200%;250%;300%' ; 'Size' : { Element : 'span', Styles : { 'font-size' : '#("Size","fontSize")' }, Overrides : [ { Element : 'font', Attributes : { 'size' : null } } ] },

  • FCKeditor .NET的配置、扩展与安全性经验交流

    前言 FCKeditor是使用非常广泛的HTML编辑器,本文从 ASP.NET 的使用场景对 FCKeditor 与 FCKeditor.NET 的配置.功能扩展(如自定义文件上传子目录.自定义文件名.上传图片的后期处理等).以及安全性进行初步的阐述. 希望能帮助有同样需求的同仁节省一点时间:也希望各位能指正其中的不足.谢谢. 一.自定义 FCKeditor 的 BasePath BasePath 即FCKeditor在网站中的相对路径,默认值是 /fckeditor/,最好在Web.confi

  • CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】

    本文实例讲述了CKEditor 4.4.1 添加代码高亮显示插件功能.分享给大家供大家参考,具体如下: 随着CKEditor4.4.1的发布,以前一直困扰的代码高亮问题终于完美的得到解决,在CKEditor4.4中官方发布了Code Snippet这个代码片段的插件,终于可以完美的内嵌使用代码高亮了,以前都是使用网友自己开发的代码高亮插件.下面就来介绍如何使用Code Snippet这个代码高亮插件.本文还介绍了CKEditor中如何安装Code Snippet插件. 新版本附加信息 CKEdi

  • CKeditor富文本编辑器使用技巧之添加自定义插件的方法

    本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法.分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice目录下的结构如下: 然后, images中如下: dialogs中如下: 我们先来看plugins.js文件的内容: (function() { CKEDITOR.plugins.add("qchoice", { requires: ["dialog"], init:

随机推荐