解决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获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
windows下python安装小白入门教程
2018/09/18 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
AUC计算方法与Python实现代码
2020/02/28 Python
Python可以实现栈的结构吗
2020/05/27 Python
Python实现壁纸下载与轮换
2020/10/19 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
求职信范文英文版
2014/01/05 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
环保建议书作文
2014/03/12 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
先进教师事迹材料
2014/12/16 职场文书
2015年商场工作总结
2015/04/27 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
详细介绍python操作RabbitMq
2022/04/12 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android