Получить HTML из Delta on Quill

Я пытаюсь получить HTML-код из delta на Quill.Получить HTML из Delta on Quill

Это мой код

<!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 из дельты.

источник

2017-02-05 zerocoldTUN

Да, вы правы, извлечение HTML-кода не работает, но проблема заключается в отказе пера на поддержку функции 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>

Если этот редактор (гусиное) не поддерживают getHTML (что важно для будущего использования). Я рекомендую вам использовать другую библиотеку текстовых редакторов, такую как: ckeditor, которую моя лучшая рекомендация за 4 года использовала (абсолютно я пробую много текстовых редакторов тоже в этот период).

источник

2017-02-06 00:02:20 plonknimbuzz

если этот код не работа, сообщите пожалуйста. потому что я никогда не использую перо (первый раз использую его сейчас) – plonknimbuzz

editor.root.innerHTML уже сбежал? Когда пользователь использует тег

Смежные вопросы

Получить HTML из Delta on Quill

ответ

Смежные вопросы