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

Angular component integrations for rich text editors: Under pressure

Joe Robinson

March 29th, 2022

Written by

Joe Robinson

Category

World of WYSIWYG

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. Because a rich text editor plays a vital role in every web application,  it follows that such a critical component must also mesh easily with a 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. 

 

Froala

Quill

CKEditor4

CKEditor5

TinyMCE

Slate.js

Dependencies (packages installed with npm install)

2

9

2

35

2

7

TypeScript and HTML changed

App.component files,

styles.less

App.component files, styles.scss

App.component files

App.component files

App.component files

App.component files, text-mark component, slate-editable component

Ease of Integration

Easier

Harder

Easier

Harder

Easier

Harder

Speed of Integration

Faster

Slower

Faster

Slower

Faster

Slower

Supported Integration Available

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:
Angular integration with TinyMCE

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: 

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

Editor ComparisonsIntegrationAngularUnder Pressure
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

  • World of WYSIWYG

    What is WYSIWYG?

    by Elise Bentley in World of WYSIWYG
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© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing