Download the PHP package besnovatyj/yii2-cms-jodit without Composer

besnovatyj/yii2-cms-jodit

Редактор Jodit для Yii2: собранный dist + виджет со встроенной интеграцией файлового менеджера @besnovatyj/filemanager-core. Возможности — нативное редактирование HTML-исходника, очистка вставки из Word/сайтов и плагинная архитектура (MIT, TypeScript).

Состав пакета

Сборка (Node / Docker)

Node/npm доступны только в контейнере. Из корня пакета:

dist/ коммитится в git — composer потребляет его без пересборки (как у остальных собранных пакетов CMS).

Оба ядра (@besnovatyj/filemanager-core, @besnovatyj/snippets-core) тянутся из npm registry по версии из package.json. Никаких локальных подмен и сборок из соседних каталогов сборка не делает: что в зависимостях — то и в бандле.

Использование

Тулбар

По умолчанию во всех размерах показывается полный набор кнопок Jodit (все группы) плюс кнопка fileManager. Настройка — через первоклассные свойства виджета:

Важно про адаптив. При toolbarAdaptive = true свойство buttons работает только на ширине ≥ sizeLG; на более узких Jodit берёт buttonsMD/SM/XS. Виджет по умолчанию наследует их из buttons, поэтому кастомный список виден на всех ширинах — задавайте их отдельно только если осознанно хотите разные тулбары.

Или без модели:

Виджет публикует ассеты, рендерит <textarea> и инициализирует Jodit ES-модулем через createEditor('#id', config). Jodit синхронизирует контент обратно в <textarea>, поэтому ActiveForm получает значение без дополнительного кода.

Файловый менеджер

Кнопка fileManager (при enableFileManager = true) открывает @besnovatyj/filemanager-core. Выбранные файлы вставляются в контент: картинки — как <img>, остальное — как ссылка. Конфиг коннектора/заголовков/пути задаёт PHP-виджет (getFmApiUrl(), getHeaders(), fmDefaultPath). Логика — в assets/plugins/fileManager.ts.

Проводник (файловый менеджер v2)

Кнопка explorer (при enableExplorer = true, по умолчанию включена) открывает проводник @besnovatyj/filemanager-core2 в режиме выбора с множественным выделением: изображения вставляются как <img>, остальные файлы — ссылкой с именем файла. Файлы без публичного URL (хранилище без отдачи наружу) пропускаются с предупреждением в консоли. Работает параллельно с v1-кнопкой fileManager под отдельной иконкой, пока v1 не выведен.

Свойства виджета: explorerStartPath (по умолчанию = fmDefaultPath), explorerConnector (по умолчанию /File/backend/api), explorerTheme (null — системная, 'light'/'dark'), explorerScoped (по умолчанию true: проводник заперт в explorerStartPath — виджет выпускает подписанный токен области, сервер отклоняет пути вне неё; false — свободная навигация). Логика — в assets/plugins/explorer.ts. Ядро подключено file:-зависимостью на packages/npm/filemanager-core2 — после публикации в npm заменить на версию.

Шорткоды

Кнопка shortcodes (при enableShortcodes = true) открывает список шорткодов с поиском и фильтром по типу; клик по строке вставляет пример вставки в позицию курсора — текстовым узлом, а не через insertHTML, чтобы редактор не интерпретировал разметку шорткода.

Список приходит из модуля besnovatyj/yii2-cms-shortcode (/Shortcode/backend/api/list, переопределяется свойством shortcodesUrl) и кэшируется на время жизни страницы. Жёсткой зависимости от модуля нет: не отвечает эндпоинт — кнопка сообщает об ошибке, редактор работает дальше; не нужен вовсе — enableShortcodes = false, и кнопка вырезается из всех тулбаров.

В отличие от файлового менеджера и сниппетов, отдельного npm-ядра здесь нет: данные плоские, UI — один список, поэтому пикер целиком лежит в assets/plugins/shortcodes.ts.

Очистка вставки

Работает штатный конвейер Jodit (cleanHTML + paste/paste-from-word):

• из Word — диалог «с форматированием / очистить / только текст» (askBeforePasteFromWord);
• с сайтов — по умолчанию allowedStyles: false, то есть чужие инлайновые стили режутся;
• запрещены script,iframe,object,embed, снимаются on*-обработчики, обезвреживается javascript:.

Тонкая настройка — через config (ключи cleanHTML, allowTags/denyTags, defaultActionOnPaste*).

Что осталось проверить/доработать (осознанно вынесено)

1. Полный набор плагинов подключается явно: import 'jodit/esm/plugins/all.js' + jodit/es2021/jodit.fat.min.css. Главный вход jodit регистрирует лишь урезанный core (без source/resizer/fullsize/align/paste-from-word) — их кнопки рендерятся, но молча не работают. Чтобы уменьшить бандл, all.js можно заменить на курированный список нужных import 'jodit/esm/plugins/<name>/<name>.js'.
2. API Jodit (Jodit.make, editor.selection.insertImage/insertHTML, форма контрола кнопки, имена встроенных иконок) выверен по докам; перед боевым использованием — один smoke-тест: собрать, открыть форму, проверить тулбар, вставку из ФМ и сохранение.
3. Uploader (drag&drop / вставка картинок) — по умолчанию выключен (uploadUrl = ''), вставка идёт через файловый менеджер. Для прямой загрузки нужен коннектор, отвечающий в формате Jodit ({ success, data: { baseurl, files, ... } }) — отдельная серверная ручка, обязанная пройти UploadPolicy файлового модуля.
4. CodeMirror как sourceEditor — Jodit поддерживает замену встроенного редактора исходника через sourceEditor; порт твоего CodeMirror-плагина — отдельная задача (точка расширения готова: передать реализацию в config).