How do I restrict the types of tags and classes allowed?

Question

I would like to restrict the type of document created by a rich-text-editor. Let's assume color/styling is handled via CSS, and I only want the content editable document to be of the type:

<p class="r">I am red</p>
<p class="g">I am green</p>
<p class="b">I am blue</p>
<p class="b">I am <b>blue bold</b></p>

The rules are: * All content are in <p> tags. * Every <p> has to have a class assigned to it, which can be 'r', 'g' or 'b'. * The content inside the

tag can be only styled by <b> or <i> . * No nested <p> tags.

Is it possible to initialize a quilljs editor/ prose-editor/other to only allow documents of this types. Note that <p> and <b> are stand-ins.. it would be ok if the solution is to use <div> / <strong> .

Answer 1

The Clipboard module in Quill is responsible for converting pasted content to the Delta format. The Clipboard supports adding custom matchers .

By default Quill whitelist all supported formats (Bold, Italic...). You can limit the formats with a whitelist . You can also extend existing formats and create new formats.

You can create a custom Class Attributor for the r, g, b classes and add it to the whitelist. You might be able to remove nested p tags with a Clipboard custom matcher or pre-process your content with regex.