A WYSIWYG Editor Angular Developers Can Use to Make Coding Easy

A WYSIWYG Editor Angular Developers Can Use to Make Coding Easy

We live in a time where developers need to rapidly yet carefully build and deploy applications or websites. To get ahead of the competition and accomplish goals, they must find ways to save as much time as possible. At the same time, they must deliver a high quality product or service as well. Angular is a framework that makes SPA (Single-Page Application) development easier. Similarly, a WYSIWYG editor is another useful and powerful tool for smoothing up development and enhancing user experience. In this article, we’ll talk about using a WYSIWYG editor Angular apps can integrate with to simplify development. 

Before we proceed, let’s review what a WYSIWYG, or “what you see is what you get” editor is. Chances are, you’ve probably already used one already because of how widespread they are. A WYSIWYG editor is a type of HTML editor. It allows users to interact with an interface to change a website or app’s contents without having to code. These changes range from writing rich text (think Google Docs) to uploading images or even building pages. Therefore, these editors are highly versatile and can be integrated into various apps. These include CMS (Content Management Systems) like WordPress, word processing software, blogs, social media sites, and more. 

To see how WYSIWYG editors can have a positive effect on the development process, we’ll first look at the steps in creating an Angular project. After that, we’ll add an Angular rich text editor module. Finally, we’ll look at some WYSIWYG editors in the market and compare them with the Angular rich text editor module. 

Requirements

To make a basic rich text editor within an Angular application, you would only need the following tech stack: 

• Angular (4+): Angular is a TypeScript-based development platform that focuses on building scalable, fast, and modern applications with fluid navigation and routing. It is component-based and includes different libraries that can be integrated for various requirements. 
• TypeScript (2.6+): Put simply, TypeScript is an object-oriented programming language that’s a superset of JavaScript. It’s like JavaScript, but with optional types. 

Let’s now move towards installing Angular and creating an application for our simple rich text editor. 

Setting up the Angular project

An Angular project setup is pretty straightforward. Using a command window, enter the following line: 

npm install -g @angular/cli

Doing so will install the AngularCLI, which is used for creating, testing, and deploying projects, among other things. 

Creating the workspace

To create the application, run the following command: 

ng new rich-text-app

The ng new command creates a new Angular workspace, which is also the name of the initial project. In this case, our project is named “rich-text-app”. Note that by default, the CLI creates a CSS-based application. To create one that’s SCSS-based, add “–style=SCSS” (without the quotations) at the end of the line. Next, we’ll be including a basic rich text editor package that’s necessary to implement an Angular WYSIWYG Editor. 

A rich text editor package for Angular

To build an Angular app with a simple rich text editor component, we can use the Syncfusion rich text editor package. 

Syncfusion rich text editor package

Syncfusion for Angular currently has two types of package structures, which are shown in the subsections that follow. 

Ivy library distribution package

This package format includes the Syncfusion Angular packages that support Angular’s standard Ivy rendering engine (read more here). The following command installs the Syncfusion’s Ivy package: 

npm install @syncfusion/ej2-angular-richtexteditor --save

Angular compatibility compiled package

On the other hand, the Angular compatibility compiled package is the legacy package for Syncfusion components. This is for those who are using earlier versions of Angular. To install this package, enter the following command: 

npm install @syncfusion/ej2-angular-richtexteditor@ngcc --save

After installing the Angular rich text editor package of your choice, you can start loading its modules within your application. 

Including rich text editor module

To import Syncfusion’s RichTextEditorModule, follow the snippet below: 

// import other modules (NgModule, AppRoutingModule, …), then add:
import{RichTextEditorModule} from ‘@syncfusion/ej2-angular-richtexteditor’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RichTextEditorModule
],
providers: [],
bootstrap: [AppComponent]
})

Afterwards, you can add the rich text editor component by declaring a component with the following template: 

