Get HTML von Delta auf Quill

Ich versuche HTML-Code von Delta auf Quill zu bekommen.Get HTML von Delta auf Quill

Dies ist mein Code

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

Wenn ich auf die Schaltfläche klicken, wird nichts angezeigt wird, überprüfte ich callMe() Funktion und es funktioniert, bedeutet dies, dass das Problem HTML von Delta wird zu extrahieren.

Quelle

2017-02-05 zerocoldTUN

Ja, Sie haben Recht, zu extrahieren HTML nicht funktioniert, aber das Problem verweigern, spule getHTML() Funktion zu unterstützen. https://github.com/quilljs/quill/issues/903

Aber Sie können quill.root.innerHTML verwenden. Versuchen Sie folgendes:

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>

Wenn dieser Editor (Pinole) nicht unterstützen getHTML (die für die zukünftige Verwendung wichtig ist). Ich empfehle Ihnen, eine andere Texteditor-Bibliothek wie: ckeditor zu verwenden, die meine beste Empfehlung in 4 Jahren verwendet hat (absolut versuche ich auch viele Texteditoren in diesem Zeitraum).

Quelle

2017-02-06 00:02:20 plonknimbuzz

wenn dieser Code nicht funktioniert, lassen Sie mich wissen. weil ich nie eine Feder benutze (benutze sie jetzt zum ersten Mal) – plonknimbuzz

editor.root.innerHTML ist bereits geflohen? Wenn ein Benutzer

Verwandte Themen

Get HTML von Delta auf Quill

Antwort

Verwandte Themen