解决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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
优雅的处理vue项目异常实战记录
Jun 05 Javascript
Vue Router中应用中间件的方法
Aug 06 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
3种平台下安装php4经验点滴
2006/10/09 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
PHP中的类型约束介绍
2015/05/11 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
Python实现Kmeans聚类算法
2020/06/10 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
企业统计员岗位职责
2013/12/13 职场文书
年终总结会主持词
2014/03/25 职场文书
群众路线领导对照材料
2014/08/23 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书