CKeditor插件开发流程

jopen 10年前

1.放在多文件中

第一步:config.js中

config.extraPlugins = '插件名称';//注册插件,extraPlugins只允许出现一次,你如果之前有新增别的插件,那么用逗号分隔 
第二步:plugins文件夹下新建:插件名称 文件夹
第三步:
1:在plugins/插件名称/下新建plugin.js;
2:在plugins/插件名称/下新建 dialogs文件夹,并在其内新建 "插件名称.js"
(function() {      CKEDITOR.plugins.add("插件名称", {          requires: ["dialog"],          init: function(a) {              a.addCommand("插件名称", new CKEDITOR.dialogCommand("插件名称"));              a.ui.addButton("插件名称", {                  label: "插件名称",//调用dialog时显示的名称                  command: "插件名称",                  icon: this.path + "g.ico"//在toolbar中的图标                });              CKEDITOR.dialog.add("插件名称", this.path + "dialogs/插件名称.js")            }        })    })();
第四步:/plugins/插件名称/dialogs/插件名称.js 内容如下:

(function() {      CKEDITOR.dialog.add("插件名称",       function(a) {          return {              title: "插件名称",              minWidth: "500px",              minHeight:"500px",              contents: [{                  id: "tab1",                  label: "",                  title: "",                  expand: true,                  width: "500px",                  height: "500px",                  padding: 0,                  elements: [{                      type: "html",                      style: "width:500px;height:500px",                      html: '内容测试'                  }]              }],              onOk: function() {                  //点击确定按钮后的操作                  //a.insertHtml("编辑器追加内容");              }          }      })  })();
2、放在单个plugin.js中
第一步:config.js中

config.extraPlugins = 'clearempty';//注册插件,extraPlugins只允许出现一次,你如果之前有新增别的插件,那么用逗号分隔

第二步:plugins文件夹下新建:clearempty 文件夹
第三步:在plugins/clearempty/下新建plugin.js;内容如下:

(function() {      CKEDITOR.plugins.add('clearempty', {          requires: ['styles', 'button'],          init: function(a) {              a.addCommand('clearempty', CKEDITOR.plugins.clearempty.commands.clearempty);              a.ui.addButton('clearempty', {                  label: "清除空行",                  command: 'clearempty',                  icon: this.path + "g.ico"//这个g.ico是你的插件图标,放在同目录下              });          }      });      CKEDITOR.plugins.clearempty = {          commands: {              clearempty: {                  exec: function(a) {                      var _html = a.getData();                      //在这里执行你将_html中的空行替换掉的操作                         a.setData(_html);                  }              }          }      };  })();