问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

从 Delta on Quill 获取 HTML

社区维基
1
新手上路，请多包涵

我正在尝试从 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() 功能并且它有效，这意味着问题是从增量中提取 HTML。

原文由 Pryda 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryquill
阅读 1.8k
2 个回答
得票最新
社区维基
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 年来最好的推荐之一（当然，我在那个时期也尝试过很多文本编辑器）。

原文由 plonknimbuzz 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

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

#form 是您的编辑器的包含形式…

原文由 roblawford 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 2 个回答
推荐问题