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

2020-03-02 03:39发布

站内问答 / JavaScript
1071 8 4

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>

8条回答
够拽才男人
2楼-- · 2020-03-02 04:08

A solution I came up with was to make a wrapper class.

class QuillWrapper {

    /**
     * @param targetDivId { string } The id of the div the editor will be in.
     * @param targetInputId { string } The id of the hidden input
     * @param quillOptions { any } The options for quill
     */
    constructor(targetDivId, targetInputId, quillOptions) {

        //Validate target div existence
        this.targetDiv = document.getElementById(targetDivId);
        if (!this.targetDiv) throw "Target div id was invalid";

        //Validate target input existence
        this.targetInput = document.getElementById(targetInputId);
        if (!this.targetInput) throw "Target input id was invalid";

        //Init Quill
        this.quill = new Quill("#" + targetDivId, quillOptions);

        //Bind the two containers together by listening to the on-change event
        this.quill.on('text-change',
            () => {
                this.targetInput.value = this.targetDiv.children[0].innerHTML;
            });
    }
}

Simply include the class somewhere on your page and then use the following to initilize it:

    let scopeEditor = new QuillWrapper("ScopeEditor", "Scope", { theme: "snow" });

Your html would look roughly like this:

<div class="form-group">
     <label asp-for="Scope" class="control-label col-md-2"></label>  
     <div id="ScopeEditor"></div>
     <input type="hidden" asp-for="Scope" class="form-control" />
</div>
查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
3楼-- · 2020-03-02 04:11

I'm doing this:

var quill = new Quill('.quill-textarea', {
            placeholder: 'Enter Detail',
            theme: 'snow',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    [{ 'indent': '-1'}, { 'indent': '+1' }]
                ]
            }
        });

        quill.on('text-change', function(delta, oldDelta, source) {
            console.log(quill.container.firstChild.innerHTML)
            $('#detail').val(quill.container.firstChild.innerHTML);
        });

Somewhere on the form:

<div class="quill-textarea"></div>
<textarea style="display: none" id="detail" name="detail"></textarea>
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)