向Quill添加自定義按鈕操作

Question

我有一個使用Quill作爲所見即所得文本編輯器在PHP中完全編碼的博客。 此外，我正在使用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）在簡單的工具欄中，「粗體」按鈕只會將單詞「Three」轉換爲<span class="author-gandalf"><b>Three</b></span>（如果您使文字更強）。

這就是爲什麼它讓我覺得它目前是可能的。

那麼有沒有一個聰明的方法來做到這一點，或者我只需要'克隆'模塊，並替換添加的span和b標籤與我的？

Answer 1

這裏有您需要克服一些挑戰（這就是爲什麼我不認爲你可以做到這一點現在）：

• 奎爾需要認識到接受新<pre>和<code>標籤。你可以通過覆蓋它的dom白名單來做到這一點
• 每個prismjs創建需要註冊（或將由Quill清理/刪除）。這是很容易的（但繁瑣），用於支持單個字的名字，如token，tag，或script這prismjs也創造${name}-${value}類格式，如author-gandalf，language-javascript，attr-name但不是。
• prismjs的語法高亮顯示是一次性操作。在編輯過程中，新文字將不會突出顯示。您可以回想一下prismjs的高亮API，但它會以Quill無法洞察和丟失用戶光標位置的方式修改Quill的內容。隨着代碼塊的增長，這種方法在性能方面也不能很好地工作。
• 羽毛代表帶有標籤的換行符以避免模糊。目前還不清楚如何強制使用換行符。