Proposal: (Doc) write about **the correct way** to store & display quill editor content

[1c7]

1. Why

so far(2018-8-26) Quill document didn't say anything about what is the correct / suggest way to store and display content from quill editor

2. Base on my current understanding

There are 2 way to store and then display content when using quill editor to write content.

1. (Delta) Store Delta into database (MySQL/PostgreSQL as JSON). then, when Display, use some library convert Delta to HTML and then display

2. (HTML) Store HTML using quill.root.innerHTML into database (MySQL/PostgreSQL) and then just Display these HTML

3. Question

Would you guys write about this topic (store&display) in document?

Thanks!

(I am still researching, If I find any new info helpful for this. I would update this issue)

4. info relate to this topic

https://www.bountysource.com/issues/37978100-render-quill-delta-without-instantiating-an-editor
#993
#1551

[1c7]

I think this solution is the best one so far

1. Store both format.
2. Under different use case, Delta for editor, HTML for display

[benbro]

Quill work with Delta.
HTML from users is unsafe. Best way is to store Delta in the database and render it to HTML if needed.
Quill currently doesn't support delta to html conversion but you'll might find what you need in one of the community projects.

[1c7]

@benbro got it. thank you.

new question: can you put these into doc? a new section, maybe here:

[benbro]

Adding a huge screenshot for each post is unneeded. Please use text only.
There are Delta sections in docs and guide. Please submit a PR to the docs with your suggested changes if you think it can be improved.

[1c7]

got it, thanks

[jlautner]

This was a deal breaker for me with using this; I don't want to store both Delta json and HTML; shame because looks like such a great product; I am switching to summernote

[mossymaker]

It's really frustrating to invest a lot of time in understanding Quill, expecting there will be instructions along the way about rendering its content, only to learn that this project is bring-your-own-renderer. It'd be great to mention that at the beginning.

[1c7]

A little update: (in short: I am not using Quill anymore)

because our product pivot to another direction.
we focus on App now, main feature are all on App.
website just a single landing page.

So I am not using Quill anymore.
Also. we lower the bar for user post content. again and again.
Now our app look like Instagram

This is just a simple update in case anyone interested

[akinlekan28]

This is 2020 and i still find it difficult to display data saved from the editor. This is a bit disappointing i must say after going through the stress of integrating the library. It also says a lot about the library with its number of opened issues and pending pull requests

[HimanshuChugh2]

please help me with this similar issue: pingcap/tidb#18922

[summitmman-zz]

Save the html output from quill editor. Then render it as an innerHTML on a div. Give class="ql-editor" to the div and the html will be formatted as we see it in the editor. No need to instantiate editor context. Just import quill's css file.

Vue example:

import '@vueup/vue-quill/dist/vue-quill.snow.css';

<div class="ql-editor" v-html="result"></div>

[GarrisonJ]

Save the html output from quill editor. Then render it as an innerHTML on a div. Give class="ql-editor" to the div and the html will be formatted as we see it in the editor. No need to instantiate editor context. Just import quill's css file.

Vue example:

import '@vueup/vue-quill/dist/vue-quill.snow.css';

<div class="ql-editor" v-html="result"></div>

The problem with saving the HTML from the editor is that the user can submit any HTML to save. We don't know it actually came from the editor.

[roguefalcon]

In the spirit of being helpful to someone else starting with Quill for the first time, I thought I'd share how I got Quill to save and load from a database.

You can access the delta format by the .getContents() and .setContents() on the quill object.

So the code would look something like this:

var quill = new Quill('#editor', {
    theme: 'snow'
  });
quill.setContents({{ delta_content }});  // <-- This is the magic

Where {{ delta_content }} would be the content you saved from Quill via the quill.getContents().

I'm using jinja2 with Python/Flask so I needed to pass the "safe" modifier to my template vars so the delta object wasn't html escaped. Here was my Javascript line with the jinja2 template tag:
quill.setContents({{ delta_content|safe }})

Displaying the work done in Quill to a browser (i.e. Delta to HTML) is still a touch of a work in progress. Right now I'm saving the html via the quill.root.innerHTML function and just displaying that. Seems to be working but I don't love having both the HTML and the Delta stored in the database. I may switch to a python library that renders Delta to HTML but more research is needed.

[keihn]

This is how I save delta in my database

Firstly I create a hidden input field and use JS to handle picking the data.

   var form = document.forms['contentFrom']
  form.addEventListener('submit', (e) => {
    document.getElementById('body').value = JSON.stringify(quill.getContents())
    form.unbind().submit();
  })

[vkment]

This works very well, at least since now:

• model definition (Django) like:

class Post(models.Model):
    title = models.CharField(max_length=200)
    body = QuillField()

• related template html (Django) file:

<body>
    <h1 style="text-align: center;"><u>{{info.title}}</u></h1>
    {{info.body.html | safe}}
</body>

The displaying html page not only does not contain any Quill js code, it need not contain any javascript at all. Just HTML tags are fine.

Sure, differing CSS would influence the visual result. But you can probably enforce such CSS as you like.

You store just what the model itself stores using its QuillField type. No other content management, no conversions, except what .html in the template above does.

I have taken it from this tutorial

[kh09211]

In case anyone comes across this and finds this useful. You don't need to use innerHTML to render the delta, you can instantiate a new quill object with the settings of readonly and no toolbar, use CSS to remove the border if you want.

const quill = new Quill('#renderDiv', {
            modules: {
                toolbar: false
            },
            readOnly: true
    });

   // render the content
  quill.setContents($delta)

To save the delta in the database I use JSON.stringify($delta) like above, with a listener that updates a hidden input

      quill.on('text-change', function(delta, oldDelta, source) 
      {
          let deltaData = JSON.stringify(quill.getContents());
          document.getElementById('#deltaDataDiv').value = deltaData;
      });