primefaces: TextEditor: value returns HTML with Quill editor specific CSS (aka is PF's Quill implementation useless?)

1) Environment

PrimeFaces version: 6.2.15
Application Wildfly 12
Affected browsers: Firefox, Chrome

2) Expected behavior

I expected this to work like the old p:editor, for example centering text would have CSS like “text-align: center” and making text big would have CSS like “font-size: 2.5em”.

3) Actual behavior

p:textEditor’s value returns Quill specific CSS classes such as “ql-align-center” and “ql-size-huge”. These are useless outside out of the Quill editor as the texteditor.css looks like:

.ql-editor .ql-size-huge { font-size: 2.5em; }

When we moved from p:editor to p:textEditor in 6.0.6 a few years ago, I thought it was a straight upgrade. I really don’t think they’re compatible at all though even though the p:editor showcase page says it is deprecated and to use p:textEditor instead.

p:editor provided straight HTML, p:textEditor provides HTML with editor specific markup that is useless outside the editor.

I spent time this morning digging into Quill, something I probably should have done a while ago but never bothered to (the editor stuff in our tool is barely used, until now, of course). It seems like Quill is really intended for its users to use its Delta format which is a JSON thing that could be converted to XHTML with some work.

Even Primefaces’ showcase is broken, if you center align text or make text big and click Submit, those changes are not carried through. There is no center CSS altogether and the Huge text size references the editor CSS.

https://screenshotscdn.firefoxusercontent.com/images/5ec43d69-c668-4cca-aaba-85e8f3f0505d.png

I’m not sure what my suggestion is except that I don’t think p:textEditor should be considered a straight upgrade from p:editor. I’m now aware of the PF extensions CKEditor and I will probably move to that. I saw there were licensing issues bringing that into PF proper, and that sounds too bad.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 16 (13 by maintainers)

Links to this issue

Primefaces textEditor: converting text to HTML with JavaScript not working - Stack Overflow

Most upvoted comments

Could the following example be useful for PF to configure Quill to use inline styles instead of custom classes: https://github.com/quilljs/quill/issues/1093 ?

Embedding Quill CSS in you own application, or either pointing to their CSS, is not a viable solution for all use cases: what if you’re using p:textEditor to generate HTML mail bodies? I don’t want to put in them references to external CSS files just to make the text in my e-mail centered!

Also, this page seems to suggest that adding just the style itself is not enough, because Quill JavaScript is also involved. But honestly I didn’t delve into it.

In short, having the recommended rich-text component in PF that produces “proprietary” and non-portable HTML code by default is really bad, IMHO. Especially if this is used for very basic things like text alignment and font size.

mauromol on Sep 23, 2019

I have added class="ql-editor" to the parent element which helped to apply right font size in the view.

Generated html code and added ql-editor class to parent element

<div class="ql-editor">
	<p>
		<span class="ql-size-small">small </span>
		Normal 
		<span class="ql-size-large">Large</span>
		<span class="ql-size-huge">Huge</span>
	</p>
</div>

style in text editor css


.ql-editor .ql-size-small {
    font-size: .75em;
}

.ql-editor .ql-size-large {
    font-size: 1.5em;
}

.ql-editor .ql-size-huge {
    font-size: 2.5em;
}

selvait90 on Aug 15, 2019

I apologize that I made so many duplicate entries, I have no idea how it happened.

One thing to consider is exposing the Delta object that Quill provides through its API through getContents(). I believe this is the intended way to use Quill, simply getting the inner HTML provides an answer but for lots of functionality within Quill, I don’t think it’s the answer.

https://quilljs.com/docs/api/#getcontents

firsthour on Jan 31, 2019