向 Quill 添加自定义按钮操作
Add custom button actions to Quill
我有一个完全用 php 编码的博客，使用 Quill 作为所见即所得的文本编辑器。
此外，我在上面使用 PrismJs 来突出显示我在文章中放置的代码。
问题是我需要手动输入：
<pre><code class="language-css"> *css code here* </code></pre> 在我的帖子中显示突出显示的代码。
我想知道是否可以对多个按钮进行自定义操作。例如，'CSS Code' 按钮会将其包含到文本区域中：<pre><code class="language-css"> </code></pre> 然后我只需将我的代码放在包含的标签之间以使其突出显示。
与 'HTML Code'、'JS Code'、'PHP Code' 完全相同的想法将在文本区域中包含相同的标签：<pre><code class="language-js/css/html or php"> *js/css/html or php code here* </code></pre> 和（如您所见) <code> 标签的不同 class 名称（这是唯一会改变的东西）。
我看到 (on the Quill example page) 在简单的工具栏中，'Bold' 按钮只会将单词 "Three" 转换为 <span class="author-gandalf"><b>Three</b></span>（如果您使文本更强）。
这就是为什么它让我认为它目前是可能的。
那么有没有聪明的方法来做到这一点，还是我只需要 'clone' 模块并将添加的 span 和 b 标签替换为我的标签？
以下是您需要克服的一些挑战（这就是为什么我认为您现在无法做到这一点）：
- Quill 需要识别接受新的
<pre> 和 <code> 标签。您可以通过覆盖它的 dom 白名单 来做到这一点
- prismjs 创建的每个 class 都需要注册（否则它将被 Quill cleaned/removed）。这对于
${name}-${value} class 格式（例如 author-gandalf、language-javascript、attr-name 很容易（但很乏味），但不支持单个单词名称，例如 [=16] =]、tag 或 script，prismjs 也创建。
- prismjs 的语法高亮是一次性操作。在您编辑时，新文本不会突出显示。您可能还记得 prismjs 的高亮显示 API，但这会以 Quill 无法洞察并丢失用户光标位置的方式修改 Quill 的内容。随着代码块的增长，这种方法在性能方面也不会很好地工作。
- Quill 用块标记表示换行符以避免歧义。目前尚不清楚如何强制使用换行符。
我有一个完全用 php 编码的博客，使用 Quill 作为所见即所得的文本编辑器。 此外，我在上面使用 PrismJs 来突出显示我在文章中放置的代码。
问题是我需要手动输入：
<pre><code class="language-css"> *css code here* </code></pre> 在我的帖子中显示突出显示的代码。
我想知道是否可以对多个按钮进行自定义操作。例如，'CSS Code' 按钮会将其包含到文本区域中：<pre><code class="language-css"> </code></pre> 然后我只需将我的代码放在包含的标签之间以使其突出显示。
与 'HTML Code'、'JS Code'、'PHP Code' 完全相同的想法将在文本区域中包含相同的标签：<pre><code class="language-js/css/html or php"> *js/css/html or php code here* </code></pre> 和（如您所见) <code> 标签的不同 class 名称（这是唯一会改变的东西）。
我看到 (on the Quill example page) 在简单的工具栏中，'Bold' 按钮只会将单词 "Three" 转换为 <span class="author-gandalf"><b>Three</b></span>（如果您使文本更强）。
这就是为什么它让我认为它目前是可能的。
那么有没有聪明的方法来做到这一点，还是我只需要 'clone' 模块并将添加的 span 和 b 标签替换为我的标签？
以下是您需要克服的一些挑战（这就是为什么我认为您现在无法做到这一点）：
- Quill 需要识别接受新的
<pre>和<code>标签。您可以通过覆盖它的 dom 白名单 来做到这一点
- prismjs 创建的每个 class 都需要注册（否则它将被 Quill cleaned/removed）。这对于
${name}-${value}class 格式（例如author-gandalf、language-javascript、attr-name很容易（但很乏味），但不支持单个单词名称，例如 [=16] =]、tag或script，prismjs 也创建。 - prismjs 的语法高亮是一次性操作。在您编辑时，新文本不会突出显示。您可能还记得 prismjs 的高亮显示 API，但这会以 Quill 无法洞察并丢失用户光标位置的方式修改 Quill 的内容。随着代码块的增长，这种方法在性能方面也不会很好地工作。
- Quill 用块标记表示换行符以避免歧义。目前尚不清楚如何强制使用换行符。