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 React WYSIWYG editor in a web application 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.
Rich text editors for React compared side-by-side
|
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.
React 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:
- Install npm and Node.js as prerequisites
- Run the create-react-app command to build a basic React app
- Change into the newly created app directory
- Remove the files from the src directory except for index.css and index.jss
- 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.
React rich text editor installation speed and effort
CK Editor
index.js size: 33 lines
The CKEditor 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.
