Quill: how to quill.getHTML()

[che3vinci]

just as the title said

[TomCaserta]

Its no longer the concern of quill to provide HTML and the they have removed the getHTML methods, it now uses something called delta objects which is a JSON object representation of the output.

I'd argue that this library is fairly useless without this functionality as nothing else currently can parse the delta object and provide a html structure which is probably what most people want to use quill for. I understand why they wish to abstract away from providing HTML (and accepting HTML as its initial value) but I wish there was something in place before making this change in various languages to parse the delta objects and provide HTML so we can, for example, just store the delta object in our database and render it when necessary.

In the meantime you can use:

 quill.container.firstChild.innerHTML

To get the contents of the rendered HTML according to the browser you are currently on.

[jhchen]

Quill has always used Deltas as a more consistent and easier to use (no parsing) data structure. There's no reason for Quill to reimplement DOM APIs in addition to this. quill.root.innerHTML or document.querySelector(".ql-editor").innerHTML works just fine (quill.container.firstChild.innerHTML is a bit more brittle as it depends on child ordering) and the previous getHTML implementation did little more than this.

[TomCaserta]

Ah fair enough, assumed it used deltas but thought it was only internally previously, I've not followed the project for long. Just remember using it as a somewhat drop in replacement of TinyMCE etc. Thanks for the info regarding quill.root.innerHTML.

[artaommahe]

@jhchen thx for quill.root.innerHTML but why not explicitly getHtml() method due to most apps stores result content in html format? it's necessary to get result html before saving

[f15gdsy]

I would like to use delta format, but for rendering the format, I have to include the whole editor, which is too heavy for me.

[fernandogmar]

Hi guys,

There is another concern, quill.root.innerHTML returns the html, right?

As I could check .ql-editor class that use white-space: pre-wrap; so you can notice when you are typing multiple white spaces: hello----there (using dashes for better visualization of the spaces). But saving and showing later the html from quill.root.innerHTML will show just: hello there.

A similar problem already fixed on quilljs it is when you add break lines that creates a new line as follow <p></br><p> and when you get the text this is transformed to \n

Following this solution for break lines.... I think something similar should happen with white spaces
when you get the html it should be something as: hello    there when you get the text it should be something as: hello----there (using dashes for better visualization of the spaces). Since you are editing WYSIWYG... so the user is adding 4 spaces conciously, so he wants 4 spaces no only one! :D

It is fair that quilljs doesn't want to face html transformation problems, but at least it should be worried about how these deltas can be consume as html... some guides? a different tool? :D In other case this kind of problems would be a cons to adopt quilljs :'(

Thanks for all guys!

[ysyyork]

@fernandogmar Why not persist content using delta as json format? I tested and delta will retain multiple spaces.

[fernandogmar]

Because this data is used as html so the problem will be always there. From
my point of view deltas only make sense on editing, and always you use
quilljs

2017-02-26 23:31 GMT+01:00 York [e-mail]:

@fernandogmar https://github.com/fernandogmar Why not persist content
using delta as json format? I tested and delta will retain multiple spaces.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/quilljs/quill/issues/903#issuecomment-282593801, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAzFDKuDHRLMdQv9qpdvRrI368dIBU83ks5rgf04gaJpZM4JxmF1
.

[ysyyork]

@fernandogmar I see what you mean. Thanks for reminding. That's also my case.

[chris-hall-hu]

Just run into this issue, it took longer than it should to work out how to grab the HTML, now going to have to do some testing to ensure all the formatting in preserved.

If you are using quill to edit and then simply presenting the edited data somewhere else (without the overhead of quill) this is a bit of a hiccough/potential headache in what otherwise was a very easy integration.

[fernandogmar]

[ROOKIE ERROR]
Just for fixing the issue... I decided replace ' ' (character space) by   so having two spaces ' ' -->    , awesome.... but the problem came   doesn't follow the same rules as ' ' (space character)...

that means the line wouldn't be broken in case it were needed... as (his name shows up Non breaking space)

Searching about this kind of problems it looks like there are more space characters that I already knew: https://en.wikipedia.org/wiki/Whitespace_character

alternative workarounds:

• use EN SPACE  
• mix NBSP and ' ' character spaces
• mix NBSP with <wbr> (the zero width space)
• using padding with a custom tag

some detailed white spaces:

• NBSP
• Zero width Space

[danrichards]

This works.

Quill.prototype.getHtml = function() {
    return this.container.firstChild.innerHTML;
};

// See @Hainesy suggestion below.

[Hainesy]

@danrichards, as @jhchen mentioned, that depends on the order of child elements. A less brittle implementation would be:

Quill.prototype.getHtml = function() {
    return this.container.querySelector('.ql-editor').innerHTML;
};

[danrichards]

Thanks @Hainesy and @jhchen !

[isaaclyman]

I've been using the quill-delta-to-html NPM package in my webapp, Edward, and so far it works great. Not an official library, but since insert-only deltas are mostly straightforward to parse, it's not a difficult operation.

[jlautner]

I ended up storing the delta, and reconstituting using this function:
function quillGetHTML(inputDelta) { var tempQuill=new Quill(document.createElement("div")); tempQuill.setContents(inputDelta); return tempQuill.root.innerHTML; }

[Promotools]

$("#myForm").find('#quillEditor .ql-editor').html()
works for me.

• #quillEditor: is the ID of div where editor is loaded

[sourcegr]

A little late to the party, but here goes anyway :)

In order to get any extra spaces the user has inserted, I use

