向Quill

Question

我有一个完全使用Quill作为WYSIWYG文本编辑器在php中编写的博客。 此外，我正在使用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>标签（这是唯一会改变的东西）。

我看到（on the Quill example page）在简单的工具栏中，“粗体”按钮只将单词“三”转换为<span class="author-gandalf"><b>Three</b></span>（如果你让文字变得更强）。

这就是为什么它让我认为它目前是可能的。

那么有一种聪明的方法吗，或者我只需要'克隆'模块并将添加的span和b标签替换为我的标签？

Answer 1

以下是您需要克服的一些挑战（这就是为什么我认为您现在无法做到这一点）：

• Quill需要识别接受新的<pre>和<code>标记。你可以通过覆盖它的dom白名单
来做到这一点
• 每个类prismjs创建需要注册（或者它将被Quill清理/删除）。对${name}-${value}，author-gandalf，language-javascript等attr-name类格式来说，这很容易（但很繁琐）但不支持token，{tag这样的单个词名称{1}}或script prismjs也会创建。
• prismjs的语法高亮显示是一次性操作。在编辑时，新文本不会突出显示。您可以回想起prismjs的高亮API，但这会以Quill无法洞察并丢失用户光标位置的方式修改Quill的内容。随着代码块的增长，这种方法在性能方面也不会很好。
• Quill表示带有块标记的换行符，以避免歧义。目前尚不清楚如何强制使用换行符。