给ckeditor编辑器添加自定义按钮 -

个人专属

浏览: 66373 次
性别:
来自: 杭州

最近访客更多访客>>

刘文不是

wangrusheng5200

leayaya

oezx

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

给ckeditor编辑器添加自定义按钮

WordPress UI Blog HTML

1、首先下载并安装ckeditor。

2、自定义工具栏按钮:

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

现在我们需要向工具栏添加一个自定义功能的按钮。ckeditor工具栏中的每个按钮都是作为插件定义在ckeditor\plugins\ 目录中。我们在ckeditor\plugins\中创建一个新文件夹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插件。http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-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，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定义按钮</title>
<script type="text/javascript" src="ckeditor.js"></script>
<style type="text/css">
body{font-size:12px;line-height:1.8;font-family:'微软雅黑';}
</style>
</head>

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

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

来源：(http://blog.sina.com.cn/s/blog_5e6e077e0100hs9q.html) - ckeditor添加自定义按钮_myspace616_新浪博客

分享到：