How do I add "show html" button in Quill like in Wysiwyg?

Question

I recently found out about Quill text editor and since I am playing with new stuff in php and javascript I decided to use it in my app instead of Wysiwyg.

Quill documentation is really minimalistic though. How do I add a button that allows user to show and edit current html?

Do I have to extend Quill and make one of my own?

Peabody

Answer 1

If you check the following link, you will see that they don't add the option for an HTML button to the configuration list keys. Probably, you have to extend the library. http://quilljs.com/docs/configuration/ is the link to the configuration page.

In the API calls list I saw that you can do a function call to get HTML from the plugin. You can find it in the following link. The function name is called getHTML(). So you might have to extend the library by creating your own button and a display area.

Schuler

In other words I am back to using TinyMCE. Thanks for your answer though. – Peabody

While learning Quill, I came across kenoleon.github.io/Front-End-Web-Dev-UI-UX/quilljs that provided several useful examples. Example #2 showed how to get the HTML from Quill by using the innerHTML property (editor.root.innerHTML -- where "editor" is the name of the quill object). Not sure about editing it directly. Maybe put it in another editor? – Begum

this is actually a basic feature, why would they r not making it accessible – Bavaria

I'm going to try something else. I have no idea why Quill is so popular. It isn't great. – Biak

Answer 2

Well this was still an issue 3 years later.

So I made a little module to accomplish this.

https://github.com/benwinding/quill-html-edit-button

Dappled

Nice one, if u just style that pop-up a bit better it could fit right into quill :) – Diphenylamine

Answer 3

The Problem why they did not implement this that you can't go back to Delta's. Quill works with Delta's. From those Delta's you can extract Html but from that Html you can't go back to Delta's. This is how Quill works.

Example: I have a tag <h1>TEST IF <span style='background:yellow'>HIGHLIGHT</span> WORKS</h1>

While editing the delta's for this code are generated by the Editor but if you edit this Html part it can't convert back to Delta's.

Why it works this way? The editor makes the Delta's when you selected a part of text where the effect must be created. Thats when the Delta is created and thats how Quill knows how to create Html.

Missing in Quill: A HtmlToDeltasParser that creates Delta's from HTML and after that put those Delta's in the Editor.

Bresnahan