What is this library?

This is micro Angular v4+ contenteditable directive for integration with Angular forms. It just implements ControlValueAccessor for this purpose.

Install

npm install @ng-stack/contenteditable --save

Usage

Import and add NgsContenteditableModule to your project:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgsContenteditableModule } from '@ng-stack/contenteditable';

// ...

@NgModule({
  // ...
  imports: [
    // Import this module to get available work angular with `contenteditable`
    NgsContenteditableModule,
    // Import one or both of this modules
    FormsModule,
    ReactiveFormsModule
  ]

// ...

})

And then you can to use it in template-driven forms or reactive forms like this:

// In your component
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

export class MyComponent implements OnInit {
  templateDrivenForm = 'This is contenteditable text for template-driven form';
  myControl = new FormControl();

  ngOnInit() {
    this.myControl.setValue(`This is contenteditable text for reactive form`);
  }
}

<form #testForm="ngForm">
  <p
    editable="true"
    name="myFormName"
    [(ngModel)]="templateDrivenForm"
    ></p>
</form>

<pre>
  {{ testForm.value | json }}
</pre>

<hr>

<p editable="true" [formControl]="myControl"></p>

<pre>
  {{ myControl.value | json }}
</pre>

Options

propValueAccessor

With editable directive you can pass optional @Input value for propValueAccessor:

<p
  editable="true"
  propValueAccessor="innerHTML"
  [formControl]="myControl"
  ></p>

Internally, ContenteditableDirective uses this value as follows:

this.elementRef.nativeElement[this.propValueAccessor]

By default it using textContent.

editable as @Input property

Since version 2.0.0, @ng-stack/contenteditable accepts editable as @Input property (note the square brackets):

<p [editable]="isContenteditable"></p>

where isContenteditable is a boolean variable.

unformattedPaste

Since version 1.1.0, @ng-stack/contenteditable takes into account experimental unformattedPaste attribute:

<p
  editable="true"
  unformattedPaste
  [formControl]="myControl"
  ></p>

This allow copy formated text (from anywhere) and paste unformated text into HTML element with contenteditable attribute.

unformattedPaste attribute is experimental because here is used obsolete document.execCommand() method to write unformated text. So far no good alternative for this method has been found.

2.0.0 (2022-02-17)

Breaking Changes

• Changed module name to NgsContenteditableModule.

2.0.0-beta.2 (2022-02-14)

Breaking Changes

• Changed selector to editable.
• The lib builded with Ivy Renderer.

1.1.1 (2020-10-15)

Fix

• Refactoring of the method to support the unformattedPaste attribute.

1.1.0 (2020-08-22)

Features

• Added experimental [unformattedPaste] attribute that allow copy formated text (from anywhere) and paste unformated text into HTML element with contenteditable="true" attribute.

1.0.2 (2019-05-04)

Fix

• directive selector: Specified selector for directive:

  before:

  @Directive({
    selector: '[contenteditable]',
    //...
  })

  now:

  @Directive({
    selector: '[contenteditable][formControlName],[contenteditable][formControl],[contenteditable][ngModel]',
    //...
  })

1.0.0 (2019-02-06)

Features

• npm pack: @ng-stack/contenteditable use Angular-CLI v7 git mono repository and build npm pack with it.
• testing: Added Unit tests.
• contenteditable: Since version 1.0.0, @ng-stack/contenteditable accepts contenteditable as @Input property. (#12)