How to append and render the html in quill editor?

@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:

1. First, initialize the Quill editor:

1
2
3

var quill = new Quill('#editor', {
  theme: 'snow'
});

1. 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);

1. 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);

1. 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.