Vue 2内容可通过v模型编辑 [英] Vue 2 contentEditable with v-model

问题描述

我正在尝试制作类似于Medium的文本编辑器。我正在使用一个内容可编辑的段落标签，并将每个项目存储在一个数组中，并使用v-for呈现每个项目。但是，使用v-model将文本与数组绑定时遇到问题。似乎与v模型和contenteditable属性存在冲突。这是我的代码：

I'm trying to make a text editor similar to Medium. I'm using a content editable paragraph tag and store each item in an array and render each with v-for. However, I'm having problems with binding the text with the array using v-model. Seems like there's a conflict with v-model and the contenteditable property. Here's my code:

<div id="editbar">
     <button class="toolbar" v-on:click.prevent="stylize('bold')">Bold</button>
</div>
<div v-for="(value, index) in content">
     <p v-bind:id="'content-'+index" v-bind:ref="'content-'+index" v-model="content[index].value" v-on:keyup="emit_content($event)" v-on:keyup.delete="remove_content(index)" contenteditable></p>
</div>

在我的脚本中：

export default { 
   data() {
      return {
         content: [{ value: ''}]
      }
   },
   methods: {
      stylize(style) {
         document.execCommand(style, false, null);
      },
      remove_content(index) {
         if(this.content.length > 1 && this.content[index].value.length == 0) {
            this.content.splice(index, 1);
         }
      }
   }
}

I尚未在网上找到任何答案。

I haven't found any answers online for this.

推荐答案

我昨天知道了！着眼于这种解决方案。我基本上只是通过更新任何可能的事件并通过使用动态引用手动分配相应的元素来重新渲染来手动跟踪 content 数组中的innerHTML。 content-0 ， content-1 ，...效果很好：

I figured it out yesterday! Settled on this solution. I basically just manually keep track of the innerHTML in my content array by updating on any possible event and re-rendering by manually assigning the corresponding elements with dynamic refs e.g. content-0, content-1,... Works beautifully:

<template>
   <div id="editbar">
       <button class="toolbar" v-on:click.prevent="stylize('bold')">Bold</button>
   </div>
   <div>
      <div v-for="(value, index) in content">
          <p v-bind:id="'content-'+index" class="content" v-bind:ref="'content-'+index" v-on:keydown.enter="prevent_nl($event)" v-on:keyup.enter="add_content(index)" v-on:keyup.delete="remove_content(index)" contenteditable></p>
      </div>
   </div>
</template>
<script>
export default {
   data() {
      return {
         content: [{
            html: ''
         }]
      }
   },
   methods: {
      add_content(index) {
        //append to array
      },
      remove_content(index) {
        //first, check some edge conditions and remove from array

        //then, update innerHTML of each element by ref
        for(var i = 0; i < this.content.length; i++) {
           this.$refs['content-'+i][0].innerHTML = this.content[i].html;
        }
      },
      stylize(style){
         document.execCommand(style, false, null);
         for(var i = 0; i < this.content.length; i++) {
            this.content[i].html = this.$refs['content-'+i][0].innerHTML;
         }
      }
   }
}
</script>

这篇关于Vue 2内容可通过v模型编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！