解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题


Posted in Javascript onAugust 03, 2020

解决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>

解决Vue的文本编辑器 vue-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的文本编辑器 vue-quill-editor 小图标样式排布错乱问题

补充知识: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/dist/quill.core.css'
//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.$refs.myQuillEditor.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 小图标样式排布错乱问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 #Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 #Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 #Javascript
js实现点击上传图片并设为模糊背景
Aug 02 #Javascript
jQuery实现雪花飘落效果
Aug 02 #jQuery
原生js+canvas实现贪吃蛇效果
Aug 02 #Javascript
js+canvas实现五子棋小游戏
Aug 02 #Javascript
You might like
如何正确理解PHP的错误信息
2006/10/09 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
python的launcher用法知识点总结
2020/08/07 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
Python之多进程与多线程的使用
2021/02/23 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
看古人们是如何赞美老师的?
2019/07/08 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
Java集成swagger文档组件
2021/06/28 Java/Android
浅谈Node的内存泄露问题
2022/05/06 NodeJs