Export: Under pressure

Not everything is created equal… and this year, we’re putting different rich text editors to the test to see how their specific features and plugin’s perform side-by-side.

In this post in the series, we ran a comparison to see how our new Export plugin’s abilities compare with the export abilities on offer from other rich text editors.

The export abilities we chose to compare include PDF export, style modification, and image security.

What’s Export capability?

Export is the ability to copy the content that’s within a rich text editor, change it into another format (usually a portable form), and send it to a destination. This can be an image – for example taking a snapshot like a screen cap of the rich text editor and emailing it out. Another effective export is when a file is transformed into a specific format that’s lightweight and easy to share – such as PDF.

What does Export mean for rich text editors?

So what are the characteristics of a lightweight PDF? They have fewer features that could add to the file size –like optical character recognition (OCR). This means rich text editors need to produce something that ensures end users are able to send or share the file easily. If the export feature instead produces large files (including OCR or similar features), it can inhibit the usability of the exported file.

That said, the ability to style an exported PDF is also an essential feature, as is security in image management. There’s a possible danger in linking to external images, and then embedding those insecure links inside PDF files designed to be shared between users. Best practice for security is to ensure that any malicious content hidden inside images or image links is not allowed to spread.

Since PDF is the most well known and accepted export format, we compared PDF export between rich text editors. Here’s a summary of the results:

The Export plugin abilities between CKEditor 4 and 5 are mostly identical. Adjusting the output design is easier when using CKEditor 4 compared to CKEditor 5. Changes made with font and color plugins within the editor are carried over into the exported PDF in CKEditor 4.

Slate.js, Quill, and Summernote rich text editor export

Export features are available only as separately maintained projects for these three rich text editors. A closed Github request exists for Slate.js requesting the ability to output PDF content. Quill has an independent npm package. Summernote has an independent project that exports a PDF - this was created by lqez on Github.   

Froala rich text editor export

The PDF export abilities in Froala are straightforward and fast to configure. While there are no  methods for designing the PDF, and the text cannot be selected, the file produced is lightweight (the demo file produced is 22KB).

To set this plugin up, modify the rich text editor HTML: configure the getPDF Toolbar button, and then export a PDF.

CKEditor 5 rich text editor export

The CKEditor 5 configuration was complex. Loading the CKEditor Export plugin proved to introduce more errors that detracted from CKEditor 5’s Export features.

The plugin took several attempts to install even after using the download configurator to download a working demo. Cloning the CKEditor Github repository, and writing an index.html file with the CKEditor JavaScript produced more consistent results compared to the CKEditor 5 configurator.

The design configuration also presented another challenge. Changing the appearance of the content inside the editor with font, color, and images will not carry over into the exported PDF. The CKEditor configuration needs a link to a specific CSS file to change the exported PDF design. The granular ability to adjust margins with CKEditor 5 does make up for the additional difficulty in the design configuration, however.

Changing the page margins involves adjustment of the space allowed around the page in millimeters. This configuration represented the least difficult design change to achieve:

ClassicEditor.defaultConfig = {
        toolbar: {
              items: [
              'ExportPdf’
            ]
          },
      exportPdf: {
        stylesheets: [ 
              'EDITOR_STYLES',
      ],
      fileName: 'my-file.pdf',
        converterOptions: {  
        format: 'A4',
        margin_top: '20mm',
        margin_bottom: '20mm',
        margin_right: '12mm',
        margin_left: '12mm',
        page_orientation: 'portrait'
      }
},

Adjusting these values will change the appearance of the PDF exported. The following has margin_top and margin_right set at 20mm and 12mm respectively:

And the following has the values set at 30mm and 12mm:

The error handling is also effective. When running the yarn run build command to rebuild the CKEditor, The error message indicated exactly where I had left missing commas for the export configuration:

ERROR in ./src/ckeditor.js 104:1
Module parse failed: Unexpected token (104:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <a href="https://webpack.js.org/concepts#loaders" target="_blank" rel="noopener">https://webpack.js.org/concepts#loaders</a>

|           }
|         }
> image: {
| toolbar: [
| 'imageStyle:inline',
error Command failed with exit code 2.
info Visit <a href="https://yarnpkg.com/en/docs/cli/run" target="_blank" rel="noopener">https://yarnpkg.com/en/docs/cli/run</a> for documentation about this command.

TinyMCE rich text editor export, and security

While the configuration process for Froala’s Export plugin is comparable to TinyMCE’s rich text editor HTML configuration, the options available for design and security in image management found in TinyMCE’s Export plugin are not available within Froala’s plugin.

Compared to TinyMCE, any adjustments you make to the font, color, and positioning inside the TinyMCE editor carries over into the PDF. This simplicity is another example of TinyMCE as a true WYSIWYG. There is no need for managing the complexity shown by CKEditor 5. Froala and CKEditor 4 also offered this streamlined design ability.

Another feature that TinyMCE offers not found in other rich text editors is secure image links to outside sources. CKEditor 5 involves further configuration in order to link an image to an exported PDF, and will accept any publicly available image. TinyMCE uses a straightforward proxy to achieve security. The proxy is also not required if you are using the Export plugin through Tiny Cloud.

Try the TinyMCE Export plugin

You can find out more and try the plugin for yourself in our TinyMCE documentation. Here, you can see an example Codepen, which demonstrates the simplicity of configuration. You can add the Export plugin to the list of plugins set up in your TinyMCE configuration:

tinymce.init({
  selector: "textarea", // Adjust to a different selector depending on your rich text editor HTML
  plugins: "export",
  toolbar: "export",
  export_image_proxy: "proxy.php", // Required for rendering remote images if self hosting
});

Consider integrating TinyMCE with your application by following our quick start guide, or contact us for more assistance or information about Exports.