3

At first let me state that this is my first question here and I am new in this community. Please be kind, do not hesitate to correct me, direct me to where I might find answers or study, etc.

I am posting this question as a last hope for finding a solution as I have not found or come up with any by myself (nor with a help of my colleagues).

Basically PrimeFaces p:editor is currently used at a page in the program I am working on. Users use it for entering and formatting text which is then send as an e-mail. Currently the e-mail content is converted by JavaScript function saveHTML to HTML, so the message code looks exactly like this:

  <div style="font-weight:normal; font-style:normal">

  <div style="font-size:11pt; font-family: Calibri,sans-serif">
    <br>In case of questions please send a message to: <a href="mailto:sample@sample.com" target="_blank">sample@sample.com</a>.
    <br><br>Yours Sincerely
  </div>

Since a certain moment, however, users have been reporting that the editor changes text font unpredictably, etc., and that is how I found out that it is deprecated and wanted to change it to p:textEditor.

The textEditor seemed to work fine (with editing) and looked nice, but during tests a sent e-mail was checked. It was found out that the textEditor somehow does not support the JavaScript function saveHTML, so the function fails and the message code is sent exactly like this:

<p><br></p><p>In case of questions please send a message to:: <a href="mailto:sample@sample.com" target="_blank">sample@sample.com</a>. </p><p><br></p><p>Yours Sincerely</p><p><br></p><p><strong>Anna Li</strong></p>

Then I found out that the textEditor is based on(?) QuillJs (info in textEditor documentation) and if I understood this GitHub issue correctly, then it does not support converting the text to HTML.

So the question/s:

  • Is there a way to fix the textEditor so the saveHTML function works? Or is there another function which can be used instead? Or is there any workaround which is as elegant as the saveHTML function? How to solve this? (Because my last idea is to make my own Java function which converts text to HTML, but this option is long, painful, hard and very inelegant compared to the saveHTML)

PrimeFaces version 7.0.7; PrimeFaces Extension version 7.0.2.

Please note that I do not want to use a text editor from another organization/company.

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
A.Alessio
  • 321
  • 2
  • 15
  • 1
    The resulting html looks differently, but what's the problem with it? – Selaron Dec 18 '19 at 16:00
  • @Selaron it does not contain any information about the text formatting, e.g. font, font weight, space between lines, etc. - so the user can format text with the textEditor but it is not reflected in the HTML. The difference is apparent when the HTML is viewed, for example at W3Schools Tryit Editor: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default . – A.Alessio Dec 19 '19 at 07:51

1 Answers1

4

The problem you encounter is that p:textEditor produces non-portable HTML code which indeed badly limits its overall use cases. The most relevant GitHub issues seem to be PrimeFaces TextEditor: value returns HTML with Quill editor specific CSS (aka is PF's Quill implementation useless?) #4486

This reads like there is no viable workaround other than switching to pe:ckEditor which should not be that big of a problem in your case as you already use PE.

The Quill editor used by p:textEditor uses CSS classes instead of inline style sheets to generate the HTML output. You'd need to deliver these CSS definitions together with the generated HTML which is not an option for most use cases.

A.Alessio
  • 321
  • 2
  • 15
Selaron
  • 6,105
  • 4
  • 31
  • 39
  • Thank you, @Selaron. I am going to try it now! – A.Alessio Dec 19 '19 at 11:37
  • I tried the `pe:ckEditor`, @Selaron, and it is generating the HTML just as is should do. Now I am tackling problem of foreign characters in it but that is eventually for another question. :) Thank you so much for your help! You saved the day! FYI for anyone who would want to use the `pe:ckEditor`, it is necessary to add new dependency, see https://stackoverflow.com/questions/37520069/primefaces-extensions-ckeditor-missing-toolbar. – A.Alessio Dec 19 '19 at 13:28