Content edable div追加一个html元素，并在Vuejs中对其

问题描述

这是我的HTML代码。

<div id="app">

  <button @click="renderHtml">clisdfsdfsdfck to appen html</button>
  <div class="flex">
      <div class="message" @input="fakeVmodel" v-html="html" contenteditable="true"></div>
      <div class="message">{{ html }}</div>
  </div>
</div>

这是js部件

let app = new Vue({
    el: '#app',
    data: {
        html: 'some text',
    },
    methods: {
        fakeVmodel: function(e){
            this.html = e.target.innerText;
        },
        renderHtml: function(){
          this.html += '<img src="https://cdn-images-1.medium.com/max/853/1*FH12a2fX61aHOn39pff9vA.jpeg" alt="" width=200px>';
        }
    }
});

问题是，当我单击按钮将html标记(Img)推送到我的变量(Html)时，它就起作用了。但在输入后，它将删除插入的标签部分。这是在Vue中成功添加到html代码的方法吗？

推荐答案

主要问题： 该html因this.html = e.target.innerText;而消失。相反，请使用this.html = e.target.innerHTML;。innerHTML解析为完整的HTML内容。

次要问题： 键入后，光标将聚焦于div的开头。这是因为v-html导致div更新。

若要解决此问题，请确保v-html仅更新焦点输出时的div。

完整示例

let app = new Vue({
  el: '#app',
  data: {
    html: 'some text',
  },
  methods: {
    updateHtml: function(e) {
      this.html = e.target.innerHTML;
    },
    renderHtml: function(){
      this.html += '<img src="https://cdn-images-1.medium.com/max/853/1*FH12a2fX61aHOn39pff9vA.jpeg" alt="" width=200px>';
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
 
  <button @click="renderHtml">click to append html</button>
  <div class="flex">
      <div class="message" @focusout="updateHtml" v-html="html" contenteditable="true"></div>
      <br>
      <div class="message">{{ html }}</div>
  </div>
</div>