Добавляем в плагин CKEditor для MODx 2.* вставку изображений из буфера за 5 минут

При работе с визуальными редакторами, такими как CKEditor, нередко возникает потребность вставлять изображения напрямую из буфера обмена — например, сделанные скриншоты. Однако по умолчанию CKEditor не поддерживает вставку изображений в формате base64 без использования внешнего сервера или плагина. В этом руководстве мы рассмотрим, как реализовать вставку изображений в формате base64 с помощью кастомного плагина для CKEditor в рамках CMS MODX.

Шаг 1: Создание плагина CKEditor

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

1. Перейдите в директорию core/components/ckeditor/elements/plugins.

2. Создайте папку pastebase64.

3. Внутри нее создайте файл plugin.js со следующим содержимым:

CKEDITOR.plugins.add('pastebase64', {
    init: function(editor) {
        if (CKEDITOR.version < 4.5) {
            console.log('Для работы плагина pastebase64 требуется CKEditor 4.5+');
            return;
        }

        // Обработчик вставки данных
        editor.on('paste', function(evt) {
            var data = evt.data,
                dataTransfer = data.dataTransfer,
                dataValue = data.dataValue;

            if (!dataTransfer) {
                return;
            }

            var filesCount = dataTransfer.getFilesCount();
            if (filesCount > 0) {
                for (var i = 0; i < filesCount; i++) {
                    var file = dataTransfer.getFile(i);
                    
                    if (!file.type.match('image.*')) {
                        continue;
                    }

                    var reader = new FileReader();
                    reader.onload = function(evt) {
                        var result = evt.target.result;
                        // Создаем элемент изображения с данными base64
                        var element = editor.document.createElement('img', {
                            attributes: {
                                src: result
                            }
                        });
                        
                        // Вставляем изображение в текущую позицию курсора
                        setTimeout(function() {
                            editor.insertElement(element);
                        }, 10);
                    };
                    reader.readAsDataURL(file);
                }
                
                evt.stop();
                return;
            }
            
            // Проверяем, содержит ли вставляемый контент изображения в формате base64
            if (dataValue && dataValue.indexOf('data:image') !== -1) {
                return;
            }
        });
    }
});

Шаг 2: Интеграция плагина в MODX

Теперь добавим автоматическую регистрацию нашего плагина в CKEditor при открытии админки MODX.

1. Перейдите в Элементы → Плагины → Создать новый плагин.

2. Назовите плагин, например, CKEditorPasteBase64.

3. Установите обработку событий OnDocFormPrerender и OnManagerPageBeforeRender.

4. Вставьте следующий PHP-код:

<?php
// Проверяем, что используется CKEditor
if ($modx->getOption('which_editor', null, '') == 'CKEditor' && $modx->getOption('use_editor', null, true)) {
    $modx->regClientStartupHTMLBlock('
    <script type="text/javascript">
        // Регистрируем плагин pastebase64
        if (typeof CKEDITOR !== "undefined") {
            CKEDITOR.plugins.addExternal("pastebase64", "/core/components/ckeditor/elements/plugins/pastebase64/plugin.js");
            
            // Функция, которая добавляет плагин в конфигурацию CKEditor
            var originalCKEditorReplace = CKEDITOR.replace;
            CKEDITOR.replace = function(element, config) {
                config = config || {};
                config.extraPlugins = config.extraPlugins ? config.extraPlugins + ",pastebase64" : "pastebase64";
                return originalCKEditorReplace.call(this, element, config);
            };
            
            // Для уже созданных экземпляров
            for (var i in CKEDITOR.instances) {
                if (!CKEDITOR.instances[i].config.extraPlugins) {
                    CKEDITOR.instances[i].config.extraPlugins = "pastebase64";
                } else if (CKEDITOR.instances[i].config.extraPlugins.indexOf("pastebase64") === -1) {
                    CKEDITOR.instances[i].config.extraPlugins += ",pastebase64";
                }
            }
        }
    </script>
    ');
}

5. Сохраните и активируйте плагин.

Результат

Теперь при вставке изображения в редактор (например, через Ctrl+V из буфера обмена) оно будет автоматически преобразовано в формат base64 и вставлено прямо в контент, без необходимости загружать файл на сервер.

Это особенно полезно при создании быстрого контента, инструкций или документации, где вставка скриншотов с минимумом действий критически важна.

Важно

• Убедитесь, что размер вставляемых изображений не превышает лимит, установленный сервером или браузером. Большие base64-строки могут замедлить работу редактора.

• Изображения в base64 увеличивают общий объем HTML-кода, что может негативно сказаться на скорости загрузки страниц. Рекомендуется использовать этот способ только в административной части сайта.