ckeditor 下拉插件 开发

ckeditor插件开发主要分为3个步骤

1.在ckeditor的plugins目录下新建一个目录，该目录的名称为插件的名称
2.在新建的目录下面新建plugin.js文件
3.通过config.extraPlugins将插件引入工具栏

以下代码创建个简单下拉插件

1.pluing.js
/**
* @author lsj
* @date 2014/2/20
*/
CKEDITOR.plugins.add( 'wfpromt',
{
requires : [ 'richcombo', 'styles' ],
init : function( editor )
{
var config = editor.config,

lang = editor.lang.format;

//下拉数据源
var tags = [];

tags[0]=["同意", "同意", "同意"];
tags[1]=["不同意", "不同意", "不同意"];
tags[2]=["批准1", "批准1", "批准1"];
tags[3]=["批准2", "批准2", "批准2"];
tags[4]=["批准3", "批准3", "批准3"];
tags[5]=["批准4", "批准4", "批准4"];
tags[6]=["批准5", "批准5", "批准5"];
tags[7]=["批准6", "批准6", "批准6"];
tags[8]=["批准7", "批准7", "批准7"];

//添加下拉框
editor.ui.addRichCombo( 'wfpromt',
{
label : '常用提示语',
title : '常用提示语',
className : 'cke_format',
panel :
{
css : editor.skin.editor.css.concat( config.contentsCss ),
multiSelect : false,
attributes : { 'aria-label' : lang.panelTitle
}
},
init : function()
{
this.startGroup( '常用提示语' );
for (var this_tag in tags){
//function add( 值, html,文本 )
this.add(tags[this_tag][0], tags[this_tag][1], tags[this_tag][2]);
}
},
onClick : function( value )
{
editor.focus();
editor.fire( 'saveSnapshot' );
editor.insertHtml(value);
editor.fire( 'saveSnapshot' );
}
});
}
});

2.添加插件到ckeditor工具栏

CKEDITOR.replace( 'editor1',
{
extraPlugins : 'wfpromt',
toolbar :
[
[ 'Source','Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'wfpromt' ]
]
});

(*** 注:默认生成的下拉框高度和宽度固定的，可通过以下属性设置****)
div.cke_panel.cke_ltr.cke_rcombopanel { width: 300px !important;height: 100px !important; }
span.cke_rcombo span.cke_styles a span span.cke_text { width: 150px; }