javascript 我需要将Quill富文本编辑器添加到表格中

mpgws1up  于 2022-12-28  发布在  Java
关注(0)|答案(2)|浏览(329)

需要将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方法中的消息。
通常在文本区域我们可以只给予文本区域命名
怎么做。需要帮助吗

6yoyoihd

6yoyoihd1#

您可以使用hidden <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>
3htmauhk

3htmauhk2#

溶液模板QUILL编辑器:
链接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) {  },             
  });
});

相关问题