爬坑ckeditor

公司平台升级，使用了ckeditor4编辑器，分享一下今日爬坑：

 1.内嵌编辑器：关闭编辑器自带的弹窗；要求在点击选择之后，关闭弹窗

首先想到的就是window.close();然后就是不可避免的失败了,尝试window.parent.close()(失败)，开始爬坑之旅；排查原因，发现此文本框里内容的父级元素不是该弹窗，而是外面的编辑器；显然用window.close();方法已经不可行了。

作为一个面向百度编程的程序员，万事不决找度娘。

方法：

window.parent.parent.CKEDITOR.dialog.getCurrent().hide();

顺利解决

 

2.自定义编辑器列表工具栏，并且将自定义的组件添加到菜单

plugin.js：包含有自己定义的组件、将组件添加到菜单

(function() {
  CKEDITOR.plugins.add("eforminput", {
    requires: ["dialog"],
    init: function(a) {
      a.addCommand("eforminput", new CKEDITOR.dialogCommand("eforminput"));
      a.ui.addButton("eforminput", {
        label: "输入框",
        command: "eforminput",
        icon: this.path + "images/efinput.png"
      });
      CKEDITOR.dialog.add("eforminput", this.path + "dialogs/eforminput.js")
		   
                //将组件添加到菜单
				if(a.addMenuItem) {
					a.addMenuGroup("eforminput");
					a.addMenuItem("eforminput", {
					  label: "输入框",
					  //icon: this.path + "images/efinput.png",
					  command: "eforminput",
					  group: "eforminput"
				})
			  }
		
			if(a.contextMenu) {
			// 监听右键菜单事件
				a.contextMenu.addListener(function(element) {
				  // 如果是在对应的域上右键，才在右键菜单中显示域属性功能
				   if(element.$.localName == "img" && element.$.src.indexOf("text.gif")!=-1) {
						return {
						  eforminput: CKEDITOR.TRISTATE_OFF
						}
				   }
				})
		  }		
		
	 }
  });
})();

eforminput.js：定义组件的属性（大小、内容等等）

config.js ：将自定义的组件添加到工具栏

添加到工具栏代码