发表新帖
发表新帖

Get HTML from Delta on Quill

前端 未结
关注
3 1779
天涯浪人
天涯浪人 2021-02-19 22:41

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

This is my code






<
相关标签:
3条回答
  • 梦谈多话
    2021-02-19 23:00

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

    0 讨论(0)
  • 不要未来只要你来
    2021-02-19 23:14

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

    0 讨论(0)
  • 清酒与你
    2021-02-19 23:15

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

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

    0 讨论(0)
 看不清?
提交回复
热议问题