Настройка групп панелей инструментов в Site Builder

Для пользовательских компонентов можно настроить копии групп готовых панелей инструментов, отображаемых на панели инструментов Site Builder.

Можно создать собственную версию готового компонента, которая имеет ограниченный набор и доступна в настраиваемом теге. Никакие настройки не влияют на готовые компоненты.

Можно создать собственную версию готового компонента, которая имеет ограниченный набор и доступна в настраиваемом теге, но это не повлияет на готовые компоненты.

Группы панелей инструментов то, что видно на панели инструментов, если нажать компонент Title (Заголовок) или Paragraph (Абзац) для его редактирования. Можно удалить элементы, поддерживаемых компонентами Title или Paragraph, и изменить их порядок, но дополнительные подключаемые модули не разрешены.

Для настройки группы панелей инструментов в Site Builder применяется тот же синтаксис, что CKEditor использует для своей конфигурации toolbarGroups. См. https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic.

Компоненты Title и Paragraph поддерживают следующие группы:

  • "basicstyles" — доступен жирный шрифт / курсив / подчеркивание https://ckeditor.com/cke4/addon/basicstyles

  • "styles" — стили шрифта https://docs.ckeditor.com/ckeditor4/latest/guide/dev_styles.html

  • "colors" — цвет текста и фона https://docs.ckeditor.com/ckeditor4/latest/guide/dev_colorbutton.html

  • "undo" — отменить/повторить текущий экземпляр в CKEditor

  • "links" — пользовательский дополнительный модуль диалога гиперссылки

  • "paragraph" — нумерованный/маркированный список и поддержка отступов

    • "list"

    • "indent"

  • "align" — выравнивание по левому, правому краю или по центру

  • "cleanup" — удалить любые стили для выделенного текста

Компонент Paragraph также поддерживает подключаемые модули для вставки изображений и таблиц

  • "insert"

    • "image"

    • "table"

Кроме того, можно использовать следующий разделитель строк:

  • "/"

Примечание.:

Если задать любое другое значение в конфигурации группы панелей инструментов, оно будет удалено до создания панели инструментов Site Builder. Вы не можете указать "extraPlugins". Поддерживается только конфигурация "имя"/"группы". Любые записи "элементов" будут игнорироваться. 

Например, если необходимо запретить пользователям определять шрифты, цвета, стили или размеры, можно обновить конфигурацию панели инструментов указанным ниже образом. Для "id" необходимо указать пользовательские значения, отличные от значений, заданных в поле.

[{
    "name": "<category name>",
    "list": [{
        "type": "scs-title",
        "id": "<custom-value>",
        "config": {
            "toolbarGroups": [{
                    "name": "basicstyles",
                    "groups": ["basicstyles"]
                }, {
                    "name": "undo",
                    "groups": ["undo"]
                },
                "/", {
                    "name": "links",
                    "groups": ["links"]
                }, {
                    "name": "paragraph",
                    "groups": ["list", "indent"]
                },
                "/", {
                    "name": "align",
                    "groups": ["align"]
                },
                {
                    "name": "insert",
                    "groups": ["image", "table"]
                }, {
                    "name": "cleanup",
                    "groups": ["cleanup"]
                }
            ]
        }
    }, {
        "type": "scs-paragraph",
        "id": "<custom-value>",
        "config": {
            "fontSize_sizes": "16/16px;24/24px;48/48px;"
        }
    }]
}]

Проверка

Замените файл components.json предыдущим кодом, а затем отредактируйте сайт (обновите окно браузера, если редактирование уже начато). На этом этапе при редактировании компонента Title (Заголовок) стили шрифта или цвета для выделения больше не отображаются. Компонент Paragraph (Абзац) по-прежнему их отображает, а список доступных размеров шрифтов ограничен значениями 16, 24 и 48.

Группы панелей инструментов по умолчанию

Группы панелей инструментов по умолчанию для заголовка и абзаца:

  • Заголовок

    [{
        "name": "basicstyles",
        "groups": ["basicstyles"]
    }, {
        "name": "styles",
        "groups": ["styles"]
    }, {
        "name": "colors",
        "groups": ["colors"]
    }, {
        "name": "undo",
        "groups": ["undo"]
    },
    "/", {
        "name": "links",
        "groups": ["links"]
    }, {
        "name": "paragraph",
        "groups": ["list", "indent"]
    }, {
        "name": "align",
        "groups": ["align"]
    }, {
        "name": "cleanup",
        "groups": ["cleanup"]
    }
]

  • Абзац

    [{
        "name": "basicstyles",
        "groups": ["basicstyles"]
    }, {
        "name": "styles",
        "groups": ["styles"]
    }, {
        "name": "colors",
        "groups": ["colors"]
    }, {
        "name": "undo",
        "groups": ["undo"]
    },
    "/", {
        "name": "links",
        "groups": ["links"]
    }, {
        "name": "paragraph",
        "groups": ["list", "indent"]
    }, {
        "name": "align",
        "groups": ["align"]
    }, {
        "name": "insert",
        "groups": ["image", "table"]
    }, {
        "name": "cleanup",
        "groups": ["cleanup"]
    }
]