---
title: "Easily Integrate WProofreader with Angular Rich Text Editor"
published_at: "2024-11-12T10:01:58+00:00"
modified_at: "2026-04-07T05:35:48+00:00"
url: "https://www.syncfusion.com/blogs/post/wproofreader-with-rich-text-editor"
excerpt: "This blog explains how to integrate Syncfusion Angular Rich Text Editor with the WProofreader with code examples."
taxonomy_category:
  - "Angular"
  - "Development"
  - "Rich Text Editor"
  - "Syncfusion"
taxonomy_post_tag:
  - "Angular"
  - "rich text editor"
  - "Syncfusion"
  - "Web Development"
  - "What's New"
---

# Easily Integrate WProofreader with Angular Rich Text Editor

[Thangavel E](https://www.syncfusion.com/blogs/author/thangavele)

![Easily Integrate WProofreader with Angular Rich Text Editor](https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Easily-Integrate-WProofreader-with-Angular-Rich-Text-Editor.webp)


**TL;DR:** Learn to integrate WProofreader with Syncfusion Angular Rich Text Editor! This step-by-step guide ensures seamless setup, elevating text quality and user experience with advanced proofreading. Perfect for easy editing upgrades!

A [WProofreader](https://wproofreader.com/)
 is an essential tool for bloggers. It offers real-time detection and correction of spelling errors as users type. It enhances the overall quality and professionalism of content, ensuring a positive user experience. With features like multilingual support, customization options, and integration with content management systems, web spellcheckers streamline the editing process, contributing to error-free and polished blog posts.

Therefore, in this blog, we’ll explore how to easily integrate the WProofreader with Syncfusion [Angular Rich Text Editor](https://www.syncfusion.com/angular-components/angular-wysiwyg-rich-text-editor)
 to improve the quality of your content.

## Step 1: Set up the Angular Rich Text Editor

First, refer to the [getting started with Angular Rich Text Editor](https://ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started/)
 documentation. This will help you set up the Angular environment and add the Angular Rich Text Editor component to your app.

## Step 2: Set up the WProofreader

To integrate the WProofreader, we should install the [@webspellchecker/wproofreader-sdk-js](https://www.npmjs.com/package/@webspellchecker/wproofreader-sdk-js)
 package using NPM or Yarn.

```
npm install @webspellchecker/wproofreader-sdk-js
```

Or

```
yarn add @webspellchecker/wproofreader-sdk-js
```

## Step 3: Configure WProofreader for Angular Rich Text Editor

Now, you can import the **WProofreader** module into your Angular app. Then, integrate it with the Angular Rich Text Editor by configuring the ** container** property of ** WProofreader** as the editable element of the Rich Text Editor’s ** inputElement.**

You can obtain this through the **@ViewChild** instance of the Angular Rich Text Editor.

The **lang** property specifies the language of the text to be checked. You can change it to your preferred language. In the ** serviceId** property, configure the activation key.

Refer to the following code example to integrate WProofreader with the Syncfusion Angular Rich Text Editor.

```
import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { RichTextEditorAllModule, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
//@ts-ignore
import WProofreader from '@webspellchecker/wproofreader-sdk-js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RichTextEditorAllModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent implements AfterViewInit  {
  @ViewChild("spellEditor") 
  public spellEditor!:RichTextEditorComponent;
  title = 'WebSpellChecker-RichTextEditor';
  ngAfterViewInit(): void {
    WProofreader.init({
      container: this.spellEditor.inputElement,
      lang: 'en_US',
      serviceId:"tQYWpiIqVsyXwDO"
    });
  }
}
```

Refer to the following image.

![Integrating WProofreader with Syncfusion Angular Rich Text Editor](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Integrating-WProofreader-with-Syncfusion-Angular-Rich-Text-Editor.gif)

Integrating WProofreader with Syncfusion Angular Rich Text Editor

## GitHub reference

For more details, refer to our [GitHub demo](https://github.com/thangavele/angular-richtexteditor-integrate-webspellchecker)
.


## Conclusion

Thanks for reading! I hope you now have a clear idea of how to integrate the WProofreader with Syncfusion [Angular Rich Text Editor](https://www.syncfusion.com/angular-ui-components/angular-wysiwyg-rich-text-editor)
. We look forward to you trying this integration and hope you provide feedback in the comments section below.

If you are new to Syncfusion, try our control features by downloading a [free trial](https://www.syncfusion.com/downloads)
.

If you have any questions, contact us through our [support forums](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback/)
. We are always happy to assist you!

## Related Blogs



[Easily Automate Flowchart Creation in Angular Diagram](https://www.syncfusion.com/blogs/post/flowchart-creation-in-angular-diagram)



[How to resolve CORS errors by using Angular Proxy?](https://www.syncfusion.com/blogs/post/resolve-cors-errors-angular-proxy)



[Mastering Angular Query Builder: CEL and SpEL Integration](https://www.syncfusion.com/blogs/post/cel-and-spel-in-angular-query-builder)



[How to Easily Build Dynamic Web Apps with Angular](https://www.syncfusion.com/blogs/post/build-dynamic-web-apps-with-angular)