New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to quill.getHTML() #903

Closed
che3vinci opened this Issue Aug 31, 2016 · 21 comments

Comments

Projects
None yet
@che3vinci
Copy link

che3vinci commented Aug 31, 2016

just as the title said

@TomCaserta

This comment has been minimized.

Copy link

TomCaserta commented Aug 31, 2016

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

This comment has been minimized.

Copy link
Member

jhchen commented Aug 31, 2016

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.

@jhchen jhchen closed this Aug 31, 2016

@TomCaserta

This comment has been minimized.

Copy link

TomCaserta commented Aug 31, 2016

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

This comment has been minimized.

Copy link

artaommahe commented Sep 20, 2016

@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

This comment has been minimized.

Copy link

f15gdsy commented Jan 12, 2017

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

This comment has been minimized.

Copy link

fernandogmar commented Jan 25, 2017

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&nbsp;&nbsp;&nbsp;&nbsp;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

This comment has been minimized.

Copy link

ysyyork commented Feb 26, 2017

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

@fernandogmar

This comment has been minimized.

Copy link

fernandogmar commented Feb 27, 2017

@ysyyork

This comment has been minimized.

Copy link

ysyyork commented Feb 27, 2017

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

@chris-hall-hu

This comment has been minimized.

Copy link

chris-hall-hu commented Mar 10, 2017

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

This comment has been minimized.

Copy link

fernandogmar commented Mar 15, 2017

[ROOKIE ERROR]
Just for fixing the issue... I decided replace ' ' (character space) by &nbsp; so having two spaces ' ' --> &nbsp;&nbsp; , awesome.... but the problem came &nbsp; 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 &ensp;
  • mix NBSP and ' ' character spaces
  • mix NBSP with <wbr> (the zero width space)
  • using padding with a custom tag

some detailed white spaces:

@danrichards

This comment has been minimized.

Copy link

danrichards commented May 29, 2017

This works.

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

// See @Hainesy suggestion below.
@Hainesy

This comment has been minimized.

Copy link

Hainesy commented May 31, 2017

@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

This comment has been minimized.

Copy link

danrichards commented May 31, 2017

Thanks @Hainesy and @jhchen !

@samgan-khan

This comment has been minimized.

Copy link

samgan-khan commented Oct 3, 2017

Hi,
I faced the same issue with quill js. I found a solution. I solved the above problem with the help of a hidden input and a little js in the following way.

/**

  • js part
    **/
    var quill = new Quill('#post-editor', {
    theme: 'snow'
    });

var fetch_post_content = function () {
$('#post').val($('.ql-editor').html());
}
$('#post-editor')
.keyup(fetch_post_content)
.blur(fetch_post_content);

@isaaclyman

This comment has been minimized.

Copy link

isaaclyman commented May 21, 2018

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.

@rengelking

This comment has been minimized.

Copy link

rengelking commented Aug 29, 2018

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

This comment has been minimized.

Copy link

Promotools commented Sep 9, 2018

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

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

This comment has been minimized.

Copy link

sourcegr commented Oct 11, 2018

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(' &nbsp;')

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

@thenikso

This comment has been minimized.

Copy link

thenikso commented Nov 15, 2018

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"></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 comment has been minimized.

Copy link

mrspeaker commented Dec 11, 2018

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment