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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
js event事件的传递与冒泡处理
Dec 06 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
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
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
javascript 打印页面代码
2009/03/24 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python实现截屏的函数
2015/07/26 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
python使用正则筛选信用卡
2019/01/27 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
python模块如何查看
2020/06/16 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
小区文明倡议书
2014/05/16 职场文书
党员演讲稿
2014/09/04 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
浅谈Python中的正则表达式
2021/06/28 Python
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