CODEWITHSUNDEEP
javascriptphptoolbarquill
Michal
Michal

Reputation: 5220

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

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?

Upvotes: 19

Views: 37550

Answers (3)

Herman Van Der Blom
Herman Van Der Blom

Reputation: 802

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.

Upvotes: 1

Ben Winding
Ben Winding

Reputation: 11787

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

Demo

Upvotes: 39

Cengiz Araz
Cengiz Araz

Reputation: 680

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.

Upvotes: 7

Related Questions