Angular contenteditable directive for Angular forms and Material Design
npm install mat-contenteditableThis is micro Angular v6+ contenteditable directive for compatibility with Angular forms.
It just implements ControlValueAccessor for this purpose.
It implements MatFormFieldControl to support Angular Material
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;
}
`
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.
`html`
[(ngModel)]="content">
color="{{toolbarStatus && 'primary'}}" (click)="toolbarStatus = !toolbarStatus">
To remove the border of CKEditor
`css`
.mat-editor .ck-content {
border: none !important;
box-shadow: none !important;
}
To adjust form-field height
`html`
You can just copy and paste this directive or install it from npm:
`bash`
npm install mat-contenteditable --save
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 }}
Options
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`.