编辑此页

内置工具栏

CKEditor 提供了三个不同的包，它们有各自的配置（full、standard 和 basic）。该捆绑包附带完整版，但您可以通过使用 full、standard 或 basic 关键字作为工具栏来轻松切换工具栏配置。您可以在配置中全局配置它

        1
2
3
4
5
        # config/packages/fos_ck_editor.yaml
fos_ck_editor:
    configs:
        my_config:
            toolbar: full
    

或直接配置您的 widget

        1
2
3
        $builder->add('field', 'ckeditor', [
    'config' => ['toolbar' => 'full'],
]);
    

在配置中或特别是在 widget 中构建工具栏确实很麻烦。每次您想要自定义工具栏时，都需要重新定义所有结构。为了避免这种重复，该捆绑包允许您在单独的节点中定义自己的工具栏或覆盖内置工具栏，并重复使用它们。此功能仅在您的配置中可用。

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        # config/packages/fos_ck_editor.yaml
fos_ck_editor:
    configs:
        my_config_1:
            toolbar: "my_toolbar_1"
            uiColor: "#000000"
            # ...
        my_config_2:
            toolbar: "my_toolbar_2"
            uiColor: "#ffffff"
            # ...
        my_config_2:
            toolbar: "my_toolbar_1"
            uiColor: "#cccccc"
    toolbars:
        configs:
            my_toolbar_1: [ [ "Source", "-", "Save" ], "/", [ "Anchor" ], "/", [ "Maximize" ] ]
            my_toolbar_2: [ [ "Source" ], "/", [ "Anchor" ], "/", [ "Maximize" ] ]
    

在这里，我们看到工具栏是如何构建的。工具栏是一个工具栏（条带）数组，每个工具栏也是一个数组，其中包含 UI 项目列表。要进行回车，您只需在条带之间添加字符 / 即可。它依赖于与 CKEditor 本身完全相同的结构。

使用工具栏节点更好，但配置仍然不完美，因为工具栏项目中仍然存在代码重复。为了避免这部分，您可以在单独的节点中定义一组项目，然后通过在它们前面加上 @ 将它们注入到您的工具栏中。

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        fos_ck_editor:
    configs:
        my_config_1:
            toolbar: "my_toolbar_1"
            uiColor: "#000000"
            # ...
        my_config_2:
            toolbar: "my_toolbar_2"
            uiColor: "#ffffff"
            # ...
    toolbars:
        configs:
            my_toolbar_1: [ "@document", "/", "@link" , "/", "@tool" ]
            my_toolbar_2: [ "@document", "/", "@tool" ]
        items:
            document: [ "Source", "-", "Save" ]
            link:     [ "Anchor" ]
            tool:     [ "Maximize" ]
    

内置配置（full、standard、basic）也使用项目，因此如果您只想覆盖配置的一部分，只需覆盖它即可

        1
2
3
4
5
6
7
8
        fos_ck_editor:
    configs:
        my_config:
            toolbar: "full"
    toolbars:
        items:
            full.colors: [ "TextColor", "BGColor" ]
            full.document: [ "Source", "-", "Preview", "Print" ]
    

注意

如果您想要内置项目的完整列表，请查看 `FOS\CKEditorBundle\Config\CKEditorConfiguration` 类。

本作品，包括代码示例，根据 Creative Commons BY-SA 3.0 许可获得许可。

版本