How To integrate Rich Text Editor In SharePoint Framework (SPFx) Angular Webparts

SharePoint's Rich Tech Editor is one of the finest editors that comes under the column type “Multiple lines of Text” when you enable the “Enhanced rich text” option in Settings. In this article, we will be discussing how to integrate such a great feature in SharePoint Framework applications that are integrated with Angular.

How to build SharePoint Framework Applications

The following blog posts will help you, for sure, in detail about building SPFx applications.

What tools can be used to integrate Rich Text Editor in SPFx?

We are going to use ngx-quill, an NPM package, as an editor since it is so lightweight like SPFx.

Make sure to use the appropriate version of the ngx-quill based on the Angular version you use.

angular v4 - ngx-quill <=1.6.0
angular v5 - ngx-quill > 1.6.0
angular v6 - ngx-quill >= 3.0.0

Add the package in your package.json as below. I’m using Angular v4 so I’m targeting ngx-quill version 1.6.0

"ngx-quill": "1.6.0"

To install the specific version of the ngx-quill package, use the below code in your node.js command prompt. Make sure you are pointing to the Project directory in the node.js command prompt and execute the below command,

npm install [email protected]

Integrating ngx-quill in SPFx with Angular 4

It’s not so tricky to integrate ngx-quill editor in Angular v4 with the below steps.

Go to your app.module.ts file and import the ngx-quill module like below.

import { QuillModule } from 'ngx-quill'

Make sure to import QuillModule in @NgModule decorator’s import section as below.

imports: […, // your other modules
QuillModule ]

Declare a string variable to store the value from editor control in your component.ts file.

private DescriptionHF: string = "";

Now, go to your component's HTML file and use the below selector to add a default quill editor.

<quill-editor [(ngModel)]="DescriptionHF"></quill-editor>

So, values that are typed using the quill editor will be saved in the variable DescriptionHF now.

Adding Quill CSS in SPFx webpart

The job is not done yet! If you run the program now, you will see a clumsy view of the editor since the CSS files are not yet referred. Please refer the below CSS files from Quill CDN into your main webpart.ts using SPComponentLoader.

Import the SPComponentLoader package into your webpart.ts file like below.

import { SPComponentLoader } from '@microsoft/sp-loader';

Load the CSS dependency for ngx-quill editor in onInit() method as below code snippet.

protected onInit(): Promise<void> {
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.5/quill.core.css');
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.5/quill.snow.css');
}

Don’t be confused that ngx-quill npm package version and the CSS versions are different. They are because both versions are different and versioning is maintained separately for each component.

We are done now. If you run gulp serve, now your page will have Rich Text Editor controls enabled.

Please refer to the documentation to know more about options and tools available in the ngx-quill editor control for Angular.

How do we display the value of Editor control in a page

Angular bindings give us enough options to do that as well, with default innerHTML property of the HTML elements as below,

<p [innerHTML]="DescriptionHF"></p>

Summary

In here, we have discussed integrating Rich Text Editor control in SharePoint Framework webparts. Look for my next article about creating custom image handler to upload images to a custom location in the ngx-quill editor in Angular 4.

If you have any questions/issues about this article, please let me know in the comments.