vue中循环动态使用wangeditor

可以使用Vue的自定义指令来实现循环动态使用wangeditor。具体实现步骤如下：

1. 在Vue组件中引入wangeditor组件库，并在mounted生命周期函数中实例化wangeditor编辑器。

<template>
  <div v-for="(item, index) in list" :key="index">
    <div ref="editor"></div>
  </div>
</template>

<script>
import wangEditor from 'wangeditor'

export default {
  data() {
    return {
      list: [
        { content: '' },
        { content: '' }
      ]
    }
  },
  mounted() {
    this.list.forEach((item, index) => {
      const editor = new wangEditor(this.$refs.editor[index])
      editor.create()
    })
  }
}
</script>

2. 在Vue自定义指令中创建编辑器实例，并在指令的update钩子函数中更新编辑器内容。

<template>
  <div v-for="(item, index) in list" :key="index">
    <div v-wangeditor="item.content" ref="editor"></div>
  </div>
</template>

<script>
import wangEditor from 'wangeditor'

export default {
  data() {
    return {
      list: [
        { content: '' },
        { content: '' }
      ]
    }
  },
  directives: {
    wangeditor: {
      bind(el, binding) {
        const editor = new wangEditor(el)
        editor.create()
        editor.txt.html(binding.value)
        el.editor = editor
      },
      update(el, binding) {
        el.editor.txt.html(binding.value)
      }
    }
  }
}
</script>

使用自定义指令的方式更加简便，推荐使用。