不采用组件引入的情况下 vue3 + ts在一个页面 使用两个wangEditor
时间: 2024-05-13 12:17:55 浏览: 138
Vue 中使用富文本编译器wangEditor3的方法
可以在 Vue3 + TypeScript 中使用两个 wangEditor,以下是一个简单的示例代码:
在 `vue-shims.d.ts` 文件中声明 wangEditor:
```typescript
declare module 'wangeditor' {
const Editor: any;
export default Editor;
}
```
在组件中引入并使用 wangEditor:
```vue
<template>
<div>
<div ref="editor1"></div>
<div ref="editor2"></div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import Editor from 'wangeditor';
export default defineComponent({
name: 'MyComponent',
setup() {
const editor1 = ref(null);
const editor2 = ref(null);
onMounted(() => {
const e1 = new Editor(editor1.value);
e1.create();
const e2 = new Editor(editor2.value);
e2.create();
});
return { editor1, editor2 };
},
});
</script>
```
这里使用了 `ref` 来获取 `div` 元素,然后在 `onMounted` 钩子函数中实例化了两个 wangEditor。注意,在 `vue.config.js` 中配置 `webpack` 的 `externals` 属性,将 wangEditor 设置为外部依赖,否则会报错。
阅读全文