ckeditor工具栏自定义样式

ckeditor工具栏 自定义和csdn发布文章页面的一样
内容区也是csdn的一样

csdn工具栏定制过，需要自己写样式覆盖掉对应的ckeditor按钮背景图。

自定义ckeditor工具栏
通过更改ckeditor/config.js :
如果有帮助，望采纳

CKEDITOR.editorConfig = function( config )   
{   
  
    
};  
更改后:
CKEDITOR.editorConfig = function( config )   
{   
  
    config.toolbar = 'MyToolbar';//把默认工具栏改为‘MyToolbar’   
    config.toolbar_MyToolbar =   
    [   
        ['Preview'],   
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],   
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],   
        ['Image','HorizontalRule','Smiley','SpecialChar'],   
        '/',   
        ['Styles','Format'],   
        ['Bold','Italic','Strike'],     
        ['Link','Unlink'],   
        ['Maximize']   
    ];   
};  
结果如下图:
<img src="https://img-blog.csdn.net/20151128171503880?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> 

或者
在html，jsp文件中引用ckeditor时

<script type="text/javascript">
    var editor = null;
    window.onload = function(){
        editor = CKEDITOR.replace('content',
        {
            <span style="color:#FF0000;">toolbar:   
            [
                ['Preview'],   
                ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],   
                ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],   
                ['Image','HorizontalRule','Smiley','SpecialChar'],   
                '/',   
                ['Styles','Format'],   
                ['Bold','Italic','Strike'],     
                ['Link','Unlink'],   
                   ['Maximize']  
               ]  </span>
        }); //参数‘content’是textarea元素的name属性值，而非id属性值
    }