CKEditor "на максималках", расширение функционала визуального редактора

Всем привет! Решил установить пару плагинов в CKEditor, и меня понесло)
Собрал и перевёл на русский все рабочие плагины для этого компонента.
Обновил сам CKEditor до версии 4.25-LTS (Long Term Support)
Добавил функцию выбора ресурса для ссылок! Спасибо @Дима Касаткин и Степан Гончаров!
Теперь он воспринимает Excel таблицы, умеет генерировать QR коды изображением, создавать диаграммы, оформлять контент в Bootstrap «сетке», создавать Bootstrap вкладки, подсвечивать исходный код, считать кол-во слов и параграфов и многое другое…
Так же, теперь он выглядит как редактор MS Word!

UPD. Обновление самой библиотеки CKEditor + новый плагин autogrow.

UPD. 01.11.24 Новые плагины — вставка изображений со внешних источников и красивые уведомления: uploadfile, uploadwidget, notificationaggregator, filetools.



Вот полный список добавленных плагинов:

• autogrow — автоматическая высота по контенту
• autolink — автоматическая ссылка при вставке или написании URL
• balloonpanel, balloontoolbar и floating-tools — параметры того или иного элемента и текста в виде подсказки (tooltip)
• bootstrapTabs — вставка Bootstrap табов (вкладки)
• btgrid — вставка Bootstrap сетки
• chart — диаграммы в виде: гистограммы, линии, круга, круга с полями, пончика
• codemirror — подсветка кода в источнике с горячими клавишами
• codeTag — экранирование кода тегом code
• html5audio — вставка аудиофайла
• html5video — вставка видео HTML5
• lineheight — изменение высоты строк
• tableresize — изменение размера таблиц курсором
• textindent — автоматические отступы в каждом абзаце
• texttransform — изменение текста: маленькими, большими, с большой
• wordcount — подсчёт парагрофов и слов
• yaqr — генератор QR кодов с возможностью менять их размер, внутренний отступ, цвета через палитру
• placeholder — вставляем в контент плейсхолдеры из TV полей и MIGX
• textselection — сохраняет выделение текста при переключении из WYSIWYG в исходный код

Это список самых интересных функций, что я добавил. Есть некоторые плагины чисто технические, которые необходимы для работы других…

Итак! Давайте же сделаем такую «конфетку»!

1. Скачиваем ckeditor_mod.zip
2. Открываем /manager/assets/components/ckeditor/ и удаляем тут папку ckeditor
3. Грузим на место удалённой папки ту, что в архиве

Теперь, если у вас MODX 3, что бы работал список ресурсов при вставке ссылки
Создаём файл editorsearch.class.php по следующему пути:

core/src/Revolution/Processors/ckeditor/resource

И вставляем код:

<?php
use MODX\Revolution\Processors\ModelProcessor;
use MODX\Revolution\Processors\ProcessorResponse;
use xPDO\Om\xPDOQuery;

class editorSearchResGetListProcessor extends \MODX\Revolution\Processors\Model\GetListProcessor
{
    public $objectType = 'modResource';
    public $classKey = \MODX\Revolution\modResource::class;
    public $defaultSortField = 'pagetitle';
    public $defaultSortDirection = 'ASC';
    //public $permission = 'list';

    /**
     * We do a special check of permissions
     * because our objects is not an instances of modAccessibleObject
     *
     * @return boolean|string
     */
    public function beforeQuery()
    {
        if (!$this->checkPermissions()) {
            return $this->modx->lexicon('access_denied');
        }

        return true;
    }

    /**
     * @param xPDOQuery $c
     *
     * @return xPDOQuery
     */
    public function prepareQueryBeforeCount(xPDOQuery $c)
    {
        $query = trim($this->getProperty('query'));
        if ($query) {
            $c->where([
                'id' => $query,
                'OR:pagetitle:LIKE' => "%{$query}%",
            ]);
        }
        if ($id = $this->getProperty('id')) {
            $c->where([
                'id' => $id,
                'OR:id:>' => 0,
            ]);
            $c->sortby('FIELD(id, ' . $id . ')', 'DESC');
        }
        return $c;
    }
}

return 'editorSearchResGetListProcessor';

Всё, с файлами разобрались, теперь перейдём к сис. настройкам:

