React-quill: Export HTML using inline styles instead of the quill classes

[zeeshanjan82]

When I try to check the html output in the console window for the CodePen example by putting the console.log statement inside the HandleChange event I see something like this
<p class="ql-indent-5">dfsdsfdfdsd</p>
Here the component is added the quill classes to the output but instead it should put the styles inline so we could use it for email templates e.t.c

Is there any way to embed the styles inside the output html?

[alexkrolick]

You can configure the underlying Quill instance like this:

• https://github.com/zenoamaro/react-quill#custom-formats
• https://quilljs.com/playground/#class-vs-inline-style

[WebKieth]

this issue isn't solved. Why I need to reconfigure a tonns of configs to enable simple feature. Anywhere, who wants to render classes from text editor? Nobody! Of cource, I just want to give users ability to write some text, save and output it from DB. Without any bullshit with css requests

[alexkrolick]

If we start messing with the editor instance behind the scene it may be difficult to override those changes later.

In general this library has tried not to expose Quill configuration except where a prop cleanly matches with a static option. The editor reference is the recommended way to access the Quill imperative APIs directly.

We could try to come up with a prop like "inlineStyles": true, but due to the concerns above I'd suggest you first propose an upstream API in Quill that switches between inline styles and classes.

[trollfred]

🍿

[svoboda-rabstvo]

The same problem

[omerson]

All of the solutions do not work, typescript is even worse. I had no solution than to manually manipulate editor HTMLElement.

prepareIndent(editor: HTMLElement) {
            const indents: NodeList = editor.querySelectorAll('[class^=ql-indent-]');
            for (let i = 0; i < indents.length; i++) {
                const node: HTMLElement = indents[i] as HTMLElement;
                const indentClass = node.classList.toString().split(' ').filter(c => c.startsWith('ql-indent-'))[0];
                let tab = 0;
                const destructClass = indentClass.split('-');
                if (destructClass) {
                    const indentIndex = destructClass.pop();
                    if (indentIndex) {
                        tab = Number(indentIndex);
                    }
                }
                const indentValue = 3 * tab;
                node.style.paddingLeft = indentValue + 'em';
            }
        }