vue3 + ts同一个页面 使用两个wangEditor

你可以在 Vue3 中使用 WangEditor 来创建多个编辑器实例。以下是一个使用 TypeScript 和 Vue3 的示例：

1. 安装 wangEditor

npm install wangeditor --save

2. 创建一个编辑器组件

<!-- Editor.vue -->
<template>
  <div class="editor-container">
    <div ref="editor"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import WangEditor from 'wangeditor'

export default defineComponent({
  name: 'Editor',
  mounted() {
    const editor = new WangEditor(this.$refs.editor as HTMLElement)
    editor.create()
  }
})
</script>

<style scoped>
.editor-container {
  width: 100%;
  height: 400px;
}
</style>

3. 在页面中使用编辑器组件

<template>
  <div>
    <Editor />
    <Editor />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Editor from './Editor.vue'

export default defineComponent({
  name: 'Page',
  components: {
    Editor
  }
})
</script>

这样就可以在同一个页面使用两个 WangEditor 编辑器实例了。