繁体   English   中英

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

[英]need to add Quill Rich Text Editor into form

需要将 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 方法中将数据发送到名称为消息的表单。

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

怎么做。 需要帮忙

您可以使用隐藏的<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>

解决方案 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) {  },             
  });
});

通过使用隐藏输入并通过 javascript、json.stringify 替换它的值,这是一个很好的解决方案,尽管不是为了更大的数据。 有什么解决方案吗? 如何用 Json2 或类似的东西实现它?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM