解决Vue的⽂本编辑器vue-quill-editor⼩图标样式排布错
乱问题
假设你已经知道如何引⼊vue-quill-editor，并且遇到了跟我⼀样的问题（如上图），显⽰出来的图标排列不整齐，字体，⽂字⼤⼩选择时超出边框。你可以试试下⾯这种解决办法。
在使⽤⽂本编辑器的vue页⾯中引⼊vue-quill-editor中的样式。
@import "../../node_modules/quill/dist/quill.snow.css";
然后在组件中添加class名 —— class=“ql-editor”。
<quill-editor class="ql-editor"></quill-editor>
你就会看到错乱的图标样式已经改变，如下图：
样式排列已经整齐
如果在包裹组件的标签上添加class名 —— class=“ql-container ql-snow”。
<el-form-item class="ql-container ql-snow">
<quill-editor class="ql-editor"></quill-editor>
</el-form-item>
你将会看到下图的效果，⽂本编辑器外⾯多了⼀层容器。
⽂本编辑器多了⼀层外框
补充知识：Vue-Quill-Editor富⽂本使⽤笔记
<template>
<div class="hello">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@focus="onEditorFocus($event)"
@blur="onEditorBlur($event)"
@change="onEditorChange($event)"
>
<div id="toolbar" slot="toolbar">
<!-- Add a bold button -->
<button class="ql-bold" title="加粗">Bold</button>
<button class="ql-italic" title="斜体">Italic</button>
<button class="ql-underline" title="下划线">underline</button>
<button class="ql-strike" title="删除线">strike</button>
<button class="ql-blockquote" title="引⽤"></button>
<button class="ql-code-block" title="代码"></button>
<button class="ql-header" value="1" title="标题1"></button>
<button class="ql-header" value="2" title="标题2"></button>
<!--Add list -->
<button class="ql-list" value="ordered" title="有序列表"></button>
<button class="ql-list" value="bullet" title="⽆序列表"></button>
<!-- Add font size dropdown -->
<select class="ql-header" title="段落格式">
<option selected>段落</option>
<option value="1">标题1</option>
<option value="2">标题2</option>
<option value="3">标题3</option>
<option value="4">标题4</option>
<option value="5">标题5</option>
<option value="6">标题6</option>
</select>
<select class="ql-size" title="字体⼤⼩">
<option value="10px">10px</option>
<option value="12px">12px</option>
<option value="14px">14px</option>
<option value="16px" selected>16px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
</select>
<select class="ql-font" title="字体">
<option value="SimSun">宋体</option>
优秀的富文本编辑器<option value="SimHei">⿊体</option>
<option value="Microsoft-YaHei">微软雅⿊</option>
<option value="KaiTi">楷体</option>
<option value="FangSong">仿宋</option>
<option value="Arial">Arial</option>
</select>
<!-- Add subscript and superscript buttons -->
<select class="ql-color" value="color" title="字体颜⾊"></select>
<select class="ql-background" value="background" title="背景颜⾊"></select>    <select class="ql-align" value="align" title="对齐"></select>
<button class="ql-clean" title="还原"></button>
<!-- You can also add your own -->
</div>
</quill-editor>
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; // 调⽤富⽂本编辑器
import "quill/dist/quill.snow.css"; // 富⽂本编辑器外部引⽤样式三种样式三选⼀引⼊即可
//import 'quill/ss'
//import 'quill/dist/quill.bubble.css'
import * as Quill from "quill"; // 富⽂本基于quill
export default {
name: "HelloWorld",
components: {
"quill-editor": quillEditor
},
data() {
return {
editor: null, // 富⽂本编辑器对象
content:'',// 富⽂本编辑器默认内容
editorOption: {
// 富⽂本编辑器配置，顶部的⼯具栏
modules: {
toolbar:"#toolbar"
// toolbar: [
//  ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
//  ["blockquote", "code-block"], //引⽤，代码块
//  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表⽰字体⼤⼩
//  [{ list: "ordered" }, { list: "bullet" }], //列表
//  [{ script: "sub" }, { script: "super" }], // 上下标
/
/  [{ indent: "-1" }, { indent: "+1" }], // 缩进
//  [{ direction: "rtl" }] // ⽂本⽅向
// ]
},
theme: "snow",//主题
placeholder: "请输⼊正⽂"
}
};
},
mounted() {
this.editor = this.$QuillEditor.quill;
},
beforeDestroy() {
this.editor = null;
delete this.editor;
},
methods: {
// 准备富⽂本编辑器
onEditorReady(editor) {},
// 富⽂本编辑器失去焦点事件
onEditorBlur(editor) {},
// 富⽂本编辑器获得焦点事件
onEditorFocus(editor) {},
// 富⽂本编辑器内容改变事件
onEditorChange(editor) {
console.log(editor);
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
安装好以后，按照这种⽅式写，基本接⼝搭建完成，细节⽅⾯⾃⼰稍微调整。
注意：⼯具栏可以使⽤toolbar数组形式配置，也可以使⽤html⽅式配置。感觉数组形式更简洁，html形式样式更好调整。
以上这篇解决Vue的⽂本编辑器 vue-quill-editor ⼩图标样式排布错乱问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。