Чтобы добавить на панель инструментов CKEditor специальную кнопку, вызывающую функцию JavaScript, вы можете воспользоваться несколькими способами. Вот несколько подходов:

1. Редактирование файла config.js:

   • Найдите файл config.jsв каталоге установки CKEditor.
   • Откройте файл и добавьте следующий код:

   CKEDITOR.editorConfig = function (config) {
    config.toolbarGroups = [
      // Existing toolbar groups
      // ...
      { name: 'customGroup', groups: ['customGroup'] }
   // Add a new toolbar group
    ];
    config.removeButtons = 'Button1, Button2, ...'; // Remove any existing buttons
    config.extraPlugins = 'customPlugin'; // Load your custom plugin
    config.buttons = 'Button1, Button2, ..., CustomButton'; // Add your custom button
    config.customConfig = '';
    // Define the JavaScript function to be called when the button is clicked
    config.customConfig += 'CKEDITOR.plugins.add("customPlugin", {';
    config.customConfig += '    init: function (editor) {';
    config.customConfig += '        editor.addCommand("customCommand", {';
    config.customConfig += '            exec: function (editor) {';
    config.customConfig += '                // Call your JavaScript function here';
    config.customConfig += '                yourFunction();';
    config.customConfig += '            }';
    config.customConfig += '        });';
    config.customConfig += '        editor.ui.addButton("CustomButton", {';
    config.customConfig += '            label: "Custom Button",';
    config.customConfig += '            command: "customCommand",';
    config.customConfig += '            toolbar: "customGroup"';
    config.customConfig += '        });';
    config.customConfig += '    }';
    config.customConfig += '});';
   };

   • Сохраните файл config.js, и теперь пользовательская кнопка должна быть добавлена ​​на панель инструментов CKEditor.

2. Создание плагина:

   • Создайте новую папку в каталоге pluginsвашей установки CKEditor. Назовите его customPlugin.
   • В папке customPluginсоздайте файл с именем plugin.jsи добавьте следующий код:

   CKEDITOR.plugins.add('customPlugin', {
    icons: 'customButton',
    init: function (editor) {
      editor.addCommand('customCommand', {
        exec: function (editor) {
          // Call your JavaScript function here
          yourFunction();
        }
      });
      editor.ui.addButton('CustomButton', {
        label: 'Custom Button',
        command: 'customCommand',
        toolbar: 'customGroup'
      });
    }
   });

   • Сохраните файл plugin.js.
   • Откройте файл config.jsв каталоге установки CKEditor и добавьте следующий код:

   CKEDITOR.editorConfig = function (config) {
    // Existing configuration
    // ...
    config.toolbarGroups = [
      // Existing toolbar groups
      // ...
      { name: 'customGroup', groups: ['customGroup'] }
   // Add a new toolbar group
    ];
    config.removeButtons = 'Button1, Button2, ...'; // Remove any existing buttons
    config.extraPlugins = 'customPlugin'; // Load your custom plugin
    config.buttons = 'Button1, Button2, ..., CustomButton'; // Add your custom button
   };

   • Сохраните файл config.js, и теперь пользовательская кнопка должна быть добавлена ​​на панель инструментов CKEditor.

3. Использование CKEditor Builder:

   • Посетите веб-сайт CKEditor Builder ( https://ckeditor.com/ckeditor-4/builder ).
   • Настройте свой экземпляр CKEditor, выбрав нужные плагины и функции.
   • В разделе «Конфигурация панели инструментов» добавьте собственную кнопку, нажав кнопку «Добавить новую кнопку».
   • Настройте метку кнопки, значок и функцию JavaScript, которая будет вызываться при нажатии кнопки.
   • Нажмите кнопку «Загрузить», чтобы получить настроенный пакет CKEditor, включая вашу собственную кнопку.