3

我有一个完全用 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>标签的不同类名（这是唯一的这会改变）。

我看到（在 Quill 示例页面上）在简单的工具栏中，“粗体”按钮仅将单词“三”转换为<span class="author-gandalf"><b>Three</b></span>（如果您使文本更强）。

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

那么有没有一种聪明的方法来做到这一点，或者我只需要“克隆”模块并用我的替换添加的span和b标签？

4

1 回答 1

4

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

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