v-model isn't compatible with contentdeditable divs - this directive fills in

Downloads in past


1521.2.05 years ago6 years agoMinified + gzip package size for vue-contenteditable-directive in KB


Vue's built in v-model isn't compatible with contenteditable divs - this directive fills in.

Why use contenteditable divs?

First of all - if you can use a textarea or input with v-model, do that instead. There are a couple of quirks, though, in the implementation of textarea that make contenteditable divs a good fit for certain applications.
  • Editable divs shrink and grow with the text inside of them. Textarea does not.
  • Formatting is generally more extensible in a contenteditable div


``` import contenteditableDirective from 'vue-contenteditable-directive' //... Vue.use(contenteditableDirective) ``` ```
``` The directive uses innerText to manipulate the DOM by default. However, you can use the modifier, dangerousHTML, to allow the directive to use and set the innerHTML of the editable element: ``` v-contenteditable:someDataKey.dangerousHTML="true" ``` Be sure to protect your app against XSS!