vue 同一页面中使用多个quill-editor，但是只有一个能正常显示，怎么办？

Question

场景需求:
我的表单有至少两个以上的文本框使用quill-editor，但是只能实例话一个，第二个开始就不行了，有什么解决办法吗？
我的三个输入框都需要使用quill，但是只有一个正常，其他显示不出来

<Form-item label="市场分析" prop="project_desc">
        <qeditor
          :value="formItem.project_desc"
          @input="projectDesc">
          </qeditor>
 </Form-item>
 <Form-item label="商业模式" style="margin-top:65px;">
        <qeditor
          :value="formItem.market_analysis"
          @input="projectMarket"
          >
          </qeditor>
 </Form-item>

qeditor 是编辑器组件

Answer 1

目测编辑器内部是通过id来实现的功能，三个组件id就重复了，建议在组件内部去随机生成id，然后:id='idname'绑定在dom上，在js里也用idname来操作

Answer 2

楼主，你解决了吗？我也碰到同样的问题

Answer 3

之前看了好多都没有特别好的答案，今天终于整出来了，超级简单

<template>
    <div>
        <el-row v-loading="quillUpdateImg">
            <quill-editor
                    v-model="content"
                    ref="myQuillEditor"
                    @change="onEditorChange($event)">
            </quill-editor>
        </el-row>
        <el-upload v-show="false"
                class="avatar-uploader"
                :action="serverUrl"
                name="img"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :before-upload="beforeUpload">
        </el-upload>
    </div>
</template>


mounted() {
        this.content = this.data;
        this.$refs['myQuillEditor'].quill.getModule('toolbar').addHandler('image', function(value) {
            if (value) {
                const input = this.container.offsetParent.nextSibling.nextElementSibling.childNodes[0].childNodes[0];
                input.click();
            } else {
                this.quill.format('image', false);
            }
        });
    }
    
    

最重要的就是这句
const input = this.container.offsetParent.nextSibling.nextElementSibling.childNodes[0].childNodes[0];

---

Answer 4

同一个页面，多个编辑器，只有第一个有样式，原因是工具栏的ID是一样的，只有第一个ID生效；
解决办法：把toolbar的ID修改成动态的。
具体代码可以访问我的博客：vue-quill-editor 封装成组件；图片文件流上传；同一页面多个编辑器样式异常解决办法