1. ckeditor.extra_plugins — autogrow, codemirror, codeTag, autocomplete, ajax, textwatcher, xml, textmatch, balloontoolbar, notification, autolink, tableresize, youtube, html5video, balloonpanel, button, lineheight, btgrid, tabletools, html5audio, bootstrapTabs, chart, textindent, texttransform, floating-tools, yaqr, wordcount, placeholder, textselection, panelbutton, colorbutton, colordialog, dialogui, dialog, a11yhelp, dialogadvtab, basicstyles, bidi, blockquote, toolbar, clipboard, panel, floatpanel, templates, menu, contextmenu, copyformatting, div, editorplaceholder, resize, elementspath, enterkey, entities, exportpdf, popup, filetools, filebrowser, find, floatingspace, listblock, richcombo, font, fakeobjects, format, horizontalrule, htmlwriter, iframe, wysiwygarea, image, indent, indentblock, indentlist, justify, menubutton, link, list, liststyle, magicline, maximize, pastetext, pastetools, pastefromgdocs, pastefromlibreoffice, pastefromword, preview, removeformat, save, selectall, showblocks, showborders, sourcearea, specialchar, scayt, stylescombo, tab, table, tableselection, undo, lineutils, widgetselection, widget, notificationaggregator, uploadwidget, uploadimage
2. ckeditor.remove_plugins — forms,pagebreak,newpage,print,language,smiley,about
3. ckeditor.skin — office2013
4. ckeditor.toolbar —
   

   [[
   	{ name: "document", groups: [ "mode", "document", "doctools" ], items: [ "Source", "-", "Save", "NewPage", "ExportPdf", "Preview", "Print", "-", "Templates" ] },
   	{ name: "clipboard", groups: [ "clipboard", "undo" ], items: [ "Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Undo", "Redo" ] },
   	{ name: "editing", groups: [ "find", "selection", "spellchecker" ], items: [ "Find", "Replace", "-", "SelectAll", "-", "Scayt" ] },
   	"/",
   	{ name: "basicstyles", groups: [ "basicstyles", "cleanup" ], items: [ "Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "-", "CopyFormatting", "RemoveFormat" ] },
   	{ name: "paragraph", groups: [ "list", "indent", "blocks", "align", "bidi" ], items: [ "NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "Blockquote", "CreateDiv", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "-", "BidiLtr", "BidiRtl", "Language" ] },
   	{ name: "links", items: [ "Link", "Unlink", "Anchor" ] },
   	{ name: "insert", items: [ "Table", "HorizontalRule", "Smiley", "SpecialChar", "Iframe" ] },
   	"/",
   	{ name: "styles", items: [ "Styles", "Format", "Font", "FontSize" ] },
   	{ name: "colors", items: [ "TextColor", "BGColor" ] },
   	{ name: "tools", items: [ "Maximize", "ShowBlocks" ] },
   	{ name: "others", items: [ "-" ] },
   	{ name: "about", items: [ "About" ] }
   ]]

5. ckeditor.toolbar_groups —

   [[
   	{ name: "document", groups: [ "mode", "document", "doctools" ] },
   	{ name: "clipboard", groups: [ "clipboard", "undo" ] },
   	{ name: "editing", groups: [ "find", "selection", "spellchecker" ] },
   	{ name: "forms" },
   	"/",
   	{ name: "basicstyles", groups: [ "basicstyles", "cleanup" ] },
   	{ name: "paragraph", groups: [ "list", "indent", "blocks", "align", "bidi" ] },
   	{ name: "links" },
   	{ name: "insert" },
   	"/",
   	{ name: "styles" },
   	{ name: "colors" },
   	{ name: "tools" },
   	{ name: "others" },
   	{ name: "about" }
   ]]

Чистим кэш — удалив всё в папке core/cache, через manager не помогает, и обновляем страницу с кэшем (Ctrl+F5).

И всё) Пользуемся! Если какие то «фичи» не нужны, просто уберите их название в ckeditor.extra_plugins.

Если нужен редактор не ломающий фронт, то уберите chart, btgrid и bootstrapTabs!

Поблагодарить автора, а также немного порадовать других активных участников сообщества можно,
отправив донат одним из следующих способов:

• На карту Тинькофф https://tinkoff.ru/sl/2V9U9RrcJZP
• На YooMoney https://yoomoney.ru/fundraise/RPkkYwNcL7A.230131
• На Qiwi кошелек https://qiwi.com/p/77012827737
• Казахстан Каспи по номеру +7(701)282-77-37

Спасибо за внимание!

Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "ajax" was not found at "http://site.com/manager/assets/components/ckeditor/ckeditor/plugins/ajax/plugin.js?t=1.4.5-pl".

config.iframe_attributes = {
    sandbox: 'allow-scripts allow-same-origin',
    allow: 'autoplay'
}

Code Snippet

CKEDITOR.editorConfig = function (config) {

config.startupMode = 'source';