导航菜单
路很长,又很短
博主信息
昵   称:Cocodroid ->关于我
Q     Q:2531075716
博文数:308
阅读量:826679
访问量:80974
至今:
×
云标签 标签球>>
云标签 - Su的技术博客
博文->>首页 博主的更多博文>>
给ckeditor编辑器添加自定义按钮
Tags : ckeditor,自定义按钮,WordPress发表时间: 2015-07-30 19:54:01

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> 


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


转自:java-caixs-163-com



打赏
打赏
关注公众号
公众号
类别:网站| 阅读(1727)| 赞 (0)
评论
暂无评论!
发表评论
昵  称:

验证码:

内  容:

    同时赞一个 赞