javascript - Inserting html or "templates" with quill.js - Stack Overflow

admin管理员组

文章数量:1291025

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

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

• javascript
• quill

Share Improve this question Follow edited Feb 12, 2017 at 9:08 Mr Lister 46.6k1515 gold badges113113 silver badges155155 bronze badges asked Feb 11, 2017 at 13:52 JammerJammer 1,56311 gold badge2020 silver badges3737 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Note if you attempt to use the list ponent 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.

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.

本文标签： javascriptInserting html or quottemplatesquot with quilljsStack Overflow