如何 post 表单中 Quill 编辑器的内容？

Question

我有一个我认为很常见的场景。我通常会有这种形式：

<form method="post">

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

</form>

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

现在，我想使用 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 这个相当基础的（对我来说）主题没有被讨论，我也无法在文档中找到它。

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

基本上，它所做的是向您的表单添加一个隐藏的文本区域，并将 "ql-editor" 容器的内容（这是由容器 div 中的 Quill Editor 自动生成的）复制到它.然后文本区域将与表单一起提交。您需要将代码中使用的 ID 更改为容器标签的 ID。

Answer 4

试试这个：

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

我想到的一个解决方案是制作一个包装器 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;
            });
    }
}

只需将 class 添加到您页面的某处，然后使用以下命令对其进行初始化：

    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 6

我正在这样做：

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 7

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

这里还要说明一下：作者的问题至少2年前就问过了。所以，今天，我相信这是解决这个问题的最可行的方法。

有关 Quill 的更多信息、案例研究示例和常见问题及其答案，请访问以下 link：

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

Answer 8

这个解决方案对我来说很好用：

    <script type="text/javascript">
    $(document).ready(function(){
      $("#emailForm").on("submit", function () {
        var hvalue = $('.editor').text();
        $(this).append("<textarea name='message' style='display:none'>"+hvalue+"</textarea>");
       });
    });
    </script>

Answer 9

这里解决了

How to save Quill.js values to Database Laravel 5.6

添加隐藏输入：

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

Js代码：

var form = document.getElementById("FormId");

form.onsubmit = function() {
  var name = document.querySelector('input[name=body]');
  name.value = JSON.stringify(quill.getContents());

  return true; // submit form
}

要为羽毛笔设置内容，请执行以下操作：

quill.setContents({!! $post->body !!});

Answer 10

这就是我使用的，您所要做的就是为您的编辑器标签提供 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();
});

Answer 11

我按如下方法解决了这个问题。

在将成为编辑器容器的元素中，我设置了一个 like 属性，data-input-name="something"

在实例化编辑器后，我编写了一个简单的代码，将羽毛笔的内部值分配给隐藏的输入

quill.on('text-change', function() {
  const content = quill.root.innerHTML.trim();
  const targetId = quill.container.dataset.inputName
  document.querySelector(`#${targetId}`).setAttribute("value", content);
});

Answer 12

查看此存储库，它可能会有帮助。安装简单

https://github.com/tangien/quilljs-textarea

只需将属性 data-quilljs 添加到 textarea 元素即可自动初始化 Quilljs，其余的将由插件处理。

就是这样！

Answer 13

Link CSS:

<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="https://htmlstream.com/preview/front-v4.2/html/assets/css/vendor.min.css">
<link rel="stylesheet" href="https://htmlstream.com/preview/front-v4.2/html/assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
<!-- CSS Front Template -->
<link rel="stylesheet" href="https://htmlstream.com/preview/front-v4.2/html/assets/css/theme.min.css?v=1.0">

Link JS:

<!-- JS Implementing Plugins -->
<script src="https://htmlstream.com/preview/front-v4.2/html/assets/js/vendor.min.js"></script>
<!-- JS Front -->
<script src="https://htmlstream.com/preview/front-v4.2/html/assets/js/theme.min.js"></script>

我的 html:

<form id="form-perfil" name="form-perfil" method="POST">
  <!-- Form Group -->
  <div class="row form-group">
    <label class="col-sm-3 col-form-label input-label">BIO</label>

    <div class="col-sm-9">
      <!-- Quill -->
      <div class="quill-custom">
        <div
          class="js-quill"
          style="min-height: 15rem;"
          data-hs-quill-options='{
                       "placeholder": "Type your message...",
                        "modules": {
                          "toolbar": [
                            ["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
                          ]
                        }
                       }'
        >
          Creative mind at Htmlstream
        </div>
      </div>
      <!-- End Quill -->
      <textarea name="text_quill" style="display: none;" id="text_quill"></textarea>
    </div>
  </div>
  <!-- End Form Group -->

  <button type="submit" class="mt-3 float-right btn btn-primary">Enviar formulario</button>
  <!-- End Form Group -->
</form>

在我的 JS 中：

// INITIALIZATION OF QUILLJS EDITOR
// =======================================================
var quill = $.HSCore.components.HSQuill.init('.js-quill');

// =======================================================
$("#form-perfil").on("submit", function (e) { 
  e.preventDefault(); //No se activará la acción predeterminada del evento

  $("#text_quill").val($(".ql-editor").html());

  var formData = new FormData($("#form-perfil")[0]);
  $.ajax({
    url: "ajax/pago_administrador.php",
    type: "POST",
    data: formData,
    contentType: false,
    processData: false,
    success: function (datos) {  },             
  });
});

如何 post 表单中 Quill 编辑器的内容？

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

javascript

php

quill