javascript - Quills JS: extracting formatted text, saving it on server, loading it and identifying specific parts

one text

Solution:

In order to make Quill keep/add a certain class for an element, you have to configure it manually through Quill instead of adding them yourself.

You can achieve that by:

  const Block = Quill.import('blots/block');

  class HeadLine extends Block {}
  HeadLine.blotName = 'headline';
  HeadLine.tagName = 'h1';
  HeadLine.className = 'headline-class';
  Quill.register(HeadLine, true);

This will add/remove the headline-class for the h1 class when you use the headline blot. and if you want to have more control on the headline element you can do:

  class HeadLine extends Block {
    static create(value) {
      const node = super.create(value);
      node.classList.add('headline-class');
      return node;
    }
  }

And to set the contents of the editor you can do:

quill.setContents('{"ops":[{"insert":"Headline"},{"attributes":{"headline":true},"insert":"\n"},{"insert":"\n\ncontent"},{"attributes":{"content":true},"insert":"\n"}]}')

Now you have full control on the node itself.

Also, I created a jsFiddle that I hope it helps you:

https://jsfiddle.net/hassansalem/c5nvgfq1/6/