Добавить действия с настраиваемыми кнопками в Quill

У меня есть блог, полностью написанный на php с использованием Quill в качестве текстового редактора WYSIWYG. Более того, я использую PrismJs, чтобы выделить код, который я вставляю в свои статьи.

Проблема в том, что мне нужно вручную поставить: <pre><code class="language-css"> *css code here* </code></pre>, чтобы отображать выделенный код в моих сообщениях.

Хотелось бы узнать, можно ли настраивать действия на нескольких кнопках. Например, кнопка «Код CSS» будет включать это в текстовую область: <pre><code class="language-css"> </code></pre>, а затем мне просто нужно будет поместить свой код между включенными тегами, чтобы выделить его.

И точно такая же идея для «HTML-кода», «JS-кода», «PHP-кода», которая будет включать в текстовую область те же теги: <pre><code class="language-js/css/html or php"> *js/css/html or php code here* </code></pre> с (как вы можете видеть) другим именем класса для тега <code> (это единственное что поменяю).

Я видел (на странице примера Quill), что на простой панели инструментов кнопка «Полужирный» только преобразует слово " Три "в <span class="author-gandalf"><b>Three</b></span> (если усилить текст).

Вот почему это позволяет мне думать, что в настоящее время это возможно.

Так есть ли разумный способ сделать это, или мне просто нужно «клонировать» модуль и заменить добавленные теги span и b моими?


person Maxime Lafarie    schedule 06.11.2015    source источник


Ответы (1)


Вот несколько проблем, которые вам необходимо преодолеть (поэтому я не думаю, что вы сможете это сделать прямо сейчас):

  • Quill необходимо распознать, что он принимает новые теги <pre> и <code>. Вы можете сделать это, перезаписав его белый список доменов
  • Каждый класс, который создает prismjs, необходимо зарегистрировать (или он будет очищен / удален Quill). Это легко (но утомительно) для ${name}-${value} форматов классов, таких как author-gandalf, language-javascript, attr-name, но не поддерживается для однословных имен, таких как token, tag или script, которые также создает prismjs.
  • Подсветка синтаксиса с помощью prismjs - одноразовая операция. Во время редактирования новый текст не выделяется. Вы можете вспомнить API выделения prismjs, но это изменит содержимое Quill таким образом, что Quill не сможет понять и потеряет позицию курсора пользователя. Этот метод также не будет работать хорошо с точки зрения производительности по мере роста блока кода.
  • Quill представляет символы новой строки с тегами блоков, чтобы избежать двусмысленности. Непонятно, как будет принято принудительное использование символов новой строки.
person jhchen    schedule 10.11.2015
comment
Спасибо, чхен! Неважно, если код не выделен при включении между тегами. Я подробно рассмотрю ваши советы. Распознает ли QuillJS хотя бы теги <code></code>? - person Maxime Lafarie; 10.11.2015
comment
Вам нужно либо добавить codepre по отдельности) в качестве настраиваемого формата, либо добавить их в нормализованный список тегов напрямую через quill.editor.doc.normalizer.whitelist. Оба являются уродливыми решениями, которые 1.0 стремится исправить. - person jhchen; 11.11.2015