// …
@Component({
selector: ‘app-root’,
template: ‘<ejs-richtexteditor id=’myRichTextEditor’>
<ng-template #valueTemplate>
<!--Write your default rich text editor contents here-->
</ng-template>
</ejs-richtexteditor>’,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
// …

The providers property corresponds to the editor features you want to include. In this case, users can interact with the editor and toolbar to perform basic editing and handle links and images. 

Other features require additional module injections. Here are the modules you can add into your application to extend Syncfusion’s capabilities: 

• Toolbar
• Link
• Image
• Resize
• Table
• HtmlEditor
• MarkdownEditor
• Count (character count)
• QuickToolbar
• FileManager (file browsing)
• PasteCleanup

Finally, let’s run it

After loading the rich text editor module, you can run the application with the ng-serve command. The command window will then direct you to a browser showing your application. You should be able to see an output, specifically a rich text editor containing the default content within the <ng-template> tags. For example, the image below shows a demo from Syncfusion’s rich text editor documentation page: 

As you can see, it’s a decent enough rich text editor for Angular. It has the basic features your users will need, and it looks acceptable in terms of design. However, I’m sure you’ve noticed how numerous the number of steps are in implementing a basic editor. But what if I told you that there’s a better and faster way to implement a modern, feature-rich editor? Let’s see what that is in the next section. 

Using a third-party Angular WYSIWYG Editor

Instead of using the basic Angular rich text editor component, you can opt to choose a ready-made WYSIWYG editor. Doing so will give you a lot of advantages, which may include (depending on the editor):

• All rich text editing features, both basic and advanced
• A modern design and intuitive interface
• Superior image handling
• Real-time collaboration, mentions, and version history
• Math capabilities
• Autosaving
• Different editing modes (standard, inline, document)
• Support for other languages
• Accessibility
• Little to no maintenance needed
• Plenty of documentation and a reliable customer support (if any)
• SEO-ready

Implementing all or even some of these features would be tough, even when using an Angular rich text editor component. By choosing a third-party editor, you’ll cut down plenty of time, allowing you to integrate it in minutes or seconds. And in agile environments, that translates to more time focusing on your core features. 

So, in most cases, using a third-party WYSIWYG editor would be more beneficial (unless you have the time and resources). But now you’re left with one problem–there are plenty of them, and you need to choose just one. Well, don’t worry too much. Continue reading to see the most popular WYSIWYG editors in the market. All of them are great, but surely there would be one that’s better suited for your use case. 

Froala

The first on our list is a powerful, lightweight, and sleek WYSIWYG editor for every purpose. Used by big companies like Amazon and Apple as well as startups and freelancers, Froala has about everything. And yet, it weighs like nothing, with an initialization speed of less than 40ms and a small size. Froala puts user experience at the top with its elegant, intuitive, and organized design, despite its numerous (100+) features. Froala can also be easily integrated into Angular apps (among other frameworks), making it a good choice for developers. 

Although it is a premium editor, Froala is actually one of the most affordable editors in the market. Firstly, it doesn’t charge you extra according to the monthly number of users or editor loads/usage. It also doesn’t keep a few great features behind a paywall, as all features are available across all plans. Lastly, Froala just has a lower base price compared to other premium editors, along with discounts for new businesses. 

CKEditor

Up next is CKEditor, another popular, customizable, and versatile WYSIWYG editor. It has powerful core features and some additional paid features. These features allow it to be used in plenty of different apps. It also has a nice modern design, especially when it comes to real-time collaboration. CKEditor is used by big and small businesses alike, including Volvo, Disney, and various others. 

When it comes to pricing, there are different options. You can get it for free as it is open-source, but that would mean fewer features and benefits. Its paid prices are slightly higher than other premium editors’, with each tier having more benefits than the previous one. However, one downside CKEditor has is that it segregates some seemingly important features as premium ones. These include its importing from Word, exporting to PDF and Word, spelling and grammar checking, pagination, math equations, and even its elaborate real-time collaboration. 

AngularEditor

AngularEditor is a simple WYSIWYG editor for simpler use cases. Its interface is hardly modern or sleek, looking like a mid-2000s editor. Still, it’s quite robust, and it’s easier to implement than an Angular rich text editor component. The best part is that it’s completely free, being downloadable from npm. At this article’s time of writing, it has about 37k+ downloads per week. 

AngularEditor is also well-maintained. It even has a demo you can play with. Sadly but as expected, its documentation is not as complete as paid editors’ documentation, being open-source. For those who prefer having complete editing features and beautiful interfaces for big apps such as social media platforms, this editor might not be for you. But the good news is that it’s great for those who are just starting out and need a capable and easy WYSIWYG editor for free. 

Quill.js

Quill is one of the most popular and feature-rich open-source editors available. It has a modular architecture, much like the other premium editors. This means that developers would only need to call plugins to include the features they want. It’s also cross-platform. Slack, Lever, and Slab are some of the known companies that use and trust Quill. It also has a sufficiently modern look to it despite being free. 

Trumbowyg

Trumbowyg is like a breath of fresh air in open-source editors. It’s very rich in features for a free WYSIWYG editor. Not only that, but it also has a simple yet modern interface. Trumbowyg is also one of the fastest and most lightweight editors available and is customizable at the same time. It currently supports over 40 languages, which is great for a free editor. Surprisingly, it also has a detailed, well-written documentation. One disadvantage that Trumbowyg has, however, is that it might not be as mature or popular as others. This could translate to more bugs, difficulty in resolving issues. 

TinyMCE

This WYSIWYG editor is another very popular one. It’s a developer-oriented editor that promises control. It boasts more than 60 features, making it one of the most feature-rich editors in the market. It also comes with a sleek, modern, although sometimes overcrowded, interface. Thankfully, its customizability lets developers change its toolbar layout to be more intuitive. Like a few of these editors, it’s used by big and small companies (Atlassian and Shopify, to name a few). 

Being one of the most popular editors, it unfortunately bears a high price. And unless you opt for the Flexible plan, you’ll have editor load limitations per month. Another factor you should consider is whether you’re willing to pay more for premium features. While it includes most features in its paid plans, its Mentions and Comments features are only available on the Flexible plan. Nevertheless, it offers a free, open-source plan. TinyMCE is powerful, but it would be better-suited to those who have a bigger budget for rich text editing. 

Conclusion

In this article, we looked at rich text editing in Angular through the Syncfusion component. Implementing a basic rich text editor using the component is easier than making your own, but it still involves some steps. We also looked at candidates for a WYSIWYG editor Angular developers can use. 

All WYSIWYG editors I’ve shown you save a great deal of time and make coding easier for developers. They also make editing easier and better for users. So, to choose the right editor for your Angular projects, you would have to assess your requirements. Choosing an editor with plenty of features is always safer and more future-ready. Affordability is also a huge factor when picking the right editor. In the end, the choice is all yours.