ckeditor插件开发简单实例

说起CKeditor，其实就是原来的FCKeditor，人家新版本连名字都改了，直接去掉了那个“F”。

需求很明确：在编辑文本时，选中一段文字，然后点击自定义按钮，就能在文字后面自动插入一个带超链接的图标，并且链接地址要以选中的文字作为参数。

实现起来也不复杂，下面直接说步骤。

第一步：创建插件文件夹

在CKeditor的plugins目录下，新建一个文件夹，名字自己定，我这里用的是“addmap”，项目里一直这么叫。

第二步：准备图标素材

把一张用作按钮图标的小图片放进去，比如叫“map.gif”。注意，这个图标是显示在编辑器工具栏上的，不是正文里插入的那个。

第三步：编写插件核心代码

在“addmap”文件夹里新建一个plugin.js，关键代码是这样的：

(function() {
    // 按下自定义按钮时执行的逻辑
    var a = {
        exec: function(editor) {
            var data="";
            var mySelection = editor.getSelection();
            if (CKEDITOR.env.ie) {
                mySelection.unlock(true);
                data = mySelection.getNative().createRange().text;
            } else {
                data = mySelection.getNative();
            }
            if(data!=null&&data!=''){
                editor.insertHtml(data+'');
            }
        }
    },
    b = 'addmap';
    CKEDITOR.plugins.add(b, {
        init: function(editor) {
            editor.addCommand(b, a);
            editor.ui.addButton('addmap', {
                label: 'add map link',
                icon: this.path + 'map.gif',
                command: b
            });
        }
    });
})();

逻辑其实不复杂：先获取当前选中的文本，然后直接在这个文本后面拼接一个带超链接的图片代码。注意，这里插入的图片是“/images/map_icon.gif”，而工具栏上的图标用的是“map.gif”，两个文件不一样，别搞混了。

第四步：配置编辑器，加载插件

回到CKeditor的根目录，修改config.js，把自定义按钮加到工具栏里，并声明额外的插件：

CKEDITOR.editorConfig = function( config )
{
    config.language = 'zh-cn';
    config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;';
    config.toolbar=
    [
        ['Source','-','Preview'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','Link','Unlink','Anchor'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['addmap']
    ];
    config.extraPlugins = 'addmap';
};

这里把“addmap”按钮放在了工具栏的最后一组，同时通过extraPlugins告诉编辑器要加载这个自定义插件。

第五步：测试

刷新页面，打开编辑器，选中一段文字，点击工具栏上那个新加的图标按钮，文字后面就会自动插入一个小地图图标，并且链接地址里已经带上了你选中的文字参数。运行正常，收工。