Adding Source button to ngx-quill in angular 6

Question

Am using ngx quill for text editor, Now I have to add source button for edit purpose. So I checked this link

https://codepen.io/anon/pen/ZyEjrQ

But here If am adding

<div> Hello </div>

If am click on the source again I can able to see like

<p> Hello <p>

So I need to know how do i add source in ngx-quill and output should be same as I typed

Any way to do like that.

Answer 1

Quill uses <p> tag for block-level elements. So if you paste <div></div> , it will be converted to <p></p> . But you can change this default behaviour by using following code with ngx-quill -

const parchment = Quill.import('parchment')
const block = parchment.query('block')
block.tagName = 'DIV'
Quill.register(block, true)

This will keep all <div></div> tags. Hope this helps:)