自定义ckeditor工具栏

最新推荐文章于 2024-05-14 23:27:17 发布

原创最新推荐文章于 2024-05-14 23:27:17 发布 · 828 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ckeditor #jsp

jsp 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何自定义CKEditor的工具栏，提供了两种方法。第一种方法涉及修改config.js文件，通过在HTML或JSP文件中引用CKEditor时进行配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义ckeditor工具栏有2种方式：

方法一:

通过更改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.youkuaiyun.com/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属性值
    }