this.editor.root.innerHTML.split(' ').join('  ')

(note, there are two spaces in the split and one space in the join!)

[thenikso]

the problem with getting the innerHTML from the editor itself is that if the cursor is in a "styled" position, something like this is added:

<span class="ql-something..."><span class="ql-cursor">:question:</span></span>

Using quill-delta-to-html makes it quite verbose to add custom styles.

I also ended up using @rengelking solution of creating a temporary new Quill instance

[mrspeaker]

This thread has me a bit worried about using Quill for our project. I chose it because I am big fan of the Delta format - but we have several third-party integrations and they only understand, and will be displaying, plain-old-HTML. Due to some legacy integration, we need to store the text editor data as HTML and reconstitute it (to its Delta format) each time. We are doing additional transformations on the Delta format after reconstituting it.

Is this unsafe? Pulling the HTML from the browser-rendered output sounds like we are dependent on browser implementations, and discrepancies could occur moving between the two formats. But at some point the Delta must be transformed into HTML to display the HTML in the first place - is there any way to hook into that?

[dvtan]

There's no reason for Quill to reimplement DOM APIs in addition to this. quill.root.innerHTML or document.querySelector(".ql-editor").innerHTML works just fine

Won't work for nested lists. Instead of nesting HTML tags like a normal person would, Quill uses... classes. Like ql-indent-1, ql-indent-2, etc. So basically, the innerHTML is not self-contained, you still have to include the Quill CSS... and at that point, it defeats the purpose of outputting raw HTML.

[sourcegr]

@dvtan this is a serious problem...
I guess not a lot of people cares, because I have it in many projects and nobody ever complained to me.
Don't get me wrong, I don't ike it either!

Are there any more cases where quill behaves in such an unexpected way?

[PrasadChinthala]

Quill has always used Deltas as a more consistent and easier to use (no parsing) data structure. There's no reason for Quill to reimplement DOM APIs in addition to this. quill.root.innerHTML or document.querySelector(".ql-editor").innerHTML works just fine (quill.container.firstChild.innerHTML is a bit more brittle as it depends on child ordering) and the previous getHTML implementation did little more than this.

Thanks a tone, it has solved the problem. Earlier I used to store the data as this.mailTemplateForm.controls.body.setValue(this.editor.getText()); So plain text is getting stored instead I tried this document.querySelector(".ql-editor").innerHTML so it works just fine

[n3omaster]

This worked for me:

[boomanaiden154]

I recently created a library that adds this functionality to quill. It transforms the delta objects into raw HTML that can be stored in a database, or rendered on the page. It supports formulas, and if you wuld like anything else to be supported, issues/PRs are welcomed. quillgethtml

[aacassandra]

@boomanaiden154 not work if image has resized

[boomanaiden154]

@aacassandra Quill doesn't provide the ability to resize images by default. Could you give more specifics on what library you are using to provide this functionality?

[aacassandra]

@boomanaiden154, while this is @Hainesy's answer that I can use. sorry I forgot to tell you about the image resize library. kensnyder/quill-image-resize-module

[josduj]

Possible downside of using innerHTML is that it can contain

<span class="ql-cursor"></span>

To avoid that, I've used the following

export function getQuillHtml(editor: QuillInstance) {
    const tempCont = document.createElement('div');
    const tempEditor: QuillInstance = new Quill(tempCont);
    tempEditor.setContents(editor.getContents());
    return '' + tempEditor.root.innerHTML;
}

Still terrible solution, but gets the job done

[pengliheng]

you are fun.

[RyanEwen]

I wish I realized this wasn't meant to work with HTML before I put in all the work to use it.

I was simply looking for a small/light/easy email composer/editor which means using HTML.

I have this working using myEditor.clipboard.dangerouslyPasteHTML(html) to set and myEditor.root.innerHTML to get.. but it seems super sketchy!

Anyone have any suggestions regardly alternatives meant to work this way? I am trying to leave TinyMCE and CKEditor.

[AndiLeni]

I can't believe that after four years this problem has still not been solved.

For all those who are looking for an alternative that supports html export, tiptap on vue basis is the right choice.
Nexcloud is now using this for its text-editor addon.

https://tiptap.scrumpy.io/export

[lebesnec]

Wait, does that mean that there is no possibility to display the data created with the quill editor in a webpage ???
Without embedding the whole editor I mean.

[firanto]

Getting the html through quill.root.innerHTML only get standard tags. Styles like text alignment, etc are provided through css class. It is fine if we can wrap this html with:

<link href="https://cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<div class="ql-editor">
    [any html retrieved from quill.root.innerHTML]
</div>

This, by itself, is fine. If you want to show this on your own page, no problem. But when this wrapped html sent through email (as email body), as in using rich text editor to compose email, that css reference and those custom classes are removed at receiver end (which is for security reason, because it is unsafe to reference to an unknown sources).

[claytongulick]

Another good option is editorjs: https://editorjs.io/

Pretty nice unobtrusive UI concept, and very advanced block based plugin architecture.

[jeevatrippy]

just do this

   var myEditor = document.querySelector('#editor')
   var html = myEditor.children[0].innerHTML

[xaddict]

It seems like Quill/Delta should have an official parser that takes into account the plugins added to the original instance. That way it is lightweight to recreate document contents and show them instead of editing them.

It should be possible to easily build this on Delta or extract only the HTML building from Quill and use it with Delta. Would make for a nicely tree-shakeable all in one package where Quill is just the editor, Delta is just the contents and "Build" is just a parser for Delta objects that build html/markdown/docx etc.