<Toolbar style="border-bottom:1px solid #ccc" :editor="$refs['editor'+item.id]" :defaultConfig="toolbarConfig" :mode="mode" :ref="'toolbar'+item.id" /> <Editor style="height:200px;overflow-y:hidden;" v-model="item.remark" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated(item.id)" @onChange="onChange" :ref="'editor'+item.id" />多个editor
时间: 2024-02-10 15:07:50 浏览: 180
Toolbar editor
3星 · 编辑精心推荐
好的,针对您的问题,我可以给您提供一些思路和代码示例。
首先,需要在Vue组件中引入wangeditor的js和css文件。可以使用npm包管理器安装:
```
npm install wangeditor --save
```
然后在组件中引入:
```
import 'wangeditor/dist/css/wangEditor.min.css';
import WangEditor from 'wangeditor';
```
接着,在组件的`mounted`生命周期钩子中,动态生成多个Toolbar和Editor:
```
mounted() {
// 动态生成多个Toolbar和Editor
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i];
// 创建Toolbar元素
const toolbar = document.createElement('div');
toolbar.id = `toolbar-${item.id}`;
toolbar.style.borderBottom = '1px solid #ccc';
this.$refs[`toolbar${item.id}`].appendChild(toolbar);
// 创建Editor元素
const editor = document.createElement('div');
editor.id = `editor-${item.id}`;
editor.style.height = '200px';
editor.style.overflowY = 'hidden';
this.$refs[`editor${item.id}`].appendChild(editor);
// 创建Editor实例
const E = WangEditor;
const editorInstance = new E(`#toolbar-${item.id}`, `#editor-${item.id}`);
// 配置Editor实例
editorInstance.config.zIndex = 1;
editorInstance.create();
// 将Editor实例保存到数组中
this.editors.push(editorInstance);
}
}
```
上面代码中的`items`是包含多个Editor数据的数组,`editors`数组用于保存生成的Editor实例。
最后,在模板中循环渲染多个Toolbar和Editor:
```
<template>
<div>
<div v-for="item in items" :key="item.id">
<Toolbar
:editor="$refs[`editor${item.id}`]"
:defaultConfig="toolbarConfig"
:mode="mode"
:ref="`toolbar${item.id}`"
/>
<Editor
v-model="item.remark"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated(item.id)"
@onChange="onChange"
:ref="`editor${item.id}`"
/>
</div>
</div>
</template>
```
这样就可以循环多个Toolbar创建多个Editor了。希望能对您有所帮助!
阅读全文