vue项目中,wangEditor同时存在多个editor对象时,显示错误

在Vue项目中使用wangEditor时,由于id和key必须唯一,且不建议直接通过id创建多个editor对象,可能导致显示错误。推荐利用vue的ref属性来创建和管理多个editor实例。
部署运行你感兴趣的模型镜像

原因

1.id只能唯一
2.v-for循环,key只能唯一
3.最好不要用id(即使id是唯一的)去new 一个editor对象,可能会出错,使用vue的ref去new(我遇到的,花了半天时间,很烦)

代码:

<div ref="text-container" class="text"></div>
<div ref="toolbar-container" class="toolbar"></div>
//初始化富文本编辑器
        this.editor = new E(this.$refs['toolbar-container'], this.$refs['text-container']);
        this.editor.config.height = 50;
        // console.log()
        this.editor.config.zIndex = 10;
        this.editor.config.placeholder = "请输入";
        this.editor.config.colors = ["#000000", "#eeece0", "#1c487f", "#4d80bf"];
        this.editor.config.menus = [
          "bold",
          "italic",
          "code",
          "underline",
          "emoticon",
          "justify",
        ];
        this.editor.create();

您可能感兴趣的与本文相关的镜像

Wan2.2-T2V-A5B

Wan2.2-T2V-A5B

文生视频
Wan2.2

Wan2.2是由通义万相开源高效文本到视频生成模型,是有​50亿参数的轻量级视频生成模型,专为快速内容创作优化。支持480P视频生成,具备优秀的时序连贯性和运动推理能力

Vue 3 中使用 `@wangeditor/editor-for-vue` 实现多个富文本框,可以按照以下步骤进行: ### 1. 安装依赖 首先,确保已经安装了 `@wangeditor/editor-for-vue`。如果没有安装,可以使用以下命令进行安装: ```bash npm install @wangeditor/editor-for-vue ``` ### 2. 创建 Vue 3 组件 ```vue <template> <div> <!-- 第一个富文本框 --> <div> <h3>富文本框 1</h3> <Editor v-model="content1" :config="editorConfig" /> </div> <!-- 第二个富文本框 --> <div> <h3>富文本框 2</h3> <Editor v-model="content2" :config="editorConfig" /> </div> </div> </template> <script setup> import { ref } from 'vue'; import { Editor } from '@wangeditor/editor-for-vue'; // 定义两个不同的数据绑定变量 const content1 = ref(''); const content2 = ref(''); // 配置编辑器 const editorConfig = { // 这里可以添加编辑器的配置选项,例如工具栏等 toolbarKeys: [ 'headerSelect', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'image', 'video', '|', 'undo', 'redo' ] }; </script> <style scoped> /* 可以添加样式来调整富文本框的外观 */ .editor-container { margin-bottom: 20px; } </style> ``` ### 解释 在上述代码中,创建了两个独立的富文本框。每个富文本框都有自己独立的数据绑定变量(`content1` 和 `content2`),这样可以分别管理它们的内容。同时,使用了相同的编辑器配置 `editorConfig`,可以根据需要为每个富文本框定制不同的配置。 ### 注意事项 - 确保每个富文本框都有独立的数据绑定变量,这样可以避免内容相互影响。 - 可以根据需要调整 `editorConfig` 来定制每个富文本框的功能和外观。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值