Third-Party Integration in Angular Rich Text Editor

The Rich Text Editor can be integrated with third-party libraries to suit specific application scenarios.

To get started quickly with third-party integrations for the Angular Rich Text Editor, refer to the video below.

Code Mirror integration

RichTextEditor comes with a basic HTML source editor through the view-source property. CodeMirror plugin can be used to highlight the syntax of HTML. CodeMirror plugin for Rich Text Editor makes editing of HTML source code with a pleasant experience.

Add the CodeMirror scripts and stylesheet to your src/index.html file.

Required JavaScript files:

 <script src="scripts/CodeMirror/codemirror.js" type="text/javascript"></script>
 <script src="scripts/CodeMirror/javascript.js" type="text/javascript"></script>
 <script src="scripts/CodeMirror/css.js" type="text/javascript"></script>
 <script src="scripts/CodeMirror/htmlmixed.js" type="text/javascript"></script>

Required CSS file:

 <link href="scripts/CodeMirror/codemirror.min.css" rel="stylesheet" />

Add a custom icon for the HTML source editor in the Rich Text Editor toolbar using the template option of ToolbarSettings. Define the CodeMirror plugins and pass the Rich Text Editor content as an argument in the actionComplete event.

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { Component, ViewChild } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorComponent,CountService} from '@syncfusion/ej2-angular-richtexteditor';
import { createElement, addClass, removeClass, Browser } from '@syncfusion/ej2-base';
import * as CodeMirror from 'codemirror';

@Component({
    imports: [  
        RichTextEditorAllModule,
        DialogModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor #toolsRTE id='alltoolRTE' [value]="value" [toolbarSettings]='tools' [showCharCount]='true' (actionComplete)='actionCompleteHandler($event)' [maxLength]='maxLength'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, CountService]
})

export class AppComponent  {
    @ViewChild('toolsRTE') public rteObj?: RichTextEditorComponent;
    public tools: object = {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
        'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
        'LowerCase', 'UpperCase', '|',
        'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
        'Outdent', 'Indent', '|',
        'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
        'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
    };
    public value = `<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul>
        <li>
            <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p>
        </li>
        <li>
            <p>Bulleted and numbered lists.</p>
        </li>
        <li>
            <p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p>
        </li>
        <li>
            <p>Contains undo/redo manager. </p>
        </li>
        </ul><div style="display: inline-block; width: 60%; vertical-align: top; cursor: auto;"><img alt="Sky with sun" src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png" width="309" style="min-width: 10px; min-height: 10px; width: 309px; height: 174px;" class="e-rte-image e-imginline e-rte-drag-image" height="174" /></div>  `;

    public maxLength: number = 1000;
    public textArea?: HTMLElement;
    public myCodeMirror?: any;
    ngAfterViewInit(): void {
        let rteObj: RichTextEditorComponent = this.rteObj as any;
        setTimeout(() => { this.textArea = (rteObj.contentModule as any).getEditPanel() as HTMLElement; }, 600);
    }
    public mirrorConversion(e?: any): void {
        let id: string = this.rteObj!.getID() + 'mirror-view';
        let mirrorView: HTMLElement = this.rteObj!.element.querySelector('#' + id) as HTMLElement;
        let charCount: HTMLElement = this.rteObj!.element.querySelector('.e-rte-character-count') as HTMLElement;
        if (e.targetItem === 'Preview') {
            this.textArea!.style.display = 'block';
            mirrorView.style.display = 'none';
            this.textArea!.innerHTML = this.myCodeMirror.getValue();
            charCount.style.display = 'block';
        } else {
            if (!mirrorView) {
                mirrorView = createElement('div', { className: 'e-content' });
                mirrorView.id = id;
                this.textArea!.parentNode!.appendChild(mirrorView);
            } else {
                mirrorView.innerHTML = '';
            }
            this.textArea!.style.display = 'none';
            mirrorView.style.display = 'block';
            this.renderCodeMirror(mirrorView, this.rteObj!.value);
            charCount.style.display = 'none';
        }
    }

    public renderCodeMirror(mirrorView: HTMLElement, content: string): void {
    this.myCodeMirror = CodeMirror(mirrorView, {
        value: content,
        lineNumbers: true,
        mode: 'text/html',
        lineWrapping: true,
    });
    }
    public actionCompleteHandler(e: any): void {
        if (e.targetItem && (e.targetItem === 'SourceCode' || e.targetItem === 'Preview')) {
            this.mirrorConversion(e);
        } else {
            setTimeout(() => { this.rteObj!.toolbarModule.refreshToolbarOverflow(); }, 400);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Embedly integration

This can be achieved by binding the actionComplete event to the toolbar items in the toolbarSettings property. In the event handler, create an element and add the appropriate class. The below script is have to add in the sample to embed the content,

Include embedly javascript.

<script src="https://cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor'
import { Component, ViewChild } from '@angular/core';
import { ToolbarService, LinkService, HtmlEditorService, QuickToolbarService, PasteCleanupService, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
  imports: [
    RichTextEditorModule
  ],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor id='defaultRTE' #sample [toolbarSettings]='toolbarSettings' [value]="value"  (actionComplete)='actionComplete($event)'></ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, QuickToolbarService, PasteCleanupService, HtmlEditorService]
})

export class AppComponent {
  @ViewChild('sample') public rteObj?: RichTextEditorComponent;
  public toolbarSettings: Object = {
    items: ['createLink']

  };
  public actionComplete(args: any): void {
    if (<String>args.requestType === 'Links') {
      if (args.elements[0].parentNode && (<Element>args.elements[0].parentNode).tagName === 'A') {
        const emberEle: HTMLElement = document.createElement('blockquote');
        emberEle.setAttribute('class', 'embedly-card');
        emberEle.appendChild(args.elements[0].parentElement);
        emberEle.appendChild(document.createElement('p'));
        args.range.insertNode(emberEle);
      }
    }
  }

  public value: string = `<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul>
      <li>
          <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p>
      </li>
      <li>
          <p>Bulleted and numbered lists.</p>
      </li>
      <li>
          <p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p>
      </li>
      <li>
          <p>Contains undo/redo manager. </p>
      </li>
    </ul><div style="display: inline-block; width: 60%; vertical-align: top; cursor: auto;"><img alt="Sky with sun" src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png" width="309" style="min-width: 10px; min-height: 10px; width: 309px; height: 174px;" class="e-rte-image e-imginline e-rte-drag-image" height="174" /></div>  `;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also