javascript - 如何防止 contenteditable 输入事件并在 vue 中设置模型值？

Question

我想在 contenteditable div 上使用 vue 创建简单的所见即所得编辑器。我想将编辑器内容存储到 json 对象中。我想使用状态/模型概念。我将在编辑器模板中做这样的事情：

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

我将在编辑页面的某处使用带有 v-model 的 simple-wysiwyg 组件：

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

看起来我需要将编辑器输入数据存储到模型/状态之前并自动更新 contenteditable 中的内容，这意味着我需要拦截 contenteditable 的输入事件。正如我从 Draft-js、prosemirror 和中型站点所见即所得开发人员的文章中了解到的那样（这里有一个链接 __https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480 ），他们使用与我相同的概念上面已经描述过了。vue 上有基于 prosemirror 的tiptap 编辑器，但我还不明白它是如何工作的。

有可能做我想做的事吗？

标签： javascriptvue.jswysiwygcontenteditable