{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 欢心 的问题《Get HTML from Delta on Quill》','https://www.manongdao.com/q-1351930.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
I just use - $("#form").find('#quill-editor .ql-editor').html();
where #form is the containing form of your editor...
Yes you're right, extracting HTML not work, but the problem is quill refuse to support
getHTML()function. https://github.com/quilljs/quill/issues/903But you can use
quill.root.innerHTML. Try this:http://jsbin.com/zuniqef
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).
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
splitand one space in thejoin!)