1

I have published two questions related to my problem, first of which was closed, but I still do not have the answer to my problem.

My first question that was closed:

Convert HTML to PDF using PrimceFaces 7.0 (or higher) Text Editor and Quill

My second question was answered here:

The Quill publicly available css

Based on the answer of my second question I dare to once again ask my first question: How could I generate nice, production-ready PDF files from the HTML produced by the Quill HTML editor?

The answer to my second question suggests that I must deliberately modify, or process, the HTML generated by it, in order to adjust its styling information.

If this is so, it makes my task very difficult and error prone.

If I apply the changes to the HTML suggested in the answer to my second question, I got the styled text, but the rest of the text seems strange, see below:

HTML after applying the change suggested in the second answer:

<html> <head> <link rel="stylesheet" href="http://cdn.quilljs.com/1.3.6/quill.snow.css"/> </head> <body> <p> <div class="ql-editor"> <span class="ql-size-large">Hello, dear friends!</span> </div> </p> <p> <br /> </p> <p>I am glad to see ALL of you <span style="background-color:rgb( 230 , 0 , 0 )">today</span> here! </p> </body> </html>

This is the debugger in case of applying the changes in HTML:

enter image description here

In case I apply the suggested style class to the <body> element in my HTML I get this:

<html> <head> <link rel="stylesheet" href="http://cdn.quilljs.com/1.3.6/quill.snow.css"/> </head> <body class="ql-editor"> <p> <span class="ql-size-large">Hello, dear friends!</span> </p> <p> <br /> </p> <p>I am glad to see ALL of you <span style="background-color:rgb( 230 , 0 , 0 )">today</span> here! </p> </body> </html>

which might be technically correct, see below the debugger information:

enter image description here

but is still far away from my initial design in the the Text Editor, see below:

enter image description here

So, the resulted HTML differs from the intended HTML.

Alex Mi
  • 1,409
  • 2
  • 21
  • 35
  • This question should in my humble opinion again be closed as a duplicate of the same one as the initial one. Since You effectively again ask two questions in one. Generating the PDF is done as mentioned in the duplicate or with the help of an xhtmlrenderer wrapper. And applying the quill CSS is answered in the other one. And as you can see in the answer to the second question, the change you seem to need to apply is very small. This is not difficult (and certainly not very difficult) and not error prone. A simple java regex will suffice. And no, the text is not generated by PF, but by Quill. – Kukeltje May 19 '20 at 10:22
  • Or demonstrate that pure Quilljs does this correctly and PF messes things up. Then I'm very willing to see if I can help you correct that in PF. https://github.com/quilljs/quill/issues/903 – Kukeltje May 19 '20 at 10:27
  • Or you could manipulate the Quill CSS and change the selectors by removing the `.ql-editor ` everywhere... – Kukeltje May 19 '20 at 10:33
  • or see if you can get inline css instead of classes: https://quilljs.com/guides/how-to-customize-quill/#class-vs-inline Again all not PDF and not PF related! – Kukeltje May 19 '20 at 10:36
  • @Kukeltje see my last ammendment. Aplying the answer to the seond quesiton only solves the problem in that part of the text, but the rest disappears; so I need to wrap the whole generated HTML into a div tag, but then the results are alwful. You could try the examples on your own. I do not know where exactly the porblem lies – Alex Mi May 19 '20 at 10:38
  • Try adding `var BackgroundClass = Quill.import('attributors/class/background'); var ColorClass = Quill.import('attributors/class/color'); var SizeStyle = Quill.import('attributors/style/size'); Quill.register(BackgroundClass, true); Quill.register(ColorClass, true); Quill.register(SizeStyle, true);` to your page before the texteditor and see if all css ends up inline instead of via classes – Kukeltje May 19 '20 at 10:52
  • @Kukeltje you mean in your last comment a js code that needs to ba inserted in the beginning of my .xhtml template where the Texteditor resides? – Alex Mi May 19 '20 at 11:15
  • And after your edit, you again run into a pure quill issue: https://github.com/quilljs/quill/issues/1745, try my other suggestions... Or override the .ql-editor selector css... PLEASE investigate.... All basic css.... – Kukeltje May 19 '20 at 11:25
  • @Kukeltje I tried the js code you suggested, but now I am not able to change the text size of my text (however, I am able for example to change the font type). FYI : I tried to edit the HTML by adding the class definition to the body, the result is given below in the question - it is NOT the same as the initial Text I entered in the editor – Alex Mi May 19 '20 at 11:29
  • I already commented on change to the body and the andditional whitespace. See also https://www.google.com/search?client=firefox-b-d&q=quill+adding+additional+p+tags – Kukeltje May 19 '20 at 11:29
  • @Kukeltje OK, then you could, of course, change the tags in this question (removing PrimeFaces), but please do not close it, as it seems to not be solved so easily. Thank you! – Alex Mi May 19 '20 at 11:30
  • If the tags are removed, title corrected, initial text corrected etc...(PrimeFaces **AND**PDF related) it won't be closed. But please do all this then. – Kukeltje May 19 '20 at 11:46
  • @Kukeltje I reviewed my question and removed unnecessary text. I guess you could post your previous comment there as an answer. – Alex Mi May 19 '20 at 13:36
  • @Kukeltje where can I get information which version of Quill is used by the PrimeFaces text editor? – Alex Mi May 19 '20 at 14:06
  • In the source in github? – Kukeltje May 19 '20 at 15:56

0 Answers0