Delta from QuillからHTMLを取得

私はQuillのdeltaからHTMLコードを取得しようとしています。私はボタンをクリックするとDelta from Quillから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>

私のコードで、何もこの問題がデルタからHTMLを抽出していることを意味し、私はcallMe()機能をチェックし、それが動作しますが、表示されません。

出典

2017-02-05 zerocoldTUN

はい、正しく動作していないHTMLを抽出していますが、問題はキルがgetHTML()の機能をサポートすることを拒否しています。 https://github.com/quilljs/quill/issues/903

ただし、quill.root.innerHTMLを使用できます。このエディタ（クイル）が（将来の使用のために重要である）getHTMLをサポートしていない場合

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>

：これを試してみてください。私はあなたのような別のテキストエディタライブラリを使用することをお勧めします：4年間で私の最高の推薦はそれを使用して（絶対に私はその期間に多くのテキストエディタを試してください）ckeditor。

出典

2017-02-06 00:02:20 plonknimbuzz

このコードが機能しない場合は、教えてください。私は決してクイルを使用していないので（今は初めて使用します） – plonknimbuzz

editor.root.innerHTMLは既にエスケープされていますか？ユーザーが

Delta from QuillからHTMLを取得

答えて

関連する問題