How to set data per paragraph on quill.js?

by raven_corwin , in category: Javascript , 7 months ago

How to set data per paragraph on quill.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by samara , 7 months ago

@raven_corwin 

To set data per paragraph on quill.js, you can use the format stored in a custom attribute on the paragraph tag. Here's an example of how you can achieve this:

  1. Add a custom attribute to the paragraph tag:
1
2
3
4
<div id="editor">
  <p data-paragraph-type="heading">Heading</p>
  <p data-paragraph-type="content">Content</p>
</div>


  1. Initialize Quill with custom handlers for paragraph tags:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
var Delta = Quill.import('delta');
var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline']
    ]
  },
  clipboard: {
    matchers: [
      [Node.ELEMENT_NODE, function(node, delta) {
        var ops = [];
        if (node.tagName === 'P') {
          var paragraphType = node.dataset.paragraphType;
          ops.push({ insert: node.innerText, attributes: { paragraphType: paragraphType } });
        }
        return new Delta(ops);
      }]
    ]
  }
});


  1. Now, whenever you type within a paragraph, the paragraphType attribute will be stored in the delta object. You can access this data when processing the delta on the server-side or client-side.


By following these steps, you can set data per paragraph on Quill.js using custom attributes.