如何自定义CK-Editor的工具菜单？ [英] How to customize CK-Editor's tools menu?

问题描述

我想在ck-editor中更改工具菜单选项。
例如我删除了一些，我不需要使用。
我如何做到这一点？

解决方案

有一个配置设置允许你设置哪些按钮会出现。 / p>

您只需创建自己的工具栏布局。我已包含默认的完整工具栏代码，您可以删除不想显示的按钮。

最好复制默认的config.js文件，重命名它，然后在加载编辑器时调用自定义配置文件和自定义工具栏：

  CKEDITOR.replace（'xxx_textarea_id_xxx' ，
 {
 customConfig：'xxx_name_of_custom_config_file_xxx.js'，
 toolbar：'XXX_custom_name_XXX'
}）; 
  

---

工具栏布局中的'/'到一个新行。

name：'document'，items：每个条目都显示为一个组，并且条目之间有空格。 br>
' - '在组内创建一个垂直分隔符。

演示页显示此默认工具栏布局的示例：

CKEditor演示

  config.toolbar_Full = 
 [
 {name：'document'，items：['Source'，' - '，'Save'，'NewPage' 'DocProps'，'Preview'，'Print'，' - '，'Templates']}，
 {name：'clipboard'，items：['Cut'，'Copy'，'Paste'，'PasteText '，'PasteFromWord'，' - '，'Undo'，'Redo']}，
 {name：'editing'，items：['Find'，'Replace'，' - '，'SelectAll' ' - '，'SpellChecker'，'Scayt']}，
 {name：'forms'，items：['Form'，'Checkbox'，'Radio'，'TextField'，'Textarea' ''，'Button'，'ImageButton'，'HiddenField']}，
'/'，
 {name：'basicstyles'，items：['Bold'，'Italic'，'Underline' 'St'，'''''''''''''''' '，'Indent'，' - '，'Blockquote'，'CreateDiv'，' - '，'JustifyLeft'，'JustifyCenter'，'JustifyRight'，'JustifyBlock'，' - '，'BidiLtr'，'BidiRtl'] }，
 {name：'insert'，items：['Image'，'Flash'，
 {name：'links'，items：['Link'，'Unlink'，'Anchor']} 'style'，items：['Styles'，'，'，''''''''' 'format'，'Font'，'FontSize']}，
 {name：'colors'，items：['TextColor'，'BGColor']}，
 {name：'tools' ：['Maximize'，'ShowBlocks'，' - '，'About']} 
]; 
  
 
 
 
 
 
 
这是自定义工具栏配置设置。 > 
设置工具栏配置设置时，只使用toolbar_之后的名称部分。 工具栏：'XXX_custom_name_XXX' 
  config.toolbar_XXX_custom_name_XXX = 
 [
 {name：'xxx_custom_group_namexxx'，items：['Save'，'NewPage'，'DocProps'，'Preview'，'Print'，' - '，'Templates']}，
 { name：'clipboard'，items：['Cut'，'Copy'，'Paste'，'PasteText'，'PasteFromWord'，' - '，'Undo'，'Redo']}，
 {name： 'b'编辑'，项目：['查找'，'替换'，' - '，'选择全部']}，
'/'，
 {name：'basicstyles' ，'It'，''''，''''，'''' BulletedList'，' - '，'Outdent'，'Indent'，' - '，'Blockquote'，'CreateDiv'，' - '，'JustifyLeft'，'JustifyCenter'，'JustifyRight'，'JustifyBlock' ，'BidiLtr'，'BidiRtl']}，
 {name：'links'，items：['Link'，'Unlink'，'Anchor']}，
 {name：'insert'项目：['Image'，'Table'，'Horizo​​ntalRule'，'Smiley'，'SpecialChar'，'PageBreak']}，
'/'，
 {name：'styles' ['Styles'，'Format'，'Font'，'FontSize']}，
 {name：'colors'，items：['TextColor'，'BGColor']}，
 {name： 'tools'，items：['Maximize'，'ShowBlocks'，' - '，'About']} 
]; 
  
 
 
 
 
 
 
这是开发人员工具栏页面的链接指南：
 
 CKEditor 3.x |开发人员指南 -  CKEditor工具栏 
 
 
 
 
 
 
您可能希望关闭所有未使用的功能 removePlugins 配置设置：
 
  config.removePlugins =' flash，iframe'; 
  
 
 
 
 
 
 
这是CKEditor 3 JavaScript API文档列出所有配置设置：
 
  Namespace CKEDITOR.config  
 
I would like to change tool menu optons on ck-editor.
for example I remove some of them that I dont need to use.
How can I do that ?
解决方案
There's a configuration setting that allows you to set which buttons will appear.

You just create your own toolbar layout. I've included the default full toolbar code, you can remove the buttons that you don't want to appear.

It's best to copy the default config.js file and rename it, then call your custom config file and the custom toolbar when you load the editor:
CKEDITOR.replace( 'xxx_textarea_id_xxx',
{
  customConfig : 'xxx_name_of_custom_config_file_xxx.js',
  toolbar : 'XXX_custom_name_XXX'
});




This is the config setting for the default full toolbar layout.


The '/' within the toolbar layout means break to a new line.

The name: 'document',    items : entries are each shown as a group and there are spaces between the entries.

The '-' creates a vertical spacer within a group.

The demo page shows an example of this default toolbar layout:

CKEditor Demo
config.toolbar_Full =
[
    { name: 'document',    items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
    { name: 'clipboard',   items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'editing',     items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
    { name: 'forms',       items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
    { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
    { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
    { name: 'insert',      items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
    '/',
    { name: 'styles',      items : [ 'Styles','Format','Font','FontSize' ] },
    { name: 'colors',      items : [ 'TextColor','BGColor' ] },
    { name: 'tools',       items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];




This is a custom toolbar config setting.

When you set the toolbar config setting you only use the part of the name that is after "toolbar_". toolbar : 'XXX_custom_name_XXX'
config.toolbar_XXX_custom_name_XXX =
[
    { name: 'xxx_custom_group_namexxx',    items : ['Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
    { name: 'clipboard',   items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'editing',     items : [ 'Find','Replace','-','SelectAll' ] },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
    { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
    { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
    { name: 'insert',      items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
    '/',
    { name: 'styles',      items : [ 'Styles','Format','Font','FontSize' ] },
    { name: 'colors',      items : [ 'TextColor','BGColor' ] },
    { name: 'tools',       items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];




Here's the link to the toolbar page in the developers guide:

CKEditor 3.x | Developers Guide - CKEditor Toolbar



You might want to turn off any features that you aren't using with the removePlugins config setting:
config.removePlugins = 'flash,iframe';




Here's the page from the CKEditor 3 JavaScript API Documentation that lists all of the config settings:

Namespace CKEDITOR.config

                        
这篇关于如何自定义CK-Editor的工具菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！