SharePoint Rich Tech Editor is one of the finest editor which comes under the column type Multiple lines of Text when you enable 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 is integrated with Angular.

How to build SharePoint Framework Applications?

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

Build SPFx webparts with Angular 4

Deep Dive into SPFx webparts configuration

Build SPFx extensions

Integrating SPFx apps with visual Studio

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

We are going to use ngx-quill, a 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,

Leaderboard_CDR

1. angular v4 – ngx-quill <=1.6.0
2. angular v5 – ngx-quill > 1.6.0
3. angular v6 – ngx-quill >= 3.0.0

 Add the package in your package.json as below, I’m using Angular 4 so I am 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 snippet format 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 ngx-quill@1.6.0

Integrating ngx-quill in SPFx with Angular 4

It’s not so tricky to integrate ngx-quill editor in angular 4, 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 decorators 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 as below,

private DescriptionHF: string = “”;

Now, go to your component html file add 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

Job not yet done, if you run now you will see a clumsy view of the editor since the CSS files are not yet referred. Please refer the below css 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 dependency css versions are different. Because both versions are different and versioning is maintained separately for each component.

We are done, if you run gulp serve, now your page will look like below with the Rich Text editor control.

Rich Text editor control.

Please refer 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>

We have discussed about 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 comments.