TinyMCE and PDF

It turns out that it was way more difficult to convert HTML to PDF. I went through a set of backbend libraries which promised to get the job done, only to find that they are in general a major time sink.

tcpdf was one of the first libraries I tried, and tried and tried. Yet after some tweaking and yelling and screaming I decided to move on, to the next library…

dompdf, again a promising candidate with little to show for after some play time. Dompdf is mostly a php based HTML4 renderer which supports CSS 2.1, and images etc.

… and of I went to wkhtmltopdf which was the first backbend libraries which actually generated reasonable results except that it would cut text in the middle of the line of to create a page break. wkHTMLtoPDF would also just create a screenshot instead of usable PDF.

So I decided to stick with jsPDF and kick it into shape. After all, how difficult could it be to synch TinyMCE and jsPDF?


3 long days later I have reached a point where I am now finally able to render images and text into one PDF.

It turns out that there are a lot of blog posts on this subject but no one has offered a plug-in solution to the problem.

So I had to write a small parser, to massage all IMG tags in a way that would then allow me to position them inside the actual PDF document. However only after I had converted all of the images into base64 data.

Finally today I continued adding some new features to the Editor app, as you can see from the screenshot, it is now possible to specify the Page Layout. The resulting print comes close enough.

There is however much more work to be done, to get all the menu items to work, and to properly handle font families, and sizes to PDF.

This entry was posted in Uncategorized. Bookmark the permalink.

3 Responses to TinyMCE and PDF

  1. Saran says:

    is that images are uploaded from the app

  2. Saran says:

    i am working on rails and i am using same wkhtmltopdf but local images that are saved form the app are not generated on the pdf.the images are inside tinymce

  3. I need this source code, It’ll help me in my project.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s