Question

我认为这是一种非常常见的情况。我通常会有这样的形式：

<form method="post">

<textarea name="text"></textarea>
<input type="submit" value="Save" />

</form>

然后使用PHP我将从表单中捕获数据（$ _POST ['text']），我可以在另一个变量中使用它。

现在，我想使用Quill，因此用户可以使用一个很好的富文本编辑器。 Quill似乎非常适合这个，文档非常详细。但是，出于某种原因，我无法找到如何将数据“发布”到表单中。有一个single sample page可以做我想要的，但是我无法在我的示例中完全实现这一点，并且quick start guide这个相当基本的（对我来说）主题没有讨论，而我也无法在文档中找到这个。

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>

Answer 1

您可以查看相关的讨论https://github.com/quilljs/quill/issues/87

虽然这不是一个理想的解决方案：

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

Answer 2

<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());
})

您可以使用quill.getContents（）代替HTML来获取增量。

Answer 3

这是我用来执行此操作的代码：

$(document).ready(function(){
  $("#theform").on("submit", function () {
    var hvalue = $('.ql-editor').html();
    $(this).append("<textarea name='content' style='display:none'>"+hvalue+"</textarea>");
   });
});

基本上，它的作用是在表单中添加一个隐藏的textarea，然后将“ ql-editor”容器的内容（这是Quill Editor在容器div中自动创建的）复制到其中。然后将文本区域与表格一起提交。您需要将代码中使用的ID更改为容器标签的ID。

Answer 4

我知道这个问题已经解决，但是我想补充一点信息。要获取Quill中存在的数据，您不需要jQuery或其他技巧。我建议看一下这个答案：

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

我还要在这里做个注释：至少在2年前问了作者的问题。因此，今天，我相信这是解决该问题的最可行方法。

有关Quill的更多信息，包括案例研究示例和常见问题及解答，请访问以下链接：

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

Answer 5

尝试一下：

void f(int a, int b);

auto x = boost::bind(f, _1, _2);
x(1, 2); //a=1 b=2

auto y = boost::bind(f, _2, _1);
y(1,2); //a=2 b=1

Answer 6

这对我有用：

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

Answer 7

我想出的一个解决方案是制作一个包装器类。

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;
            });
    }
}

只需将类包含在页面上的某个位置，然后使用以下内容对其进行初始化：

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

您的html大致如下所示：

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

Answer 8

我正在这样做：

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);
        });

表格上的某处：

<div class="quill-textarea"></div>
<textarea style="display: none" id="detail" name="detail"></textarea>

Answer 9

此解决方案对我来说很好：

from sklearn.datasets import load_digits
digits = load_digits()

# Create the features matrix
X = digits.data

# Create the target vector
y = digits.target

# Create training and test sets
from sklearn.model_selection import train_test_split
X_train, X_test, y_train, y_test = train_test_split(X, 
                                                    y, 
                                                    test_size=0.25, 
                                                    random_state=1)


from sklearn.svm import SVC
    classifierObj1 = SVC(kernel='poly', degree=3)
    classifierObj1.fit(X_train, y_train)
    y_pred = classifierObj1.predict(X_test)

Answer 10

在这里解决

How to save Quill.js values to Database Laravel 5.6

添加隐藏的输入：

onBlur

Js代码：

<input type="hidden" name="body"/>

Answer 11

这就是我所使用的，您所要做的就是为编辑器标签提供data-name属性。这将创建一个隐藏的输入作为您的编辑器标签的同级并将html内容放入其中。您可以获取其他格式的内容，如果您需要了解如何获取它们，我会留下未使用的变量。

html：

<div class="field editor" data-name="experience"></div>

js：

let quill_element = document.querySelector('.editor')
let quill = new Quill(quill_element, {
    modules: {
        toolbar: '#toolbar'
    },
    placeholder: document.querySelector('.editor').getAttribute('data-placeholder'),
    theme: 'bubble',
});

let hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = quill_element.getAttribute('data-name');
quill_element.parentElement.appendChild(hiddenInput);

quill.on('text-change', function () {
    let justHtml = quill.root.innerHTML;
    hiddenInput.value = justHtml;
    // other formats if you like to use..
    var delta = editor.getContents();
    var text = editor.getText();
});

如何在表单中发布Quill编辑器的内容？

11 个答案: