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

【www.bbyears.com--php安装】

1、首先下载并安装ckeditor。

2、自定义工具栏按钮:

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

现在我们需要向工具栏添加一个自定义功能的按钮。ckeditor工具栏中的每个按钮都是作为插件定义在ckeditorplugins 目录中。我们在ckeditorplugins中创建一个新文件夹linkbutton。在linkbutton文件夹内，我们创建一个plugin.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
            });
        }
    });
})();

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

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

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

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

<script type="text/javascript" src="ckeditor.js"></script>


 


<script type="text/javascript">
    CKEDITOR.replace( "ckeditor",{
        toolbar :
            [
                [ "Bold", "Italic", "-", "NumberedList", "BulletedList", "-", "Link", "Unlink","-","linkbutton" ]
            ],
        extraPlugins:"linkbutton"    //注册linkbutton,也可在config.js中注册
    });
</script>

注意：自定义插件的名称必须在任何地方都要保持一致。

写一个demo.html文件进行测试

      我们在${ckeditor}根目录下建立一个demo.html文件来测试下我们刚写的插件是否有效，内容如下：

   <script type="text/javascript" src="ckeditor.js"></script> This is the content! <script>  CKEDITOR.replace("editor1", {   toolbar : "MyBasic",   height : 300,   width : 800  }); </script>     

然后在浏览器中打开demo.html文件，就可以看到在编辑器的工具栏中最后一个就是我们刚写的插件了，如下图所示：

本文来源：http://www.bbyears.com/jiaocheng/39568.html