解决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 相关文章推荐
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
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生成文件
2007/01/15 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
php生成RSS订阅的方法
2015/02/13 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
matplotlib作图添加表格实例代码
2018/01/23 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python-接口开发入门解析
2019/08/01 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
学术会议邀请函
2015/01/30 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
2019初中学生入团申请书
2019/06/27 职场文书