null

Подключаем плагины к CKEditor в Liferay 7.x

8 августа 2019 0 Ivan Uskov

В предыдущей статье я обещал рассказать о том, как подключать плагины к CKEditor. Обещал - рассказываю.

Как я уже упоминал, с помощью OSGI Fragments (замена hook plugins в Liferay 7.x) нельзя заменить статический контент, а ведь раньше именно таким образом и подключались плагины - заменой существующих JS файлов. Потому для столь простой задачи пришлось городить некоторые к остыли.

Пойдём от обратного - сперва сообщим CKEditor'у о подключении плагина и посмотрим на результат. О том, как менять конфигурацию редакторов, было сказано в прошлой статье, так что я просто приведу соответствующий фрагмент кода:

После развёртывания данной конфигурации получим в браузере следующую ошибку:

Как видно, поиск файлов для плагина происходит по пути, связанном с существующим модулем лайфрея: CKEditor frontend web. Так как в нём нет файлов плагина SyntaxHighlighter'а (статических файлов), то их легко можно подключить с помощью OSGI Fragment module, о создании которого я также писал ранее. Если коротко:

  1. Генерируем проект (например, с помощью мавена)
mvn archetype:generate \
	-DarchetypeGroupId=com.liferay \
	-DarchetypeArtifactId=com.liferay.project.templates.fragment \
	-DliferayVersion=7.0 \
	-DartifactId=syntaxhighlighter-plugin \
	-Dpackage=com.test \
	-DgroupId=com.test \
	-Dversion=1.0 \
	-DhostBundleSymbolicName=com.liferay.frontend.editor.ckeditor.web \
	-DhostBundleVersion=1.0.43

2. Размещаем статические файлы в данном проекте, их местоположение определяем по URL. Часть /o/frontend-editor-ckeditor-web/ относится к com.liferay.frontend.editor.ckeditor.web, всё оставшееся - это путь в проекте. Статические ресурсы располагаются в src/main/resources/META-INF/resources, дальше снова смотрите в URL. У меня получилась следующая структура:

src/
└── main
    └── resources
        └── META-INF
            └── resources
                └── ckeditor
                    └── plugins
                        └── syntaxhighlight
                            ├── dialogs
                            │   └── syntaxhighlight.js
                            ├── icons
                            │   └── syntaxhighlight.png
                            ├── lang
                            │   ├── de.js
                            │   ├── en.js
                            │   ├── fr.js
                            │   ├── ru.js
                            │   └── zh-cn.js
                            └── plugin.js

3. Собираете и разворачиваете приложение, меняете конфигурацию для добавления кнопки плагина в панель инстументов. 

4. Готово, вы восхитительны!

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

Засим откланиваюсь, прощайте.