CODEWITHSUNDEEP
javascripthtmlquill
Maxime
Maxime

Reputation: 2234

Add custom button actions to Quill

I have a blog entirely coded in php using Quill as WYSIWYG text editor. Moreover, I'm using PrismJs on it to highlight the code I put in my articles.

The problem is that I need to put manually the : <pre><code class="language-css"> *css code here* </code></pre> to show highlighted code on my posts.

I would like to know if it's possible to make custom actions on several buttons. For example, a 'CSS Code' button will include this into the text area : <pre><code class="language-css"> </code></pre> and then I will just have to put my code between the included tags to make it highlighted.

And exactly the same idea for 'HTML Code', 'JS Code', 'PHP Code' that will includes in the text area the same tags : <pre><code class="language-js/css/html or php"> *js/css/html or php code here* </code></pre> with (as you can see) different class name for the <code> tag (this is the only thing that will change).

I saw (on the Quill example page) that in the simple toolbar the 'Bold' button only transforms the word "Three" into <span class="author-gandalf"><b>Three</b></span> (if you make the text stronger).

That's why it lets me think it's currently possible.

So is there a smart way to do it, or do I just have to 'clone' the module and replace the added span and b tags with mine ?

Upvotes: 3

Views: 3751

Answers (1)

jhchen
jhchen

Reputation: 14767

Here are a few challenges you need to overcome (which is why I don't think you can do this right now):

  • Quill needs to recognize accept the new <pre> and <code> tags. You can do this by overwriting its dom whitelist
  • Every class prismjs creates needs to registered (or it will be cleaned/removed by Quill). This is easy (but tedious) for ${name}-${value} class formats such as author-gandalf, language-javascript, attr-name but not supported for single word names such as token, tag, or script which prismjs also creates.
  • Syntax highlighting by prismjs is a one time operation. As you are editing, new text will not be highlighted. You could recall prismjs's highlight API but that will modify Quill's contents in a way Quill has no insight into and lose the user's cursor position. This method also will not work well performance-wise as the code block grows.
  • Quill represents newlines with block tags to avoid ambiguity. It's not clear how forcing usage of newline characters will be received.

Upvotes: 4

Related Questions