在 Quill 上从 Delta 获得 HTML

Question

我正在尝试从 Quill 上的 delta 获取 HTML 代码。

这是我的代码

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

当我点击按钮时，没有任何显示，我检查了 callMe() 函数并且它有效，这意味着问题是从 delta 中提取 HTML。

Answer 1

是的，你是对的，提取 HTML 不起作用，但问题是 quill 拒绝支持 getHTML() 功能。 https://github.com/quilljs/quill/issues/903

但是你可以使用quill.root.innerHTML。试试这个：

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>

如果这个编辑器（quill）不支持getHTML（这对以后的使用很重要）。我建议您使用另一个文本编辑器库，例如：ckeditor，这是我 4 年来最好的推荐之一（当然，我在那段时间也尝试过很多文本编辑器）。

Answer 2

为了获得用户插入的任何额外 space，我使用

this.editor.root.innerHTML.split(' ').join('  ')

（注意，split中有两个space，join中有一个space！）

Answer 3

我只是使用 - $("#form").find('#quill-editor .ql-editor').html();

其中 #form 是您的编辑器的包含形式...

在 Quill 上从 Delta 获得 HTML

Get HTML from Delta on Quill

javascript

jquery

quill