contenteditable div 附加一个 html 元素并在 Vuejs 中对其进行 v 建模

Question

这是我的 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 代码有什么方法吗？

这是代码笔示例 https://codepen.io/weretyc/pen/EwXZYL?editors=1010

Answer 1

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

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

要解决，确保v-html只更新focusout上的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>

contenteditable div 附加一个 html 元素并在 Vuejs 中对其进行 v 建模

contenteditable div append a html element and v-model it in Vuejs

javascript

contenteditable

vue.js