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.
Answer
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:
<!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).