'Get HTML from Delta on Quill

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.

Solution 1:^[1]

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

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

Solution 2:^[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	roblawford
Solution 2	papas-source

'Get HTML from Delta on Quill

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]