Аутсорсинг файлов ckeditor5 с TYPO3 13.3

На чтение 4 мин Опубликовано 29.09.2024

Вопрос или проблема

В качестве примера того, как настроить файлы ckeditor5 с TYPO3, я хотел бы расширить плагин специальных символов своими собственными глифами (что работает в файле поставщика, но будет потеряно после обновления ядра).

У меня есть пользовательская конфигурация

в моем ext_localconf.php
$GLOBALS[‘TYPO3_CONF_VARS’][‘RTE’][‘Presets’][‘ub_sitepackage’] = ‘EXT:ub_sitepackage/Configuration/RTE/ckeditor-ub.yaml’;

и в page.tsconfig
RTE.default.preset = ub_sitepackage

Мой пресет загружается, и некоторые основные изменения отображаются и работают как ожидается.

Моя идея настроить специальные символы под свои нужды заключалась в том, чтобы переместить файл ckeditor5-special-characters.js в мой сайт-пакет
ub_sitepackage/Resources/Public/JavaScript

Если я правильно понял, мне нужен запись в /Configuration/JavaScriptModules.php моего ub_sitepackage (вероятно, из-за причин JavaScript ES6)

<?php

return [
    'dependencies' => ['core', 'backend'],
    'imports' => [
        '@ub-company/ub_sitepackage/' => 'EXT: ub_sitepackage/Resources/Public/JavaScript/ckeditor5-special-characters.js'
        ],
        ]

В моей YAML-конфигурации я импортирую файл

editor:
  config:
    importModules:  
      - { module: '@ub-company/ub_sitepackage/ckeditor5-special-characters.js' }

Кнопка добавляется на панель инструментов

toolbar:
  items:
   ...
   - specialCharacters

После очистки кэша ckeditor использует оригинальный файл. Если я закомментирую строку

    //'@ckeditor/ckeditor5-special-characters' => 'EXT:rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-special-characters.js',

в vendor-JavaScriptModules.php кнопка больше не отображается.

Заранее благодарю за вашу помощь

Ответ или решение

Чтобы настроить и настроить CKEditor 5 в TYPO3 и перенести пользовательский плагин специальных символов в ваш собственный пакет расширения, выполните следующие шаги:

Создайте структуру папок и файлов:
Убедитесь, что в вашем пакете расширения, например, ub_sitepackage, есть следующая структура:

ub_sitepackage/
├── Configuration/
│   └── JavaScriptModules.php
├── Resources/
│   └── Public/
│       └── JavaScript/
│           └── ckeditor5-special-characters.js
└── Configuration/
   └── RTE/
       └── ckeditor-ub.yaml

Редактирование JavaScriptModules.php:
Убедитесь, что ваш файл JavaScriptModules.php правильный. Пример:

<?php

return [
   'dependencies' => ['core', 'backend'],
   'imports' => [
       '@ub-company/ub_sitepackage/' => 'EXT:ub_sitepackage/Resources/Public/JavaScript/ckeditor5-special-characters.js',
   ],
];

Настройка конфигурации RTE:
Проверьте, что ваш файл ckeditor-ub.yaml правильно настроен для импорта вашего модуля:

editor:
 config:
   importModules:
     - { module: '@ub-company/ub_sitepackage/ckeditor5-special-characters.js' }

   toolbar:
     items:
       ...  # Другие элементы панели инструментов
       - specialCharacters

Проблема с оригинальным файлом:
Чтобы избежать использования оригинального файла, вы должны убедиться, что ваш модуль правильно определяется и зарегистрирован. Если вы под комментарием строку '@ckeditor/ckeditor5-special-characters' => 'EXT:rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-special-characters.js',, то CKEditor не сможет найти нужный модуль, и кнопка не отобразится. Вам нужно убедиться, что ваш собственный плагин загружается вместо оригинала.
Кэширование:
После внесения всех изменений обязательно очистите кэш TYPO3:
- Зайдите в Панель администратора TYPO3.
- Выберите "Администрирование" → "Очистить кэш".
- Убедитесь, что вы очистили все кэши, особенно "Кэш структуры".
Тестирование:
Перейдите на страницу, где используется ваш редактор, и проверьте, отображается ли кнопка специальных символов. Если все сделано правильно, ваша пользовательская версия плуга должна заменять оригинальную.
Логирование и отладка:
Если кнопка не отображается, проверьте консоль браузера на наличие ошибок JavaScript. Убедитесь, что путь к вашему файлу JavaScript правильный и что файл доступен для загрузки. Используйте инструменты разработчика (F12 в большинстве браузеров) для диагностики возможной проблем.

Если после выполнения всех этих шагов у вас все еще возникают проблемы, возможно, вам стоит проверить другие конфигурации или настройки, которые могут препятствовать загрузке вашего плагина.