自定义ckeditor编辑器工具栏图文详解

CKeditor就是FCKeditor,在发布一个新版本的时候,把自己的名字都改了,不要”F”。

昨天因为一个需求我们需要自定义ckeditor编辑器工具栏并放入一个插件,下面我来给大家介绍我的记录笔记,有需要可学习学习。

需求:我需要在编辑文本的时候,选择一段文字,点击自定义的按钮,就能够在这段文字后面增加一个图标,图标超链接去一个地址,以选中的文字作为参数。

1、首先下载并安装ckeditor。

做法:

2、自定义工具栏按钮:

1、在CKeditor的plugins文件夹下,创建新文件夹”addmap”,这个名字可以自定义,这个名字是我项目中用的名字

我们可以自定义ckeditor工具栏要显示的按钮,工具栏按钮定义可以参考这里。

2、在addmap文件夹下,放一张gif图片”map.gif”,用来作图标用的。

现在我们需要向工具栏添加一个自定义功能的按钮。ckeditor工具栏中的每个按钮都是作为插件定义在ckeditorplugins
目录中。我们在ckeditorplugins中创建一个新文件夹linkbutton。在linkbutton文件夹内,我们创建一个plugin.js文件,它的代码如下:

3、在addmap文件夹下,新建”plugin.js”,编辑这个js文件,我们这里的代码是:

 代码如下

复制代码 代码如下:(function() { //Section
1 : 按下自定义按钮时执行的代码 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+’a href=”/map_index.html?ad=’+data+'”img
border=”0″ height=”24″ src=”/images/map_icon.gif” width=”24″ //a’); } }
}, 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 }); } });})();

复制代码

4、回到CKeditor的根目录,编辑config.js

(function(){
    //Section 1 : 按下自定义按钮时执行的代码
    var a= {
        exec:function(editor){
            alert(“这是自定义按钮”);
        }
    },
    //Section 2 : 创建自定义按钮、绑定方法
    b=’linkbutton’;
    CKEDITOR.plugins.add(b,{
        init:function(editor){
            editor.addCommand(b,a);
            editor.ui.addButton(‘linkbutton’,{
                label:’Link Button’,
                icon: this.path + ‘logo_ckeditor.png’,
                command:b
            });
        }
    });
})();

复制代码 代码如下:CKEDITOR.editorConfig =
function( config ){// Define changes to default configuration here. For
example:config.language = ‘zh-cn’;//config.uiColor =
‘#AADC6E’;//字体.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’]];

在上面的代码中我们指定自定义按钮的图标logo_ckeditor.png,logo_ckeditor.png放在linkbutton文件夹中。
接下来我们需要注册linkbutton插件

config.extraPlugins = ‘addmap’;

-adding-a-new-toolbar-button/原文中的给出方法是在ckeditor.js中注册,这会使以后升级新版本遇到困难。提倡使用下面的方法在config.js中注册自定义插件:

5、测试

 代码如下

复制代码

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = ‘fr’;
    // config.skin = ‘office2003’;
    config.extraPlugins=”linkbutton”
};

最后,在ckeditor中显示自定义按钮linkbutton,代码如下: