Angular 2 contenteditable

Question

In Angular 2 how can I make two way data binding with a contenteditable div?

    
Text Field         


        
                      

              相关标签:
       
      

Answer 1

Angular doesn't have a built-in ControlValueAccessor for contenteditable case. I've written a tiny little library that properly implements it for Angular 4 and above, and it also works with Internet Explorer 11 using MutationObserver fallback:

https://www.npmjs.com/package/@tinkoff/angular-contenteditable-accessor

Here's the code that ControlValueAccessor has to have:

registerOnChange(onChange: (value: string) => void) {
  ...
}

registerOnTouched(onTouched: () => void) {
  ...
}

setDisabledState(disabled: boolean) {
  ...
}

writeValue(value: string | null) {
  ...
}

Keep in mind that you should also watch out for dangerous pasted content so it would be wise to sanitize it in (drop)/(paste) events