需要在表单中添加 Quill 富文本编辑器

Question

需要将 Quill 富文本编辑器集成到表单中。

它显示的不是文本区域，而是 div，如下所示。

<div class="snow-container border rounded p-50">
    <div class="compose-editor mx-75"></div>
    <div class="d-flex justify-content-end">
        <div class="compose-quill-toolbar pb-0">
            <span class="ql-formats mr-0">
                <button class="ql-bold"></button>
                <button class="ql-italic"></button>
                <button class="ql-underline"></button>
                <button class="ql-link"></button>
                <button class="ql-image"></button>
            </span>
        </div>
    </div>
</div>

需要在 post 方法中将数据发送到以名称作为消息的表单。

通常在文本区域我们可以给文本区域命名

怎么做。需要帮助

Answer 1

您可以使用hidden <input>提交内容编辑器使用表单。将输入放入您的表单中，设置 name，然后在编辑器的内容发生变化时将 value 更新为 Javascript。输入的值将随表单自动提交。

<script>
// ... set up quill

// query the input element (use whatever method you prefer)
let inputElement = document.getElementById('hidden-input')
quill.on('text-change', function() {
  // sets the value of the hidden input to
  // the editor content in Delta format
  inputElement.value = JSON.stringify(quill.getContents())

  // you can alternatively use
  // inputElement.value = quill.root.innerHTML
  // if you want the data as HTML
});

</script>

<form>
  <!-- other form stuff -->
  <input type='hidden' name='richText' id='hidden-input'>
</form>

Answer 2

解决方案FORM QUILL EDITOR:

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

需要在表单中添加 Quill 富文本编辑器

need to add Quill Rich Text Editor into form

javascript

quill