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; }