向 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> 与（如您所见）@ 的不同类名987654325@标签（这是唯一会改变的东西）。

我看到 (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 用块标记表示换行符以避免歧义。目前尚不清楚如何强制使用换行符。