Установка CKEditor на modX в ручную

17 Июля 2019 01:41 (Редактировано: 05 Августа 2020 14:32)

Речь пойдет об установке CKEditor без скачивания компонента из репозитория Modx. Связано это с тем, что компонент содержит в себе старую (или нестабильную) версию CKEditor. Да, он ее хорошо и удобно интегрирует, позволяет управлять конфигами через сис. настройки не залезая в конфиг, но с этой версией может возникнуть ряд проблем, например, при установке плагинов. Мне необходим был плагин Code Snippet который наотрез отказывался работать с этой версией CKeditor. Перерыл весь инет и кучу инфы и так ничего не нашел. Решил сделать все сам:

1. Удаляем CKEditor через установку компонентов;

2. Убеждаемся, что у нас не осталось следов CKEditor в manager/assets/components. Также дропаем сис. настройки и папку core/components/ckeditor, чтобы не было мусора в системе;

3. Качаем дефолтный CKEditor 4 с оф сайта. На момент написания статьи, на оф. сайте CKEditor присутствовал конструктор пакета, благодаря которому можно выпилить ненужное и добавить нужное;

4. Далее льём все, что в архиве, например, в папку manager/assets/components/ckeditor, чтобы было удобнее и привычнее

5. Теперь самое интересное. Нам нужно подключить скрипт ckeditor.js который после распаковки должен находиться в папке manager/assets/components/ckeditor. Идем в файл manager/templates/default/header.tpl и вставляем перед закрывающим тегом </head> что то типа <script src="{$_config.manager_url}assets/components/ckeditor/ckeditor.js"></script>

Если ваш путь отличается то меняем, но не трогая {$_config.manager_url} т.к. путь до папки manager/ по дефолту. 

6. Теперь нам необходимо инициализировать CKEditor и чтобы он схавал нашу модыксовскую textarea и создал из нее чудесный редактор. Поскольку мы не сильны в ExtJS, а для инициализации необходимо вставить скрипт прямо в форму то мы просто сделаем так: копируем со старого CKEditor (тот что компонент для Modx) файл manager/assets/components/ckeditor/modx.htmleditor.js и копируем его к нам в новый CKEditor рядом с основным файлом ckeditor.js. И таким же образом через header.tpl подключаем после первого файла <script src="{$_config.manager_url}assets/components/ckeditor/modx.htmleditor.js"></script>

Примечание. При этом варианте некорректно работает вставка изображений в редакторе