Подключаем suggestions list в диалог CKeditor — Link

Link — это штатный диалог, который используется в CKeditor для редактирования ссылок. И выглядит он как показано на картинке сверху. Он хорошо выполняет свою задачу, но неудобным для редакторов является то, что ссылку на какой-либо статью предварительно приходится искать на самом сайте. А было бы здорово, если б поле предлагало варианты ссылок на материалы сайта, т.н. suggestions list.

Вот и займемся реализацией этой фичи.

Помимо того, что искать и копировать ссылки не очень удобно, еще и результат действий редактора в этом случае не всегда тот, что требуется. Обычно редакторы вставляют так называемые абсолютные URL, вместо требуемых относительных. Имея список «подсказок», это проблему тоже можно разрулить, т.к. ссылка будет требуемого вам формата.

Я буду решать эту задачу применительно к CKeditor v4, в CMS Drupal 7. Предполагается, что все нужные компоненты (модули и настройки) уже установлены.

Suggestions list

Какой бы CMS или Framework вы не использовали, вам нужен endpoint, который возвращает список статей. В Drupal 7 — это реализуется следующим образом:

Доступ к endpoint ограничен ‘administer site configuration‘, т.к. мы используем данные только на бек-енд. Требуется ввести не менее 3 символов для запроса.

Настройки CKEditor для работы с suggestion list

Нам нужно как то зацепиться за элемент формы диалога LINK редактора CKEditor. В API такая возможность предусмотрена (обработка события dialogDefinition).

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

В результате, по мере ввода названия статьи (вместо URL) в диалоге будет показан примерно такой список:

При клике на элемент, будет подставлена ссылка.

Написать комментарий

Мало букафф? Читайте есчо !

CKEditor не включается в при загрузке страницы

Август 30, 2018 г.

Редактор подключен и настроен, но почему то не включается при загрузке страницы. Как быть? Если вы уверены, что все настроено верно, а именно: ...

Читать

Подключение своих стилей для CKEditor 5 в Drupal

Февраль 20, 2024 г.

Чтобы добавить в редактор свои стили, обычно следуют гайду, который реализует hook mymodule_library_info_alter. При создании своих модулей для CKE5/D10, я так же пользовался данной статьей из документации. Но проблема была в том, что тот модуль, ...

Читать

 

Комментарии к «Подключаем suggestions list в диалог CKeditor — Link»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: