How do I place the content of the Quill editor on a form?
I have what I consider to be a very common scenario. I would normally have this form:
<form method="post">
<textarea name="text"></textarea>
<input type="submit" value="Save" />
</form>
Then, with PHP, I would grab the data from the form ($ _POST ['text']) and I could use that in another variable.
Now I would like to use Quill so that users have a nice rich text editor instead. Quill seems to be very good at this, and the documentation is very detailed. However, for some reason I cannot find how I can "submit" the data to the form. There is one separate sample page that does what I want, but I cannot fully implement this in my example, and the quick start guide does not discuss this fairly fundamental (to me) topic and I cannot find it in the documentation.
Is Qwill supposed to be used like this? Am I watching something? Is there a recommended way to make this work?
This is what I have:
<!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>
source to share
You can check out the relevant discussions about this https://github.com/quilljs/quill/issues/87
Until this is a perfect solution
var myEditor = document.querySelector('#editor')
var html = myEditor.children[0].innerHTML
source to share
<form method="post" id="identifier">
<div id="quillArea"></div>
<textarea name="text" style="display:none" id="hiddenArea"></textarea>
<input type="submit" value="Save" />
</form>
If you give the form an id, then with jQuery you can do the following:
var quill = new Quill ({...}) //definition of the quill
$("#identifier").on("submit",function(){
$("#hiddenArea").val($("#quillArea").html());
})
Instead of HTML, you can use quill.getContents () to get the delta.
source to share
I had the same problem, so I just replaced the div with textarea
and included the attribute name
in the div as well as a link to the snow theme:
<!-- Theme -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<!-- Form input -->
<textarea id="editor" name="editor"></textarea>
It's not ideal as the docs use div
, but it works
source to share
Here is the code I used to do this:
$(document).ready(function(){
$("#theform").on("submit", function () {
var hvalue = $('.ql-editor').html();
$(this).append("<textarea name='content' style='display:none'>"+hvalue+"</textarea>");
});
});
Basically, it adds a hidden text area to the form and copies the contents of the "ql-editor" container into it (this is automatically created by the Quill editor in the container div). The text box will then be submitted along with the form. You need to change the IDs used in the code to the IDs of your container tags.
source to share