
Как сделать quill модуль для генерации оглавления статьи
29.10.2024
33
0
0
0
0
Содержание
h2
Вступление
h2
Регистрация модуля и создание для него переключателя
h2
Реализация, генерации оглавления.
h2
Заключение и заметки
Вступление
В этой статье я рассмотрю вопрос о том как создать и добавить собственный модуль в редактор quill. Мы будем делать всё это на примере создания такого полезного модуля как, генератора оглавления статьи по использованным заголовкам.
На официальном сайте уже есть что-то подобное, но там не раскрыты все те проблемы с которыми я столкнулся при создании данного модуля. Например, как отключить модуль. В официальной документации я этого не нашёл. Да и организация подключения модуля, честно говоря, тоже не может быть такой, какой её показали. А так, очень интересная и познавательная статья. ☜(゚ヮ゚☜) Рекомендую.
Регистрация модуля и создание для него переключателя
Пожалуй начну с того, как мы этот модуль подключим (или зарегистрируем). Для этого, первой переменной мы присвоим значение "modules/table_of_contents", а во вторая переменная будет у нас именем инициализирующей функции. Вот так:
Теперь к реализации самой инициализирующей функции. Дабы оглавление генерировалось динамически, мы подключим к quill-у функцию. Которая будет вызываться каждый раз при изменении текста.
Подключим наш кастомный модуль к редактору.
Хорошо, мы подключили его, но как его отключать? (⊙_⊙)?А ни как. По крайней мере я не разобрался как. Вернее, я разобрался, но правильный ли это метод я не уверен. Quill имеет методы getModule, addModule, но не имеет deleteModule или removeModule. Что конечно странно.
Поэтому, моё решение данного вопроса, это не удаление модуля, а удаление непосредственно обработчика событий. В моём случае это RunTableOfContents. На странице html-редактора ты сможешь найти чекбокс для включения и выключения данного модуля. (Как ты уже понял, он удаляет не модуль, но обработчик RunTableOfContents.)
Ниже я представлю код самого обработчика. В чём суть. Все обработчики храняться в _events переменной emmiter. Чтобы добавить и(или) удалить обработчк используй метод(ы) addListener (и removeListener), который (которые) принимает(принимают) 3(4) агрумента, это:
- Тип обработчика (Для меня это TEXT_CHANGE)
- Имя функции
- Контекст (Всегда передавай quill.emmiter)
- Булевое значение, которое используется, для того чтобы запустить передаваемую функцию, единожды.
С подключением и настройкой переключателя мы закончили. Давай непосредственно взглянем на реализацию.
Реализация, генерации оглавления.
Сразу хочу пояснить, я не добавлял тег H1, ибо в первую очередь создавал инструмент для себя. И данный тег в генерации оглавления не участвует. Ты в свою очередь волен поменять, повернуть и разобрать код на столько кусочков, на сколько сможешь. Никто тебя не остановит (~ ̄▽ ̄)~.
Вот код обработчика RunTableOfContents.
Данный обработчик находит blot на котором сейчас находится курсор и проверяет его тип по тегу. Если курсор на тегах оглавлений, то есть от h2 до h6, он обновляет оглавление предварительно удалив предыдущее.
Для оглавления, я использую кастомный форматер. Вот как я его реализовал и зарегистрировал.
И ещё. Я мог использовать CSS селекторы для стилизации, но подумал, что наверное для читателя будет проще воспринять именно такую форму, без необходимости ещё и учитывать каскадные стили.
Заключение и заметки
На самом деле, для корректной работы данного модуля необходимо ещё проводить дополнительную очистку редактора. Так как мой кастомный форматер не реализован в полной своей мере. Я провожу очистку в функции loadQuill. Сразу после того, как загрузил содержимое на страницу.
Ещё, я не сделал оглавление динамическим, то есть не добавлял внутренних ссылок на соответствующие заголовки. Простите, поленился. (ಥ _ ಥ)
А так, работоспособность данного модуля можно оценить на странице моего rich quill редактора. Так же, если ты вдруг не заметил, в самом начале этой статьи есть соответствующий блок с оглавлением. Посмотри, полюбуйся (⓿_⓿)
Комментарии
(0)
Отправить
Сейчас тут пусто. Буть первым (o゚v゚)ノ