从Delta获取HTML
从Delta获取HTML
提问于 2017-02-06 07:29:59
我正在尝试从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()函数，它工作了，这意味着问题是从增量中提取超文本标记语言。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-06 08:02:20
是的，你是对的，提取超文本标记语言是不能工作的，但问题是羽毛笔拒绝支持getHTML()函数。https://github.com/quilljs/quill/issues/903
但是你可以使用quill.root.innerHTML。试试这个：
<!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年来最好的推荐使用它(当然，我在这段时间里也尝试过很多文本编辑器)。
Stack Overflow用户
发布于 2018-10-11 08:31:27
为了获得用户插入的任何额外空格，我使用
this.editor.root.innerHTML.split(' ').join(' ')
(请注意，split中有两个空格，join中有一个空格！)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42058551
复制相关文章
相似问题