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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
ionic实现底部分享功能
May 11 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
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
检测png图片是否完整的php代码
2010/09/06 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
js变量提升深入理解
2016/09/16 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
python打开网页和暂停实例
2014/09/30 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python删除服务器文件代码示例
2018/02/09 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
小学三八妇女节活动方案
2014/03/16 职场文书
宣传标语大全
2014/07/01 职场文书
邀请函格式范文
2015/02/02 职场文书
本溪关门山导游词
2015/02/09 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
golang定时器
2022/04/14 Golang