Quill: How can I extract Quill plain HTML WITHOUT any class="ql-xxx" information?

[oliveratgithub]

Hi there,
I'm quite happy with Quill - but getting to the final stage of implementation, I realised, that saving Quill's Editor HTML contains Quill-specific classes, such as...

current result

• For code blocks *:
  <pre class="ql-syntax" spellcheck="false"><span class="hljs-attribute">code</span></pre>

• For size paragraphs:
  <span class="ql-size-huge">This is not a h1 but a huge title</span>

_* does Quill follow highlight.js' recommended implementation with that syntax for code-blocks it is using at the moment?_

expected result

• For code blocks:
  <pre spellcheck="false"><code>code</code></pre>

  • => no class="ql-syntax" & <span class="hljs-attribute">

• For size paragraphs:
  <span style="24px">This is not a h1 but a huge title</span>

  • => no class="ql-size-huge"

I mean, I can simply disable Nr. 2 the custom sizes... But for the Code Syntaxing, I would miss that.

The challenge here is, that I'll pass the HTML to store the text in our DB. And honestly, those class-information make the HTML messy...

Is there any oob solution for this?

P.s.: using Quill.js v1.3.4

[benbro]

You are supposed to use Quill's Delta format with

var delta = quill.getContents();
quill.setContents(delta);

If you insist on using the insecure HTML output you can use inline styles instead of classes or post-process the HTML on your server.

[oliveratgithub]

@benbro thanks for your feedback - unfortunately this does not help me.

I'm not using jQuery so working with .getContents() & JSON serializeArray to get to the HTML is cumbersome, as far as I can tell. I got the desired results by just using quill.root.innerHTML as recommended here at SO

Thanks for the links regarding changing to inline styles. Can you give me an example, how one can change that for the code-block? The examples are pretty for simple tags like Bold, or even Code itself - but the "code-block" is not covered and didn't work like this:

var Codeblock = Quill.import('formats/code-block');
Codeblock.className = '';   // '' because I don't want it to write class="ql-syntax"...
Quill.register(Codeblock, true);

That's actually the last challenge I'm facing - and I'm still in the opinion, that highlight.js is implemented wrongly - for both, the code-block- and the regular code-markups... ;)
Because from my understanding, something like this would be needed:

...
Codeblock.tagName = 'PRE CODE';   // '' should render the code-block tag as <pre><code>...</code></pre>
...

...but actually now it's written to the markup as:

<pre class="ql-syntax" spellcheck="false"><span class="hljs-tag">...</span></pre>

[benbro]

The code-block is annotated by an external library so you'll have to check there. You'll probably need to replace classes with inline styles manually inside the code block.

[oliveratgithub]

@benbro this is not really something I can follow and agree to. Highlight.js is "officially" part of and integrated into QuillJS - and, as mentioned twice in previous comments, in my opinion the markup for Highlight.js is wrongly adapted by Quill.

[benbro]

highlit.js is an external library. If you want it to support inline styles, you should ask there.

The quill module calls window.hljs.highlightAuto(text). It doesn't rely on <pre><code> tags.

[gweinfurther]

What good is a text editor if you can't use the content in your page? You need to be able to export HTML.

[weiweizhang]

could someone give me an example for how to customize code-block to

<pre><code>xxxx</code></pre>

[faribajpr]

hi i'm using angular 2 and quill. when i'm typing in quill and make a text bold or... every thing is ok but when i want to save the text to database it's not bold anymore in my tables. what should i do?

[NalaGinrut]

Folks, not so hard, put this code to the end of your HTML template before </html>

<script>                                                       
 document.querySelectorAll("pre.ql-syntax").forEach(block => { 
     hljs.highlightBlock(block);                               
 })                                                            
</script>                                                      

[aacassandra]

@NalaGinrut thanks bro

[McFcologne]

This is in my case a complete showstopper for quill, because i want to use the content for emails. I definitely need inline styles and no classes.

[mshahzaib101]

i used it like this in React.js..
To display quil content in a div i use class "ql-editor" because through this our div can use the quil default classes...works..

import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

const ReactMarkdown = require("react-markdown/with-html"); //for displaying html

function editorContent() {
  <div className="ql-editor" style={{ padding: 0 }}>
        <ReactMarkdown escapeHtml={false} source={quilGeneratedHtml} />
  </div>
}