CKEditor 生态系统文档
Search
Contribute to this guide
主页/CKEditor 5/入门

guide菜单栏

菜单栏是一个用户界面组件，它提供访问编辑器提供的所有功能的途径，这些功能按菜单和类别进行组织。这种在大型桌面和在线编辑软件中流行的熟悉体验提高了编辑器的可用性。

由于菜单栏包含所有编辑器功能，因此工具栏可以简洁明了，仅提供最基本和最常用的功能。这在功能丰富的编辑器集成中尤其受欢迎。

为了您的方便，菜单栏提供了一个 默认预设结构，它基于加载到编辑器中的插件。但是，您可以根据需要对其进行排列，删除不必要的项目，以及添加与自定义功能相关的菜单项。

# 演示

以下演示展示了菜单栏预设设置中可用的所有项目。

旅行教会你的三件最棒的事情

就像地球上所有伟大的事物一样，旅行通过榜样来教导我们。以下是我多年旅行中获得的一些最宝贵的教训。

A lone wanderer looking at Mount Bromo volcano in Indonesia.
走出你的舒适区可能会带你看到像这样的美丽风景。

真正的探索之旅不在于寻找新的风景，而在于拥有新的眼睛。

马塞尔·普鲁斯特

对多样性的欣赏

习惯一种完全不同的文化可能具有挑战性。虽然在网上或从书籍中了解文化也很不错，但没有什么能比得上亲身体验文化多样性。

你学会欣赏每一个差异，同时变得更加文化流动。

您可以轻松删除一些预设或添加更多项目，包括自定义功能的菜单项。结构也可以根据特定需求进行排列。

# 启用菜单栏

菜单栏在所有编辑器类型中都可用。使用方式会因所用编辑器类型而异。

# 经典编辑器和内联编辑器

菜单栏默认情况下处于禁用状态。要使其在您的编辑器中可用，请将 config.menuBar.isVisible 属性设置为 true。这将打开菜单栏，并提供一组默认的功能。菜单栏位于编辑器工具栏的正上方。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList' ],
        menuBar: {
            isVisible: true
        }
    } );

# 其他编辑器类型

使用解耦、气球或多根编辑器时，您需要自己将菜单栏插入到所需位置。菜单栏 HTML 元素可在 editor.ui.view.menuBarView.element 属性下获得。

    <div id="menuBarContainer"></div>
    <div id="editor"><p>Document content.</p></div>

DecoupledEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList' ],
    } )
    .then( editor => {
        document.querySelector( '#menuBarContainer' ).appendChild( editor.ui.view.menuBarView.element );
    } );

# 配置

可以使用 config.menuBar 选项及其 config.menuBar.removeItems 和 config.menuBar.addItems 属性来配置菜单栏。有关如何操作的详细信息，请参阅 config.menuBar API 文档。

在将功能添加到菜单栏之前，请确保该功能的插件已添加到编辑器配置中。

# 将自定义按钮添加到菜单栏

要将自定义按钮或其他组件添加到菜单栏，请执行以下步骤

  1. 使用 editor.ui.componentFactory 创建一个新的 UI 组件。定义其行为和外观。
  2. 使用 editor.ui.extendMenuBar() 方法将您的组件添加到菜单栏中的所需位置。

以下是一个自定义插件的示例，它将一个按钮添加到“格式”菜单中的菜单栏中，位于“粗体”按钮之后

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

class MyCustomPlugin extends Plugin {
    init() {
        const editor = this.editor;

        // Register the toolbar button.
        editor.ui.componentFactory.add( 'menuBar:myCustomButton', locale => {
            const view = new ButtonView(locale);

            view.set( {
                label: 'My Custom Button',
                withText: true,
                tooltip: true
            } );

            // Execute a command when the button is clicked.
            view.on( 'execute', () => {
                editor.execute('myCustomCommand');
            } );

            return view;
        } );

        // Add your component in the preferred position.
        editor.ui.extendMenuBar( {
            item: 'menuBar:myCustomButton',
            position: 'after:menuBar:bold'
        } );
    }
}

# 贡献

此功能的源代码可在 GitHub 上的 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-ui 找到。