Get HTML from Delta on Quill

quill delta to html
apply delta quill
quill-image
quill playground
quill nuget
quill data format
quill js images
quill delete text

I am trying to get HTML code from delta on Quill.

This is my code

<!DOCTYPE html>
<html>
<head>

<!-- Main Quill library -->
<script src="http://cdn.quilljs.com/1.2.0/quill.js"></script>
<script src="http://cdn.quilljs.com/1.2.0/quill.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Theme included stylesheets -->
<link href="http://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<link href="http://cdn.quilljs.com/1.2.0/quill.bubble.css" rel="stylesheet">


    <title>Editor</title>

</head>
<body>
<div id="toolbar"></div>
<div id="editor"></div>
<script>

var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'direction': 'rtl'}],
[{'size': ['small', false, 'large', 'huge']}],
['link', 'image', 'video', 'formula'],
[{'color': []}, {'background': []}],
[{'font': []}],
[{'align': []}]
];
var options = {
  debug: 'info',
  modules: {
    toolbar: toolbarOptions
  },
  placeholder: 'Textttt',
  readOnly: false,
  theme: 'snow'
};
var editor = new Quill('#editor', options);
    var delta = quill.getContents();
function quillGetHTML(inputDelta) {
    var tempCont = document.createElement("div");
    (new Quill(tempCont)).setContents(inputDelta);
    return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}
function callMe(){
$(document).ready(function(){$("#btn1").click(function(){$("p").append(quillGetHTML(delta));});});}
</script>
<p>HTML: </p>
<button id="btn1" onClick="callMe()">Get HTML From Delta</button>
</body>
</html>

When I click on the button, nothing appears, I checked callMe() function and it works, this means that the problem is extracting HTML from delta.

Yes you're right, extracting HTML not work, but the problem is quill refuse to support getHTML() function. https://github.com/quilljs/quill/issues/903

But you can use quill.root.innerHTML. Try this:

http://jsbin.com/zuniqef

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <!-- Main Quill library -->
<script src="http://cdn.quilljs.com/1.2.0/quill.js"></script>
<script src="http://cdn.quilljs.com/1.2.0/quill.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Theme included stylesheets -->
<link href="http://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<link href="http://cdn.quilljs.com/1.2.0/quill.bubble.css" rel="stylesheet">

</head>
<body>

  <div id="toolbar"></div>
<div id="editor"></div>
<script>

var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'direction': 'rtl'}],
[{'size': ['small', false, 'large', 'huge']}],
['link', 'image', 'video', 'formula'],
[{'color': []}, {'background': []}],
[{'font': []}],
[{'align': []}]
];
var options = {
  debug: 'info',
  modules: {
    toolbar: toolbarOptions
  },
  placeholder: 'Textttt',
  readOnly: false,
  theme: 'snow'
};
var editor = new Quill('#editor', options);
  editor.insertText(0, 'Hello', 'bold', true);//set init value
function callMe() //display current HTML
  {
    var html = editor.root.innerHTML;
    alert(html);
  }
</script>
<div>HTML: </div>
<button id="btn1" onClick="callMe()">Get HTML From Delta</button>

</body>
</html>

If this editor (quill) is not support getHTML (which is important for future use). I recommend you to use another text editor library like: ckeditor which my best recommendation in 4 years used it (absolutely I try many text editors too in that period).

how to quill.getHTML() · Issue #903 · quilljs/quill · GitHub, 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  Currenlty,I am using quill's 1.2.6 version. I can able to set the contents as HTML in editor when it has been saved as Delta format. Now in my application I have in plain HTML text format content has been saved in database.

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!)

How to get HTML content from Quill editor? · Lulu's blog, How to get and post raw HTML with Quill rich text editor? You can parse the Delta format from server side with one of these libraries: Quill  Quill Delta to HTML Converter. Converts Quill's Delta format to HTML (insert ops only) with properly nested lists. You can try a live demo of the conversion by opening the demo-browser.html file after cloning the repo. Breaking change: import/require has changed as of v0.10.0.

I just use - $("#form").find('#quill-editor .ql-editor').html();

where #form is the containing form of your editor...

quill-delta-to-html, Converts Quill's delta ops to HTML. Get unlimited public & private packages + package-based permissions with npm Pro.Get started »  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.

API - Quill v0.20, Deltas can describe any Quill document, includes all text and formatting information, without the ambiguity and complexity of HTML. When you register a listener for Quill's text-change event, one of the arguments you will get is a Delta  This page explains how to get raw HTML from JS or post the content of the form. The followinghas been tested with Quill version 1.3.6. Get HTML. Many options exist to get HTML content from Quill editor. You can try to convert Delta with a JavaScript library: Quill Delta to HTML Converter. Solutions on Stack Overflow.

Delta, innerHTML works just fine ( quill.container.firstChild.innerHTML little more fragile because it depends on the ordering of the children), and the previous getHTML  Delta. Deltas are a simple, yet expressive format that can be used to describe Quill’s contents and changes. The format is a strict subset of JSON, is human readable, and easily parsible by machines. Deltas can describe any Quill document, includes all text and formatting information, without the ambiguity and complexity of HTML.

🧝 🧛 Convert Quill Delta to HTML, 5. 1. <div class="container" id="editor-container">. 2. <p>Gandalf the Grey</p>. 3. </div>. 4. <div class="container javascript" id="delta-container"></div>. 5. ​. The format is JSON based, and is human readable, yet easily parsible by machines. Deltas can describe any rich text document, includes all text and formatting information, without the ambiguity and complexity of HTML. A Delta is made up of an Array of Operations, which describe changes to a document

Comments
  • You can probably build you solution on top of this: gist.github.com/ninetyone/73b927dc0fff012a1f4892460aa46bde
  • if this code not work, let me know that. because i never use quill (first time use it now)
  • editor.root.innerHTML is already escaped? When a user uses <script> tag and we save that to the db and reload it, it doesn't run the javascript right?