vue.js+element-ui用vue-quill-editor时富文本编辑器样式显示问题

Question

问题描述

想做一个用vue.js + element-ui的个人网站，但是在引入富文本编辑器的时候出现了编辑器很长，占据了页面的整个宽度，而且很窄，会显示滚动条。本人最近才开始研究前端和ui的东西，却感觉不好解决，所以想问问大神们，这个因该如何解决。麻烦了

问题出现的环境背景及自己尝试过哪些方法

我是根据网上别人整合vue-quill-editor的方法引入的，css也引入了，但是就是和官网的版本不一样，toolbar都差行了。我试过手动改css样式，可以拉长编辑框的高度，但是toolbar的显示位置还是不正确。关键是工具栏的图标什么的显示在中间，但是按钮什么的还是要在原来的toolbar才能按到，也就是说是把鼠标移到toolbar栏的位置，会有隐形的按钮。更奇怪的室用F12都定位不到能看到的工具的图标的内容。。。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
代码就是和网上方法一样的代码
然后要引入自己添加的css才会显示变窄和变高，可是为什么官网的都不需要就默认是最标准的呢？
<template>

<div>
    <el-upload
            class="avatar-uploader"
            :action="serverUrl"
            name="img"
            :headers="header"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload">
    </el-upload>
    <el-row v-loading="quillUpdateImgLodaing">
        <quill-editor ref="myTextEditor"
                v-model="content"
                :config="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
        </quill-editor>
    </el-row>
</div>

</template>
<style>
.quill-editor {

width: 50%;
height: 700px;

}
</style>

你期待的结果是什么？实际看到的错误信息又是什么？

就是想要在不需要自己手动添加css样式的情况下显示成普通的默认效果。
不知道是不是和我设置的elementui什么的有关系，但是这个toolbar显示成这样也不应该啊！
如果有人也碰到过这样的问题，麻烦告诉我一下，非常感谢大家了！！

Answer 1

<div class="ql-container ql-snow">

          <quill-editor
            ref="text"
            
            class="ql-editor"
            :options="editorOption"
          />
        </div>
        
        用这段代码