Привет, уважаемые веб-разработчики! Сегодня мы собираемся погрузиться в захватывающий мир CKEditor и изучить несколько замечательных методов настройки его панели инструментов. CKEditor — популярный редактор WYSIWYG («Что видишь, то и получаешь»), который позволяет пользователям легко создавать и редактировать форматированный текстовый контент. Итак, засучим рукава и начнем!

1. Базовая конфигурация
   Самый простой способ настроить панель инструментов CKEditor — определить набор кнопок, которые вы хотите отображать. Например, если вы хотите использовать только кнопки, выделенные жирным шрифтом, курсивом и подчеркиванием, вы можете использовать следующий фрагмент кода:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'bold', 'italic', 'underline' ]
    } )
    .catch( error => {
        console.error( error );
    } );

2. Добавление кнопок
   CKEditor предоставляет широкий спектр встроенных кнопок, которые вы можете добавить на панель инструментов. Чтобы включить дополнительные кнопки, вы можете просто добавить их имена в массив toolbar. Например, если вы хотите добавить кнопки «Ссылка» и «Изображение», код будет выглядеть так:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'bold', 'italic', 'underline', 'link', 'image' ]
    } )
    .catch( error => {
        console.error( error );
    } );

3. Удаление кнопок
   С другой стороны, если вы хотите удалить определенные кнопки с панели инструментов, вы можете исключить их из массива toolbar. Допустим, вы хотите удалить кнопки «blockquote» и «numberedList». Вот как это можно сделать:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'bold', 'italic', 'underline', 'link', 'image' ],
        removePlugins: [ 'blockquote', 'numberedList' ]
    } )
    .catch( error => {
        console.error( error );
    } );

4. Группировка кнопок
   Чтобы организовать панель инструментов, CKEditor позволяет группировать кнопки вместе. Кнопки группировки могут быть полезны, если вы хотите создать раскрывающиеся меню или отдельные связанные функции. Вот пример того, как можно сгруппировать кнопки «Ссылка» и «Изображение»:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'bold', 'italic', 'underline', '|', 'link', 'image' ]
    } )
    .catch( error => {
        console.error( error );
    } );

5. Пользовательские кнопки
   CKEditor также предлагает гибкие возможности для создания пользовательских кнопок, адаптированных к вашим конкретным потребностям. Вы можете определить для этих кнопок пользовательские функции для выполнения любых желаемых действий. Допустим, вы хотите создать пользовательскую кнопку под названием «customButton», которая при нажатии вставляет заранее определенный текст. Вот как это можно сделать:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'bold', 'italic', 'underline', 'customButton' ],
        init: function( editor ) {
            editor.ui.registry.addButton( 'customButton', {
                label: 'Custom Button',
                command: 'insertCustomText',
                icon: 'path/to/icon.png'
            } );

            editor.commands.add( 'insertCustomText', {
                exec: function( editor ) {
                    editor.insertText( 'Hello, World!' );
                }
            } );
        }
    } )
    .catch( error => {
        console.error( error );
    } );

6. Изменение порядка кнопок
   CKEditor позволяет изменить порядок кнопок на панели инструментов. Для этого вы можете просто изменить порядок кнопок в массиве toolbar. Например, если вы хотите переместить кнопку «Изображение» перед кнопкой «Ссылка», код будет выглядеть следующим образом:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'bold', 'italic', 'underline', 'image', 'link' ]
    } )
    .catch( error => {
        console.error( error );
    } );

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

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: 'basic', // Default configuration
        toolbarGroups: [
            { name: 'basic', groups: [ 'basicStyles','headline', 'links', 'insert' ] },
            { name: 'advanced', groups: [ 'styles', 'colors', 'tools' ] }
        ],
        removeButtons: 'Subscript,Superscript',
        removePlugins: 'elementspath',
        extraPlugins: 'justify,font,indentblock',
        language: 'en'
    } )
    .catch( error => {
        console.error( error );
    } );

Это лишь некоторые из множества доступных методов настройки панели инструментов CKEditor. Не стесняйтесь экспериментировать и комбинировать эти методы, чтобы создать индивидуальный опыт редактирования для ваших пользователей. Приятного кодирования!