Docker container rich text editors: Under pressure

No matter what application you’re developing, using a rich text editor makes a developer’s life easier. Instead of dealing with HTML code, you have a convenient WYSIWYG (What You See Is What You Get) editor (also known as a rich text editor), that allows you to edit text and add a rich array of visual design features. Beyond making it easy to add bold or italic text, rich text editors allow you to:

• Easily insert images, videos, and other media types
• Edit the formatting of the text naturally, as you would do in a word processor
• Conveniently add hyperlinks to text
• Create tables, line separators, and other elements.

This article compares TinyMCE with other popular rich text editors, based on their ability to integrate with the Docker container platform.

Why use a rich text editor in Docker?

The Docker ecosystem of tools is used for developing, monitoring, and scaling your applications – and allows you to optimize your workflow both on-premise and in the Cloud. It’s quickly become the most widely used containerization platform by developers, and no wonder. Docker offers great ease of deploying applications both locally (Windows, macOS, Linux) and in the cloud.

Thanks to its popularity, Docker integrates easily with the most commonly used tools for application development: Git, CI/CD build tools, container orchestration platforms, and others.

Given the current rise of cloud-native applications, it’s now commonplace to want to leverage the benefits of Docker in applications that use rich text editors, such as document editors, chat clients, and collaborative apps.

But which rich text editor provides the best integration with Docker?

Comparing rich text editors with Docker integration

Let’s explore five of the most widely used rich text editors and their viability for use in conjunction with a Docker containerized application or microservice.

The rich text editors included in this review were evaluated under the following conditions:.

• Docker support: Although not all the selected editors have prebuilt packages for Docker, they should at least integrate with most of the frameworks used for containerized apps (Angular.js, Django, jQuery, Laravel, Node.js, Rails, React, etc.)
• Setup speed: How much time is required to get the application up and running?
• Ease of installation: How much effort is needed to install the application? Are there scripts that automate the work, or is it manual?
• Ease of maintenance: How serviceable is the application? How many files need to be modified when making a change? Do you have to reinstall everything from scratch with each new build?

The table below gives a brief overview of how they compare:

CKEditor

CKEditor allows you to run Real-time Collaboration and Collaboration Server On-Premises as Docker images, which can be used both locally and in the cloud. CKEditor On-Premises is available with a license key, which gives access to premium features free for 30 days. After the trial period, you will need to sign up for a pricing plan to continue use.

You can use CKEditor's Collaboration Server On-Premises Quick-Start guide for local testing purposes. It takes care of installing all the necessary infrastructure on your local machine with one procedure.

Basically, all you need is:

• Docker Desktop
• Node.js (version 10+)
• npm (version 6+)
• Git on your workstation.

You must clone the Quick-Start guide repository, run npm install, and then install the components by running node setup.js with the appropriate credentials. It will then download the necessary images, such as nodejs server, redis, mysql, and ckeditor-cs.

Note: ssh-git https is fine.

% git clone git@github.com:cksource/ckeditor-cs-on-premises-infrastructure.git

Cloning into 'ckeditor-cs-on-premises-infrastructure'...
remote: Enumerating objects: 904, done.
remote: Counting objects: 100% (904/904), done.
remote: Compressing objects: 100% (529/529), done.
remote: Total 904 (delta 518), reused 713 (delta 339), pack-reused 0
Receiving objects: 100% (904/904), 3.57 MiB | 2.84 MiB/s, done.
Resolving deltas: 100% (518/518), done.

Additionally, you can modify the database configuration according to your requirements by editing the init.sql file. Other files where you can set the arguments are setup.js and the docker-compose.yml itself. For more information concerning the configuration files see CKEditor documentation.

Once the Collaboration Server On-Premises is ready, you can containerize your application using Docker or Docker Compose, and then configure the endpoints between the CKEditor Collaboration web application and Collaboration Server On-Premises.

Froala

