Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

Under Pressure; React integration

Joe Robinson

July 26th, 2021

Written by

Joe Robinson

Category

Product Management

This year, we’re exploring how TinyMCE plugins and integrations compare with other rich text editors. How one rich text editor performs against another is a question our customers often ask. Our exploration aims to answer that question. 

Integrating a rich text editor in a web application built with the React library should be straightforward and direct. The speed of integration shouldn't take too much of your time, or your developer team’s time. 

To provide some useful information about setup, we compared the performance of five rich text editors. In particular, we examined the acumen and effort taken to get each of the rich text editors up and running.

Some React apps require an additional configuration file called a Webpack. We, therefore, decided to include this as a factor in our assessment of installation speed and effort.

Configuring a Webpack requires additional time and attention to detail, but the benefit is increased compatibility for the web app across different browsers. 

 

Slate

CK Editor

Froala

TinyMCE

Quill

React Component available

Files changed for integration

index.js

index.js

index.js, app.js, Webpack files

index.js

index.js, app.js

Installation speed and effort

Faster installation speed, complex maintenance

Moderate installation speed, standard maintenance

Moderate installation speed, standard maintenance

Faster installation, easier maintenance

Faster installation, standard maintenance

Note: For an app in production, you would need to make significant changes to your app.js file in your React repository. For this proof of concept test, we did not make large-scale app.js changes, and kept changes limited only to small adjustments.

Each rich text editor has a React component available to install from the Node Package Manager repository. How easy it is to set up and maintain the rich text editor once it’s integrated, is what sets the available options apart.

We made an estimate on the maintenance difficulty for the application based on the size of the configuration content. That’s the number of files changed in a basic React repository, and the number of lines written. The more files changed and the more lines of code required, give a good idea of the maintenance costs going forward after the initial configuration.

Webpacks and rich text editors

Webpacks ensure compatibility with a large number of available browsers, and will only load the dependencies it needs to work at a minimum, which makes for a more efficient application.

Depending on your goal, a Webpack configuration can improve your application’s accessibility.

Webpack integration represents an essential part of setting up a React web application that’s running in production and actively serving customers. You can configure a webpack yourself by changing it into your application’s root directory, and saving a webpack.config.js file for web pack information.

However, there is a danger with using a webpack in your application. It can be more error prone to configure your application with a webpack. Since the webpack bundles together your application’s rich text editor into a JavaScript bundle, and there are more dependencies and files linked together in the React repository, there’s a greater chance of breaks either in the file links or bundling process.

The rich text editor integration method

For each of the html rich text editors, we used the same set of steps to get it up and running. The steps are drawn from a React Getting Started Guide created by Tania Rascia:

  1. Install npm and Node.js as prerequisites
  2. Run the create-react-app command to build a basic React app
  3. Change into the newly created app directory
  4. Remove the files from the src directory except for index.css and index.jss
  5. Modify index.js to include the rich text editor JavaScript.

Then, using npm, run the npm start command to launch the web app from a local host, and it automatically opens the web app in a browser.

Rich text editor installation speed and effort

CK Editor

index.js size: 33 lines

The CK Editor configuration had the least impact in terms of lines of JavaScript written into the applications files. Despite the coding steps being a bit shorter, it took significantly longer to get the application to display CK Editor compared to the other rich text editors. The essential steps documented by Rascia would not work, and we had to try alternative integration methods.

Froala

app.js: 23 lines

index.js: 17 lines

For Froala to integrate with React, we modified the app.js file, and also created a webpack file. The number of files touched and modified made the installation slower, and introduced more maintenance time for any future changes.

Quill

index.js: 44 lines

The Quill integration was lengthy. It required testing of the component package with different installation steps than the basic steps Tania Rascia documented.

TinyMCE

index.js: 41 lines

With TinyMCE’s React wrapper, the integration process was faster compared to the other rich text editor integrations. The integration is similar to the tiny.init script placed inside a website's head tags, and as a result, it was more straightforward to add or remove plugins.

Conclusions

While factors like a Webpack might cost more time in initial configuration, the benefit they offer in cross browser integration remains. However, if speed is a factor, we recommend trying out TinyMCE’s React integration. Tiny’s speed of integration comes from its React Wrapper. 

You can read our documentation on the topic for more information about our React Wrapper. And if you’re looking for a detailed procedure on integrating TinyMCE with React, you can read more here on Blueprint.

Under pressureReact
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • Product Management

    SaaS storytelling framework: the ABT template

    by Di Mace in Product Management
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing