Get HTML from Delta on Quill

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

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


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


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

Tags:

Javascript

Jquery

Quill

Recent Posts