Inserting html or "templates" with quill.js

Question

I'd like to create a html snippet or template for quill.js which will enable me to create a 3 column 1 row grid. ie:

<div class="row">
  <div class="col col-4">
    column 1
  </div>
  <div class="col col-4">
    column 2
  </div>
  <div class="col col-4">
    column 3
  </div>
</div>

I tried to add <div> tags as shown below however it doesn't work and prints the tags out as text.

quill.setContents([
  { insert: '<div>' },
  { insert: 'World!', attributes: { bold: true } },
  { insert: '</div>\n' }
]);

I also read somewhere that quill.js strips out various html tags but I can't find how to allow them in the docs.

Any help on this would be appreciated.

Cheers :)

Answer 1

Note if you attempt to use the list component as an extension you will run in a number of Quill.js issues-- it doesn't actually support blocks within blocks so you will not be able to nest div's and still use features like headings, only inline elements will be possible, and you will not be able to use <br/> tags because they are wrapped in <p></p> blocks (no blocks within blocks) or use the backspace or enter keys-- this solution is severely limited and virtually impossible to extend, nobody has discovered a good workaround, you can't tell that from the issues board because issues related to architecture are systematically deleted... you will find that your delta saving will be off, make sure any extensions you make can actually save using the native format. I find the answer to modify the list element quite misleading as it's so clearly different to the requirements stated here... if you hit return within one of it's container blocks, it'll splice into a new block.... also the embed functionality is not the same anymore, so you will have trouble with that workaround.

My advice is to try another framework like slate.js or prosemirror, they are newer and have their own issues but don't suffer from the same architectural flaws and have nesting with first class data models. You will definitely have better luck with support.

Answer 2

Quill does not let you make arbitrary HTML modifications, as they are error prone and earned the previous generation of rich text editors their notoriety. Parchment is Quill's abstraction that that allows for deep customization and a good resource is: Cloning Medium with Parchment.

You may be able to use dangerouslyPasteHTML for some use cases but that passes through Quill's matchers so the pasted content's HTML may be different from what you pass in.