While Froala Editor V4 has a variety of client framework integrations and server-side SDKs, it does not have a Docker image like CKEditor. If you want to containerize any of its components, you’ll have to do it manually.

That means additional effort, both for setting up the necessary infrastructure and maintenance.

Quill

Despite being an API-driven WYSIWYG editor, Quill does not have Docker bundles available. Like Froala, if you want to deploy Quill as a containerized application, you must take the trouble to Dockerize it according to your needs.

It therefore represents an additional effort every time you need to make changes to your infrastructure.

Slate

Like Froala and Quill, Slate does not offer a turn-key solution for deployments in Docker. However, that does make sense, given that this project is still under development (currently in beta), and the priority is to reach greater maturity.

That said, Slate uses a modular approach where you must install the appropriate packages according to the functionality you want for your application.

TinyMCE

TinyMCE offers Docker containers with Self-hosted bundles. The premium pricing plan specifically includes the ability to use Docker. That being said, you can run TinyMCE core within Docker – premium plugins are only available on the premium pricing plan.

The only prerequisites to install these services locally, is to have Docker Engine and a user with appropriate administrative permissions.

The installation procedure is straightforward. This example uses the TinyMCE hyperlinking server-side component, but the installation procedure is similar for the other components.

1. Log in to your TinyMCE account and download the TinyMCE-Essential_Latest.zip file. Once downloaded, unzip it to a location of your choice. For ease of installation, the destination folder is named tinymce self-hosted for this example, but feel free to use another name.

unzip TinyMCE-<docker-bundle-name-version>.zip -d tinymce-selfhosted

2. Assuming you are using the folder name described above, run the following command to navigate to the service folder:

cd tinymce-selfhosted/tinymce-services

3. Unzip the ephox-hyperlinking-docker-starter-kit.zip file. For convenience, the destination directory has been named hyperlinking-service-dockerfile.

unzip ephox-hyperlinking-docker-starter-kit.zip -d hyperlinking-service-dockerfile

4. Copy the ephox-hyperlinking.war file to the newly created hyperlinking-service-dockerfile folder using the following command:

cp ephox-hyperlinking.war hyperlinking-service-dockerfile/

5. Open to the hyperlinking-service-dockerfile directory and adjust the permissions of the bash scripts so that they can be executed.

cd hyperlinking-service-dockerfile
chmod +x *.sh

6. Create an origins.env file in the same directory using your preferred text editor, and paste the sample origin information shown below:

ORIGIN0=example.net
ORIGIN1=example
ORIGIN2=http://example.org

7. Build the Docker file.

docker build -t tinymce-hyperlinking-service

8. Run the Docker service using the following code:

docker run -d -p 8083:8080 --env-file origins.env tinymce-hyperlinking-service

9. Verify that the Docker service is running.

curl http://localhost:8083/ephox-hyperlinking/

You should see a message saying Link checking and media embedding service is running, which indicates that the installation process was successful, and the service is working correctly.

As noted above, you can use a similar procedure to deploy the image proxy server-side component or the spelling service server-side component using Docker. Furthermore, all necessary configurations can be made by editing the file corresponding to the environmental variables in the config directory included.

As with the CKEditor, once the required server-side components are configured, you can establish the connection between those components and your containerized application.

Choosing the right Docker integration

Only two of the selected rich text editors, CKEditor and TinyMCE, offer Docker bundles. They’re the only ones that allow you to deploy server-side components that extend the functionality of the rich text editor conveniently, with minimal manual intervention. These solutions allow you to optimize your workflow both On-premise and in the cloud by leveraging the vast Docker and Kubernetes ecosystem of tools for developing, monitoring, and scaling your applications.

In addition to their enterprise-grade self-hosted bundles, the creators of both TinyMCE and CKEditor have free, open source versions of their rich text editors. Tiny's open source editor is very popular in the open-source community. You can check it out using one of the TinyMCE demos or sign up for a FREE API key and build TinyMCE to try it out.