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>

标签： javascript php quill

8条回答

贪生不怕死

2楼-- · 2020-03-02 03:47

Try this:

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
    var quill = new Quill('#editor', {
        modules: {
            toolbar: [
                ['bold', 'italic'],
                ['link', 'blockquote', 'code-block', 'image'],
                [{
                    list: 'ordered'
                }, {
                    list: 'bullet'
                }]
            ]
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
    });

    $("#form").submit(function() {
        $("#description").val(quill.getContents());
    });
</script>

0人赞添加讨论(0) 举报

冷血范

3楼-- · 2020-03-02 03:55

You can check related discussion about it https://github.com/quilljs/quill/issues/87

While this is not an ideal solution :

var myEditor = document.querySelector('#editor')
var html = myEditor.children[0].innerHTML

0人赞添加讨论(0) 举报

smile是对你的礼貌

4楼-- · 2020-03-02 03:55

I know this problem has already been resolved, but I would like to add a little more information. To obtain the data present in Quill, You don't need jQuery, or a different trick. I recommend looking at this answer:

https://stackoverflow.com/a/42541886/2910546

I should also make a note here: The author's question was asked at least 2 years ago. So, today, I believe this is to be the most viable way to address the question.

For more information on Quill, with case study examples, and common questions with answers, please kindly visit the following link:

https://github.com/loagit/Quill-Examples-and-FAQ

0人赞添加讨论(0) 举报

劳资没心，怎么记你

5楼-- · 2020-03-02 03:56

<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.

0人赞添加讨论(0) 举报

一纸荒年 Trace。

6楼-- · 2020-03-02 03:59

Here's 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, what it does is to add a hidden textarea to your form and copy the content of the "ql-editor" container (This is automatically made by Quill Editor in the container div) to it. The textarea will then be submitted with the form. You need to change the IDs used in the code to the id of your container tags.

0人赞添加讨论(0) 举报

够拽才男人

7楼-- · 2020-03-02 04:02

This worked for me:

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
    var quill = new Quill('#editor', {
        modules: {
            toolbar: [
                ['bold', 'italic'],
                ['link', 'blockquote', 'code-block', 'image'],
                [{
                    list: 'ordered'
                }, {
                    list: 'bullet'
                }]
            ]
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
    });

    $("#form").submit(function() {
        $("#description").val(quill.getContents());
    });
</script>

0人赞添加讨论(0) 举报

1 2 下一页

How do I post contents of a Quill editor in a form

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间