Vue中Quill富文本编辑器的使用教程


Posted in Javascript onSeptember 21, 2018

在项目中需要引入Quill文本编辑器,并且根据需求,需要自定义字体选项、图片拖拽上传和改变大小,所以根据Quill官网系统学习了一下,以下是我学习和研究的结果。

一、主题

Quill的富文本编辑器分为snow和bubble两种。

snow是有工具栏的,如下:

Vue中Quill富文本编辑器的使用教程

bubble是只有文本域的,如下:

Vue中Quill富文本编辑器的使用教程

那么具体如何选择

在vue项目中,具体引入Quill的文件中,需要使用哪种主题就写哪个。默认是snow主题的。

<script>
  export default {
    data:function(){
      return{
        editorOption:{
          //theme:'bubble'
          theme:'snow'
        }
      }
    }
  }
</script>

二、自定义工具栏toolbar

1、具体配置如下,需要哪个写哪个。

<script>
  export default {
    data:function(){
      return{
        editorOption:{
          modules:{
            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' }],             // 文本方向
 
 
              [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
 
 
              [{ 'color': [] }, { 'background': [] }],     // 字体颜色,字体背景颜色
              [{ 'font': [] }],     //字体
              [{ 'align': [] }],    //对齐方式
 
 
              ['clean'],    //清除字体样式
              ['image','video']    //上传图片、上传视频
 
            ]
          },
          theme:'snow'
        }
      }
    }
  }
</script>

其中color、background、font、align都是有默认值的,写一个空数据即可。如果想要自定义,请往下看。

2、自定义字体列表,加入自己需要的字体

(1)引入一个单独自定义的font.css文件(如下)在app.vue文件中,因为要在初始化的时候就引入才能覆盖掉默认的!!很重要

<template>
 <div id="app">
  <router-view/>
 </div>
</template>
 
<script>
export default {
 name: 'App'
}
</script>
 
<style>
  @import './style/font';
</style>

(2)font.css

把需要自定义放在字体列表的字体放在这个css中,选择器如下。data-value后的值是要拼在.ql-font-后面的,需要保持一致。

[data-value=a]    ql-font-a

content指的是字体列表中的选项

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋体";
  font-family: "SimSun";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
 content: "黑体";
 font-family: "SimHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
 content: "微软雅黑";
 font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
 content: "楷体";
 font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
 content: "仿宋";
 font-family: "FangSong";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
 content: "Arial";
 font-family: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
 content: "Times New Roman";
 font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
 content: "sans-serif";
 font-family: "sans-serif";
}
 
.ql-font-SimSun {
  font-family: "SimSun";
}
.ql-font-SimHei {
  font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
  font-family: "KaiTi";
}
.ql-font-FangSong {
  font-family: "FangSong";
}
.ql-font-Arial {
  font-family: "Arial";
}
.ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}
.ql-font-sans-serif {
  font-family: "sans-serif";
}

(3).vue文件中

<script>
  import { quillEditor } from 'vue-quill-editor'
  import * as Quill from 'quill' //引入编辑器
  
  //quill编辑器的字体
  var fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif']; 
  var Font = Quill.import('formats/font'); 
  Font.whitelist = fonts; //将字体加入到白名单 
  Quill.register(Font, true);
  
  export default {
    data:function(){
      return{
        content:'',
        editorOption:{
          modules:{
            toolbar:[
              ['bold', 'italic', 'underline', 'strike'], 
              ['blockquote', 'code-block'],
 
              [{ 'header': 1 }, { 'header': 2 }],   
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              [{ 'script': 'sub'}, { 'script': 'super' }], 
              [{ 'indent': '-1'}, { 'indent': '+1' }],  
              [{ 'direction': 'rtl' }],        
 
              [{ 'size': ['small', false, 'large', 'huge'] }], 
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
 
              [{ 'color': [] }, { 'background': [] }], 
              [{ 'font': fonts }],    //把上面定义的字体数组放进来
 
              [{ 'align': [] }],
 
              ['clean'],
              ['image','video']
 
              
            ]
          },
          theme:'snow'
        }
      }
    }
  }
</script>

效果图如下:

Vue中Quill富文本编辑器的使用教程

Vue中Quill富文本编辑器的使用教程

三、图片拖拽上传ImgeDrop

<script>
  import { quillEditor } from 'vue-quill-editor'
  import * as Quill from 'quill' //引入编辑器
  //quill图片可拖拽上传
  import { ImageDrop } from 'quill-image-drop-module';
  
  Quill.register('modules/imageDrop', ImageDrop);
 
  export default {
    data:function(){
      return{
        editorOption:{
          modules:{
            imageDrop:true, 
          },
          theme:'snow'
        }
      }
    }   
  }
</script>

四、图片调整大小ImageResize

<script>
  import { quillEditor } from 'vue-quill-editor'
  import * as Quill from 'quill' //引入编辑器
  //quill图片可拖拽改变大小
  import ImageResize from 'quill-image-resize-module'
  
  Quill.register('modules/imageResize', ImageResize)
 
  export default {
    data:function(){
      return{
        editorOption:{
          modules:{
            imageResize: {} 
          },
          theme:'snow'
        }
      }
    }   
  }
</script>

效果图如下:可以调整图片的对齐方式,并显示图片的大小

Vue中Quill富文本编辑器的使用教程

Quill使用基本如上。安装可参考:vue如何安装使用Quill富文本编辑器

其他应用可参考Quill官网https://quilljs.com/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 全等号运算符使用说明
May 31 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
AJAX学习笔记
May 18 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 #Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 #Javascript
vue中设置、获取、删除cookie的方法
Sep 21 #Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 #Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 #Javascript
React实现全局组件的Toast轻提示效果
Sep 21 #Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 #Javascript
You might like
一个oracle+PHP的查询的例子
2006/10/09 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php牛逼的面试题分享
2013/01/18 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
AngularJS语法详解
2015/01/23 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
js倒计时简单实现方法
2015/12/17 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
详细介绍Python函数中的默认参数
2015/03/30 Python
python分析网页上所有超链接的方法
2015/05/08 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
python-地图可视化组件folium的操作
2020/12/14 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
俄罗斯游戏商店:Buka
2020/03/01 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
实习指导老师评语
2014/04/26 职场文书
班主任先进事迹材料
2014/12/17 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js