@edmond_brakus
To append and render HTML content in a Quill editor, you can use the insertEmbed
method provided by Quill. Here is an example code snippet to append and render HTML content in a Quill editor:
- First, initialize the Quill editor:
1
2
3
|
var quill = new Quill('#editor', {
theme: 'snow'
});
|
- Next, use the insertEmbed method to append HTML content to the editor:
1
2
|
var htmlContent = '<h1>Hello World!</h1>';
quill.insertEmbed(quill.getLength(), 'html', htmlContent);
|
- To render the HTML content in the editor, you can use a custom renderer and add it to the module:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var BlockEmbed = Quill.import('blots/block/embed');
class HtmlEmbed extends BlockEmbed {
static create(value) {
let node = super.create();
node.innerHTML = value;
return node;
}
static value(node) {
return node.innerHTML;
}
}
HtmlEmbed.blotName = 'html';
HtmlEmbed.tagName = 'div';
Quill.register(HtmlEmbed);
|
- Finally, add CSS styles to the editor to properly render HTML content:
1
2
3
4
|
.ql-html {
border: 1px solid #ccc;
padding: 10px;
}
|
With these steps, you can append and render HTML content in a Quill editor. Just make sure to sanitize the HTML content before inserting it to prevent any security issues.