向Quill添加自定义按钮操作

Add custom button actions to Quill

本文关键字：按钮 操作 自定义 添加 Quill      更新时间：2023-09-26

我有一个完全用php编写的博客，使用Quill作为所见即所得的文本编辑器。此外，我还在上面使用PrismJs来突出显示我在文章中的代码。

问题是我需要手动放置：<pre><code class="language-css"> *css code here* </code></pre>在我的帖子上显示突出显示的代码。

我想知道是否可以在几个按钮上进行自定义操作。例如，一个"CSS代码"按钮将把它包含在文本区域：<pre><code class="language-css"> </code></pre>中，然后我只需要把我的代码放在包含的标签之间，就可以突出显示它。

"HTML代码"、"JS代码"answers"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标签？

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

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