Allow tags in React Quill component

Question

I am trying to load following content into a ReactQuill component but it keeps stripping away its inner html tags such as <mark>.

<mark><i><b>[CLIENT NAME]</b></i></mark>

The component turns it into following:

<p><strong><em>[CLIENT NAME]</em></strong></p>

Quill Componenet:

<ReactQuill
 {...{
   key: 'content',
   value: this.state.content,
   onChange: handleContent,
 }}
/>

Is there a way to add exceptions for tags so that the component will ignore a tag?

Answer 1

You'll need to define your custom format, see this. Defining a Mark format should allow Quill to recognise and properly handle your html

class MarkBlot extends Inline { }
MarkBlot.blotName = 'mark';
MarkBlot.tagName = 'mark';
Quill.register(MarkBlot);