vue-quill-editor 修改样式

要修改vue-quill-editor的样式，你可以按照以下步骤操作：

首先，安装vue-quill-editor和quill的依赖包。你可以使用npm命令来安装它们：

npm install vue-quill-editor --save
npm install quill --save

然后，你需要在所需的页面中引入vue-quill-editor组件。你可以创建一个名为quill.vue的文件组件，并在该组件中引入vue-quill-editor的相关代码。你可以按照下面的代码进行设置：

<template>
  <div class="form-quill">
    <div class="i-quill" :class="classes" v-show="!disabled">
      <div ref="editor" :style="styles"></div>
    </div>
    <div v-show="disabled" v-html="value"></div>
    <Upload class="form-quill-upload" ref="uploadFileBtn" :action="uploadUrl" :format="format" :disabled="disabled" :maxSize="maxSize" :on-success="succUpload" :on-error="errorUpload" :show-upload-list="false" :before-upload="handleUpload" :on-format-error="formatError" :on-exceeded-size="exceededSize">
      <Button type="primary" id="file" ref="uploadImgBtn">上传图片</Button>
    </Upload>
  </div>
</template>

<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
</script>

在这段代码中，你可以根据自己的需要修改和添加样式类名。比如，在 `class="form-quill"` 中添加自定义的样式类名。你还可以根据需要调整其中的样式属性。

最后，你可以在自己的样式文件中编写对应的CSS代码，来修改vue-quill-editor的样式。你可以使用自定义的样式类名或者选择器来选择要修改的元素，并设置相应的样式属性来改变其外观。

这样，你就可以根据需要自定义修改vue-quill-editor的样式了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue + iview + quill （vue-quill-editor）富文本编辑器及插入自定义图片，样式调整](https://blog.csdn.net/qq_36017964/article/details/107557208)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)](https://download.csdn.net/download/weixin_38637884/12925986)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]