Why choose one editor library over another? One important reason is licensing—whether you’re able to use the library in proprietary/commercial products or only in free ones.
CKEditor 5 is released under General Public License (GPL), which makes a library available for free programs only; such libraries cannot be used in commercial products unless you purchase an additional license. TinyMCE 5 uses Lesser GPL (LGPL), which permits using the library in commercial products.
The best license for a given library is a matter of strategy. If you’re creating proprietary code for a commercial software, you want LGPL.
First off, you need to install two npm packages into ReactJS project: tinymce and @tinymce/tinymce-react.
npm install --save tinymce
npm install --save @tinymce/tinymce-react
Then you can use the Editor component in React code by importing …
You also need a configuration object that comes as a prop to the Editor component:
In the above, you specified an initial set of properties for Editor functionality (list of plugins and toolbar buttons) and look and feel (switches for UI elements, theme, branding, icons and custom CSS) … and onEditorChange callback:
Use initialValue prop as the initial HTML text value for the editor.
With this initial setup, you should be able to use TinyMCE in a project.
When working with modern module bundlers (for example, Rollup and Webpack), you need to make sure all library resources (for example, CSS files and images) used by ReactJS components are included in the output bundle.
CKEditor 5 uses a sophisticated loader-based Webpack configuration, which appears as follows:
The above uses inline inserts of SVG icons, file urls for TTF font files, style tags for CSS content, and a PostCSS-loader to enable resolution of the templated UI theme (highly customizable ckeditor5-theme-lark).
In contrast, TinyMCE uses local Webpack context. There are no changes to the Webpack configuration but all required theme files (skins) are copied over to the build folder using a file-loader, such as:
Important note: Put ! in front of “file-loader” to override any parent Webpack rules that might prevent resource files from loading.
Here’s the process for implementing custom plugins in CKEditor:
Step 1. Define custom plugin class inherited from Plugin core in @ckeditor/ckeditor5-core/src/plugin
Step 2. Implement init() function that adds custom plugin to the factory and defines execute event:
Step 3. Use the plugin in builtinPlugins collection of defined ClassicEditor wrapper.
The TinyMCE approach, however, is based on IIFE wrapper (not ES6 classes), which requires a PluginManager singleton.
Here’s an example of getting PluginManager from globals:
It is time to import the Editor code base and include it in the init object:
After refreshing, you should see the custom plugin button displayed in the toolbar.
As previously noted, both libraries have extended support for different themes (TinyMCE calls them skins) and icon sets.
CKEditor uses a PostCSS processor, which requires the custom loader and additional configuration, and significantly improves maintainability of CSS variables and custom code (using mixins).
TinyMCE helps to override the default UI skin by providing Skin Tool, which is quite easy to use. However, any theme template is generic and does not allow sophisticated customizations of full CSS code that defines, for example, how buttons in plugin’s modal dialogs will appear.
To tackle this problem, you need to implement simple CSS overrides that can be supported by a local CSS and/or SaaS-based BEM approach. For example:
Migrating from one library to another is never hassle-free. There is no common interface and library legacy code can cause unexpected problems.
TinyMCE is a great example of a simple WYSIWYG editor library for integrations and customizations. Using an extended collection of plugins helps you achieve more with minimal additional code. And its Lesser General Purpose license allows you to use TinyMCE code in commercial products.
To learn more about the technology underpinning 7.ai customer engagement products and tools, visit the 7 AIVA—Conversational AI Chatbot Technology with NLP web page.