ckeditor编写自定义插件,本文环境： ckeditor4.8。

一.自定义按钮

自定义一个保存数据的按钮、并自定义图标

var pluginname="savedata";
	var cmd_name="cmd_savedata";
	CKEDITOR.plugins.add( pluginname, {
	 
	    init: function( editor ) {
	        editor.addCommand( cmd_name, {
	            exec: function( editor ) {
	            	
	          	var $scope = angular.element(ngSection).scope();
	          	
	            	$scope.$apply(function() {
	            	
	            	$scope.save(null,null,function(){
						
						$scope.getList();
						msg("保存成功！");
					});
	            	});	
	            }
	        });
	        editor.ui.addButton( 'btn_savedata', {
	            label: '保存数据',
	            command:cmd_name,
	            toolbar: 'insert',
	            icon: basePath+'/images/save.jpg',
	        });
	    }
	});

关于插件的加载，官方建议放在config.js文件中使用。

这样的话，所有用到ckeditor的页面将都会有相同的插件。

那么如果我只想部分页面使用这个插件呢？

二.每个页面单独使用自己的按钮

官方文档方法

我们可以这样用官方推荐的方法，

在需要的页面上

var ck=CKEDITOR.replace( 's_context', {
		extraPlugins: pluginname+',codesnippet,colorbutton,font,liststyle,copyformatting',
});

但是这样会有一个问题，

通过replace加载出来的编辑控件需要通过 生成对象ck的getData()及setData()方法获取数据

直接通过$("#s_context").val()是无法获取到最新内容的。

每次数据交互都要来回几下，我是觉得这样很麻烦。

$("#s_content").ckeditor();

这样，不管后面在编辑器中怎么编辑，通过$("#s_content").val()即可获取最新的编辑数据。直接设置$("#s_content").val(xxx).原始数据怎么变，编辑器也能正确加载数据显示。

但是。。。这样又出了个新问题，

这种初始化没法改变插件数据，插件加载不上了>.<

自定义方法

换用另外的方法

好吧，其实解决方法也很简单，在ckeidtor的config.js中增加一个变量extrPlugins

config.js中使用外部按钮变量.

CKEDITOR.editorConfig = function( config ) {

//默认的其他共享的插件
var plugins="codesnippet,colorbutton,font,pastefromword,copyformatting";
	
if(typeof( CKEDITOR.morePluginnames)!="undefined")
	config.extraPlugins=plugins+","+ CKEDITOR.morePluginnames;
	else
		config.extraPlugins=plugins;

}

而我们自己的页面先实现按钮功能，

即按照步骤一中的在页面上实现plugin,再传入按钮插件pluginname。

让每个页面自定义实现按钮。即可

	CKEDITOR.morePluginnames=pluginname;
	$("#s_context").ckeditor();