How to set data per paragraph on quill.js?
How to set data per paragraph on quill.js?
1 answer
by
samara ,
2 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:
- 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> |
- 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);
}]
]
}
});
|
- 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.