vue.js 从输入的 contenteditable 元素中获取 innerhtml答案

【问题标题】：vue.js get innerhtml from contenteditable element on inputvue.js 从输入的 contenteditable 元素中获取 innerhtml
【发布时间】：2016-05-09 20:57:03
【问题描述】：

我正在尝试绑定一个 vue.js 事件以通过 contenteditable=true 检测元素的更改。

<div id="test" contenteditable="true" v-on-input="trigger" v-model="test"></div>

这会触发我的vue.js vue中的trigger方法，但我似乎无法抓取模型值。

有谁知道我如何在输入事件后获取 innerHTML/innerText？

【问题讨论】：

标签： contenteditable vue.js

【解决方案1】：

好的简短描述：

模板：

<div contenteditable="true"
     v-html="myHtmlCode"
     @input="onDivInput($event)">
</div>

脚本：

Methods:{
    onDivInput: function(e) {
        this.myHtmlCode = e.target.innerHTML;
        console.log('Text: %o', this.myHtmlCode );
    },
},

【讨论】：

至少在当前的 vue 和至少在某些浏览器中，这显然通过循环更新来伪造“contenteditable”（首先处理程序更新变量，然后 v-html 更新 div 的内容反过来）具有不幸的副作用，即光标分别跳转到任意位置。到 div 的开头。
大多数情况下的解决方法是监听blur 事件而不是input 的变化。这样，一旦编辑完成，您将不会有光标跳转并保存更改。但如果您希望实时更新更改其他内容，那么这还不够。
我对实时更新内容可编辑的光标位置做了一些实验。你可以在这里看到它：jsfiddle.net/larsolesimonsen/w2cvpm9u/144 注意它还没有适配 vue。这项工作正在进行中:)

【解决方案2】：

在我的 vue.js 组件中使用 event.target.innerText 解决了这个问题

【讨论】：

您能否提供更详细的组件示例？你在使用观察者吗？还是带有 getter/setter 的计算属性？

【解决方案3】：

export default {
  data() {
    return {
      content: null
    }
  },
  methods: {
    onFocusOut: function(e) {
      this.content = e.target.innerHTML
    }
  }
}

&lt;div contenteditable="true" v-html="content" @focusout="onFocusOut($event)"&gt;&lt;/div&gt;

【讨论】：

添加一些关于你的代码的作用和它是如何做的信息和细节会很酷，以帮助 OP 理解为什么你的代码可以解决他的问题。

【解决方案4】：

只有一行使用@blur 代替@input

<div contenteditable="true" @blur="test = $event.target.innerText">{{test}}</div>

【讨论】：