表单集成Quill富文本编辑器及POST提交message字段数据的实现方案咨询

Got it, let's figure out how to submit your Quill editor content as the message field in your form! Since you're using a custom div structure instead of a traditional <textarea>, we just need a way to capture the editor's content and attach it to your form data. Here's a step-by-step solution:

1. Add a Hidden Input to Your Form #

Forms automatically include data from elements with a name attribute when submitted. We'll add a hidden input with name="message" to act as the carrier for your Quill content. Insert it inside your form tag:

<form id="your-submit-form" method="POST" action="/your-target-endpoint">
  <!-- Your existing Quill editor HTML -->
  <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>

  <!-- Hidden input to hold Quill content -->
  <input type="hidden" name="message" id="hidden-message-input">
  
  <button type="submit">Send Message</button>
</form>

2. Initialize Quill and Sync Content to the Hidden Input #

First, initialize your Quill instance, making sure to bind your custom toolbar. Then, we'll sync the editor's content to the hidden input—you have two options depending on your needs:

Initialize Quill #

// Initialize Quill with your custom toolbar and theme
const quillEditor = new Quill('.compose-editor', {
  theme: 'snow',
  modules: {
    toolbar: '.compose-quill-toolbar' // Links your custom toolbar to the editor
  }
});

Option A: Sync on Form Submission (Recommended) #

This is more efficient because it only captures content right before the form is sent, avoiding unnecessary updates:

const form = document.getElementById('your-submit-form');
const hiddenInput = document.getElementById('hidden-message-input');

form.addEventListener('submit', function(event) {
  // Get the editor's HTML content (use getText() instead if you need plain text)
  hiddenInput.value = quillEditor.root.innerHTML;
  
  // The form will now submit the hidden input's value as the `message` field
});

Option B: Real-Time Sync (As User Types) #

If you need the hidden input to reflect changes immediately (e.g., for preview or validation), use Quill's text-change event:

quillEditor.on('text-change', function() {
  // Update hidden input every time the editor content changes
  document.getElementById('hidden-message-input').value = quillEditor.root.innerHTML;
});

3. Choose Between HTML or Plain Text #

• Use quillEditor.root.innerHTML to capture formatted HTML content (preserves bold, italics, links, images, etc.)
• Use quillEditor.getText() if you need plain text without formatting (good for simple text fields)

Key Notes #

• Make sure you've properly included the Quill CSS and JS files in your project
• Double-check that your form's method is set to POST and the action points to your correct backend endpoint

内容的提问来源于stack exchange，提问作者Qadir IT