Angular contenteditable directive for Angular forms and Material Design

What is this library

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

$3

It implements MatFormFieldControl to support Angular Material

$3

I found some useful CSS that can be used with this lib

``css
/ mat-editor should be applied to the container of contenteditable ()/
.mat-editor .mat-form-field-wrapper,
.mat-editor .mat-form-field-infix {
padding-top: 0;
padding-bottom: 0;
}

.mat-editor .mat-form-field-flex {
align-items: center;
}

/ https://github.com/angular/material2/issues/13322 /
.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,
.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button {
display: inline-block !important;
}
`

$3

There are 2 directives that can be used with CKEditor5.

matCkeditor simply implements MatFormFieldControl

`html

`

matCkeditorBalloon should be used with @ckeditor/ckeditor5-build-balloon and has an extra input to toggle toolbar of ckeditor.

!Screenshot

`html

[editor]="ckEditor" (ready)="editorReady($event)" [config]="editorConfig"
[(ngModel)]="content">

color="{{toolbarStatus && 'primary'}}" (click)="toolbarStatus = !toolbarStatus">
tune


`

To remove the border of CKEditor

`css
.mat-editor .ck-content {
border: none !important;
box-shadow: none !important;
}
`

To adjust form-field height

`html



`bash
npm install mat-contenteditable --save
`

Usage

Import and add MatContenteditableModule to your project:

`ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatContenteditableModule } from 'mat-contenteditable';

// ...

@NgModule({
// ...
imports: [
// Import this module to get available work angular with contenteditable
MatContenteditableModule,
// 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:

`ts
// 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);
}
}
`

`html


  {{ testForm.value | json }}

  {{ myControl.value | json }}

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

`html
contenteditable="true"
propValueAccessor="textContent"
[formControl]="myControl"
>

In ContenteditableDirective this value use like this:

`ts
this.elementRef.nativeElement[this.propValueAccessor]
`

By default it using innerHTML`.