How do I post contents of a Quill editor in a form?
I have what I think is 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 capture the data from the form ($_POST['text']) and I could use that in another variable.
Now, I'd like to use Quill so users have a nice rich text editor instead. Quill seems very well suited for this and the documentation is very detailed. However, for some reason I can not find how I can "post" the data to the form. There is one single sample page that sort of does what I want, but I am unable to fully implement this in my sample, and in the quick start guide this rather fundamental (to me) topic is not discussed, and I can not find this in the documentation either.
Is Quill supposed to be used like this? Am I overseeing something? Is there a recommended way to make this work?
This is what I currently 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>
Answer
<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 identifier, then using jQuery you can do the following:
var quill = new Quill ({...}) //definition of the quill
$("#identifier").on("submit",function(){
$("#hiddenArea").val($("#quillArea").html());
})
Instead of the HTML you could use quill.getContents() to get the delta.