Vue: v-model directive on <div contenteditable>

Created on 2 Nov 2015  路  3Comments  路  Source: vuejs/vue

v-model directive can only be used on textarea o or input elements for now.
It would be nice to use it on 'contenteditable' !

Best regards,
Benjamin

Most helpful comment

Content editable involves a lot more complexity than input bindings, and it's best to use an external library dedicated to this purpose (e.g. Medium.js), wrapped by a custom directive.

All 3 comments

Content editable involves a lot more complexity than input bindings, and it's best to use an external library dedicated to this purpose (e.g. Medium.js), wrapped by a custom directive.

*sorry @yyx990803 I saw that you close this issue.

Hello @bdedardel
I work with summernote today and found your question.

My solution is you can use summernote's onChange callbacks like so :
let 'program' as my vue instance
and 'detail' as my model in 'program'.

          $('#summernote').summernote({
              onChange: function(contents, $editable) {
                // console.log($editable);
                program.detail = $editable;
              }
            })

I do not know if this is a good way to solve your problem
*most probably you have already got it

@abdulahkam Thanks for your post. I will try this solution, even if summernote does not respond exactly to my needs!

Was this page helpful?
0 / 5 - 0 ratings