需要在表單中添加 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

您可以使用隱藏的<input>來使用表單提交編輯器的內容。 將輸入放入表單中，設置name ，然后在編輯器內容更改時使用 Javascript 更新value 。 輸入的值將與表單一起自動提交。

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

鏈接 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">

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

Answer 3

通過使用隱藏輸入並通過 javascript、json.stringify 替換它的值，這是一個很好的解決方案，盡管不是為了更大的數據。 有什么解決方案嗎？ 如何用 Json2 或類似的東西實現它？