Angular integration

A rich text editor for Angular

yjd has no framework baked in — wrap it in a standalone component with two-way [(value)] binding and an ngOnDestroy cleanup. Works with Angular 14+ (standalone) and any earlier version via an NgModule. Tree-shakeable, ~17 KB. On AngularJS 1.x? See the AngularJS guide.

Docs Playground Other frameworks

01 — Install

Add the package

One dependency, no peer requirements. Import the stylesheet once — in angular.json styles[], or a global styles.css.

terminal

npm i @oix1987/yjd
# then add "node_modules/@oix1987/yjd/lib/styles.min.css" to angular.json > styles

02 — The component

A standalone component

Create the editor in ngAfterViewInit (the host element exists by then), emit valueChange for two-way [(value)], sync on ngOnChanges only when the value differs, and destroy() in ngOnDestroy.

yjd-editor.component.ts

import {
  Component, ElementRef, ViewChild, Input, Output, EventEmitter,
  AfterViewInit, OnChanges, OnDestroy,
} from '@angular/core';
import yjd from '@oix1987/yjd';

@Component({
  selector: 'yjd-editor',
  standalone: true,
  template: '<div #host></div>',
})
export class YjdEditorComponent implements AfterViewInit, OnChanges, OnDestroy {
  @ViewChild('host', { static: true }) host!: ElementRef<HTMLElement>;
  @Input() value = '';
  @Output() valueChange = new EventEmitter<string>();
  @Input() placeholder?: string;
  private ed: any;

  ngAfterViewInit() {
    this.ed = new yjd(this.host.nativeElement, {
      content: this.value ?? '',
      placeholder: this.placeholder,
      onChange: (html: string) => this.valueChange.emit(html),
    });
  }
  ngOnChanges() {
    if (this.ed && this.value != null && this.value !== this.ed.getContent())
      this.ed.setContent(this.value);
  }
  ngOnDestroy() { this.ed?.destroy(); }
}

03 — Use it

app.component.html

<yjd-editor [(value)]="html" placeholder="Write…"></yjd-editor>

Live

The editor itself

A real yjd instance (the same one the component mounts). Type in it. Angular needs a build step, so there's no single-file runnable demo — drop the component above into your app.

yjd-editor.component — live

Notes

Standalone or NgModule

Shown standalone (Angular 14+). Pre-14, drop standalone: true and declare it in a module.

ControlValueAccessor

For reactive/template forms, implement ControlValueAccessor to support formControlName — same create/destroy/setContent logic.

~17 KB, tree-shakeable

No lock-in

Same core in React, Vue and vanilla.

💡 SSR (Angular Universal): the editor touches the DOM. Guard with isPlatformBrowser(this.platformId) before creating it in ngAfterViewInit.

AngularJS 1.x instead? · React · Vue · Playground · Docs