How to prevent contenteditable input event and set model value instead in vue?

问题

I want to create simple wysiwyg editor with vue on contenteditable div. I want to store editor content into json object. I want to use state/model concept. I will do something like this within editor template:

<div contenteditable>
    <component v-for="item in json" :is="item.blockTypeComponent" />
</div>

and I will use simple-wysiwyg component with v-model somewhere on my edit page:

<simple-wysiwyg v-model="someVarAsJson" />

It looks like I need store editor input data to model/state before and automatically update content within contenteditable which means I need intercept input events of contenteditable. As I have understood from presentation of draft-js, prosemirror and article of medium site wysiwyg developer (here is a link __https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480 ), they use the same concept as I have described above. There is tiptap editor on vue based on prosemirror but I didn't understand yet how it works.

Is it possible to do what I want?

来源：https://stackoverflow.com/questions/60355574/how-to-prevent-contenteditable-input-event-and-set-model-value-instead-in-vue