Как я могу опубликовать содержимое редактора Quill в форме?
У меня есть, как мне кажется, очень распространенный сценарий. Я обычно имел бы эту форму:
<form method="post">
<textarea name="text"></textarea>
<input type="submit" value="Save" />
</form>
Затем с помощью PHP я собирал данные из формы ($ _POST [‘text’]) и мог использовать их в другой переменной.
Теперь я хотел бы использовать полый вал так что вместо этого пользователи имеют хороший текстовый редактор. Quill, кажется, очень хорошо подходит для этого, и документация очень подробная. Однако по какой-то причине я не могу найти, как я могу «разместить» данные в форме. Есть один страница с одним образцом что-то вроде того, что я хочу, но я не могу полностью реализовать это в моем примере, и в Инструкция по началу работы эта довольно фундаментальная (для меня) тема не обсуждается, и я не могу найти это в документации.
Quill должен использоваться таким образом? Я что-то наблюдаю? Есть ли рекомендуемый способ сделать эту работу?
Вот что у меня сейчас есть:
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
<form method="post"><!-- Create the toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div><form method="post">
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
</div>
<input type="submit" value="Save" />
</form>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
</script>
</body>
</html>
Решение
Вы можете проверить связанные обсуждения об этом https://github.com/quilljs/quill/issues/87
Пока это не идеальное решение
var myEditor = document.querySelector('#editor')
var html = myEditor.children[0].innerHTML
Другие решения
<form method="post" id="identifier">
<div id="quillArea"></div>
<textarea name="text" style="display:none" id="hiddenArea"></textarea>
<input type="submit" value="Save" />
</form>
Если вы даете форме идентификатор, то с помощью jQuery вы можете сделать следующее:
var quill = new Quill ({...}) //definition of the quill
$("#identifier").on("submit",function(){
$("#hiddenArea").val($("#quillArea").html());
})
Вместо HTML вы можете использовать quill.getContents () для получения дельты.
Вот код, который я использовал для этого:
$(document).ready(function(){
$("#theform").on("submit", function () {
var hvalue = $('.ql-editor').html();
$(this).append("<textarea name='content' style='display:none'>"+hvalue+"</textarea>");
});
});