Customising getSemanticHTML() output

[TheEponymousBob]

I'm working on a Quill-powered application. But we are sharing content between the new application and an old, non-Quill, application. So storing as deltas isn't really an option, and we need to continue to persist rich text as HTML.

What I'm wondering is whether or not there is a clean way to customize the HTML produced by this method.

As a specific example, I'd like to add a CSS class to the <pre> generated in CodeBlockContainer.html() (or SyntaxCodeBlockContainer.html()). So one approach might be to inject or override this method with my own logic. Is such a thing possible?

I suspect there will be other tweaking coming down the line, so I'd like to have a general solution for this sort of thing rather than a workaround for code-blocks.

[flagsoft]

Good question.

I used this code:

Normal BOLD

before:
<p>Normal <strong>BOLD</strong></p>

after:
<p>Normal <b>BOLD</b></p>

  const html = quill.getSemanticHTML();
  console.log(html); 
  // <p>Normal <strong>BOLD</strong></p>

  // -- convert <strong> to <b>
  var html2 = html.replace(/<strong>/gi,'<b>');
  var html3 = html2.replace(/<\/strong>/gi,'</b>');
  console.log(html3); 
  // <p>Normal <b>BOLD</b></p>

[flagsoft]

This seems to work
Source: https://quilljs.com/docs/guides/cloning-medium-with-parchment

const quill = new Quill('#editor', {
  modules: {
    toolbar: '#toolbar'
    //toolbar: toolbarOptions
  },
  placeholder: 'Compose an epic article here...',
  theme: 'snow', // or 'bubble'
});


const Inline = Quill.import('blots/inline');

class BoldBlot extends Inline {
  static blotName = 'bold';
  static tagName = 'b';
  //static tagName = 'strong';
}

class ItalicBlot extends Inline {
  static blotName = 'italic';
  static tagName = 'i';
  //static tagName = 'em';
}

Quill.register(BoldBlot);
Quill.register(ItalicBlot);

[stashaway]

I'd love an answer to this question as well. I need to add classes to the ul or ol generated in a list. I've been able to add custom classes to other quill elements, but the new handling of lists has broken this ability that worked in 1.x. I have the classes being applied properly in the DOM, but they're not reflected in the quill output.

[flagsoft]

@stashaway Maybe you can add it later after XML processing with jquery. String -> DOM -> jquery add classes -> back to string.

[stashaway]

The problem is I need to be able to load that text back in to Quill later and edit it again, so that wouldn’t work.