Angular component integrations for rich text editors: Under pressure

Is Angular too out of date to consider using? The answer to that, really depends on the project and who’s maintaining it. Frameworks with greater longevity are more likely to be in production out in the field, so knowing how they work is definitely to your advantage.

With an age of five and a bit years (release date, September 2016), you may well ask if Angular was still a significant framework, or if it’s a legacy project that should be left to gather dust. A museum piece at best. 

But instead of a quick write-off, it’s worth looking a bit closer. Specifically, at how well different rich text editors integrate with Angular. Angular rich text editor is a critical component that should mesh easily with framework.

This article explores how the top rich text editors integrate with the reliable Angular framework. The comparison looks at:

• Integration size and scope, in terms of packages to install
• Ease of integration, in terms of the extent of changes to make
• Speed of integration, and how long it took in our experiments. 

Angular integration testing process

The standard procedure followed for each rich text editor integration experiment, used: 

1. Angular commands to create an Angular project 
2. Then npm to install the dependencies as needed.

Dependencies were counted based on the number installed to the node_modules folder inside the Angular project, and the number specified in the integration docs for each text editor.

Speed and ease of installation was measured as the number of files and dependencies needed to manage before the project would load a demo, and the perceived difficulty in finding and modifying the files within the Angular project.

Angular rich text editor integration comparison results

Scroll down to the specific rich text editor to see more on the dependencies and installation steps. 

Comparison of rich text editor Angular integration

Froala-Angular Integration

Froala Dependencies:

npm install angular-froala-wysiwyg
npm install froala-editor

Adding in the rich text editor involved tinkering with JSON, understanding the role that the style and script arrays play, and the Froala references that need to be placed correctly within the arrays for the application to load with the Froala rich text editor.

Overall the difficulty in setting up was easier, as compared to other rich text editors. A skilled developer could handle this with ease, whereas beginners would find the placement of Froala references within the Angular configuration more difficult.

Slate-Angular integration

Slate Dependencies:

npm install slate
npm install slate-angular
npm install slate-history
npm install tiny-warning

There were several other dependencies listed in the third party, open source Angular integration for Slate.js: debug: ^4.1.1, direction: ^1.0.3, and is-hotkey: ^0.1.6.

The slate configuration is overall difficult. The third party integration is maintained slowly, with many files of the repository on GitHub untouched for more than 10 to 12 months. 

Adjusting the Angular components and installing the Slate packages for the Angular integration to work proved difficult with npm packages conflicting with each other during installation. Development experience with the TypeScript files that make up an Angular project was also needed to get the application to run, with TypeScript component files needed to be created and checked before the project will run.

The Slate.js integration project is unclear about what style sheet format to use (css or scss), which can become confusing to anyone who selected a different style sheet set when they set up their initial Angular project.

CKEditor 4- and CKEditor 5-Angular integration

CKEditor 4 dependencies:

npm install ckeditor4-angular
npm install ckeditor4-integrations-common

CKEditor 5 dependencies:

npm install @ckeditor
npm install ckeditor5

Many other CKEditor 5 packages are set up in the @types node_modules folder: ckeditor__ckeditor5-alignment, ckeditor__ckeditor5-autosave, ckeditor__ckeditor5-ckfinder and others, adding up to a total of 35.

The CKEditor 5 documentation is more careful about making assumptions of what node packages are already installed before configuring the project. 

For a CKEditor 5 integration with Angular, you need an understanding of TypeScript in order to correctly load the project. It requires an understanding of how typings.d.ts files operate inside Angular projects, which adds to the difficulty of the configuration, and the speed of integration.

Contrasted with CKEditor 4, the experience is much more straightforward. 

Loading the CKEditor 4 integration into the Angular apps.module.ts file does not require intense focus, and there are no further configurations to make. The documentation is mostly clear, as compared with the documentation of some other rich text editor projects.

Quill-Angular integration

Quill Dependencies:

npm install ngx-quill
npm install parchment
npm install quill@1.3.7
npm install @types/quil@1.3.7
npm install @angular/core
npm install @angular/common
npm install @angular/forms
npm install @angular/platform-browser
npm install rxjs

The difficulty of setting up the Quill integration (a third party, open source project) is moderate to high compared to other rich text editors. It requires the modification of several files, and does take some concentration to make sure all the details are correct for the third party integration to work. 

The community around the quill-ngx project is active, but it’s likely that the less than easy integration standards set so far won’t diminish with time. 

There are repeated issues appearing all the time (a common situation in some open source projects), where the problem of synching up dependencies is required for the project to work. This issue has appeared several times in the project's history. To solve the sync issue, the @types/quill@1.3.7 and quill npm packages must align in their version numbers, otherwise Angular produces build errors.

TinyMCE-Angular integration

TinyMCE Dependencies:

npm install --save @tinymce/tinymce-angular
npm install tinymce

The TinyMCE integration is straightforward and to the point. It only requires modifications to two files, and no TypeScript additions are needed, which is a contrast to several of the other rich text editor integrations.

The documentation is comprehensive and easy to understand and is the highest standard, as compared to the other documentation consulted in this comparison. 

The reason why TinyMCE is the easiest to integrate with Angular is that the npm installation commands are comprehensive, with additional arguments to control how the npm packages are installed.

It's also clearer (compared to the other rich text editor projects) in regards to the effect that each step of the procedure has on the project. It clearly specifies which component files to modify to integrate TinyMCE into the Angular project – contrasted with the other project documentation. Specifying the app.component files to change makes a large difference in saving time, and the ease of integration.

Example Angular integration with TinyMCE

The app.module.ts file modifications for TinyMCE: 

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { EditorModule } from "@tinymce/tinymce-angular";
import { AppComponent } from "./app.component";
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, EditorModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

And in addition, adding the TinyMCE rich text editor component to line 352 of the demo Angular HTML content in app.component.html:

  <div>
   <h1>TinyMCE 5 Angular Demo</h1>
   <editor
   apiKey="Your-api-key-belongs-here"
   [init]="{
     height: 500,
     menubar: false,
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table paste code help wordcount'
     ],
     toolbar:
       'undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat | help'
   }"
   >
  </editor>
  </div>

Produces the following:

Explore Angular integration further with TinyMCE

Overall, the easiest and fastest integrations with the Angular framework were:

• Froala, 
• CKEditor 4
• TinyMCE

Each of these integrations are developed internally, and not third party projects. TheTinyMCE documentation around the Angular component makes TinyMCE stand out as a reliable integration with Angular.

Explore further by checking on these guides: 

• Check on the complete  TinyMCE documentation for Angular.
• Avoid these common Angular problems - read through the troubleshooting guide.

You can also sign up for a FREE API key, and try out any of TinyMCE’s Premium Plugins for 14 days.