javascript - 向 Quill 添加自定义按钮操作

Question

我有一个完全用 php 编写的博客，使用 Quill 作为所见即所得的文本编辑器。 此外，我在上面使用 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 , 或 script prismjs 也创建。
• prismjs 的语法高亮是一次性操作。在您编辑时，新文本不会突出显示。您可能还记得 prismjs 的高亮 API，但它会以一种 Quill 无法洞察并丢失用户光标位置的方式修改 Quill 的内容。随着代码块的增长，这种方法在性能方面也不会很好地工作。
• Quill 用 block 标记表示换行符以避免歧义。目前尚不清楚将如何强制使用换行符。