vue-quill-editor的使用及个性化定制操作


Posted in Javascript onAugust 04, 2020

最近在用vue + element ui写一个小应用要用到富文本编辑器,以前做项目都一直都用ueditor,但是看了一下它与vue的兼容性并不好,又对比了几个后,选择了vue-quill-editor。

vue-quill-editor基于Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用,正是我想要的☻。这里只介绍基本的安装和部分简单的定制。我翻了很多别人写的东西对我的项目都无效,最后自己折腾出来在这记录备忘。

一、安装

1.安装模块

npm install vue-quill-editor ?save

2.vue组件

<template>
  <div class="edit_container">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
  </div>
</template>
 
<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import { quillEditor } from 'vue-quill-editor';
 
  export default {
    name: "addJournal",
    components: {
      quillEditor
    },
    data() {
      return {
        content: ``,
        editorOption: {},
      };
    },
    methods: {
      onEditorReady(editor) {}, // 准备编辑器
      onEditorBlur(){}, // 失去焦点事件
      onEditorFocus(){}, // 获得焦点事件
      onEditorChange(){}, // 内容改变事件
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    },
  }
</script>

至此,vue-quill-editor就安装完成了,效果图如下:

vue-quill-editor的使用及个性化定制操作

二、定(zhe)制(teng)

这里只简单介绍两类操作: 样式修改和自定义工具栏。

1.样式修改

a) 修改vue-quill-editor编辑框高度

这个其实很简单了,只要在vue组件的<style>标签里增加一个样式即可

.quill-editor{
  height: 400px;
}

在调整了编辑框的高度后,如果编辑内容的高度超过了编辑框的高度,编辑框会出现滚动条(不手动调整此高度话会一直往下扩展)。

b) 修改工具栏对齐方式

这里需要注意,使用webstorm创建的vue组件中,styte标签的默认会加上scoped属性, 也就是说,只对当前模块的元素有效,而工具栏是从外部引入的,因此下面的样式要写在无scoped属性的style标签里才会有效。

.ql-toolbar.ql-snow{
  text-align: left;
}

修改完后的样式如下

vue-quill-editor的使用及个性化定制操作

2.定制工具栏按钮

以字体大小调节为例,这是默认的调节按钮,我们想改成多个像素大小的下拉选框。

vue-quill-editor的使用及个性化定制操作

step1: 在vue组件中引入quill模块,修改whitelist, 并注册样式

import * as Quill from 'quill';
let fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px', '20px', '24px', '36px', false];//false表示默认值
Quill.register(fontSizeStyle, true);

step2: 修改quill-editor的option属性值

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: fontSizeStyle.whitelist}], [{header: [1, 2, 3, 4, 5, 6, !1]}], [{color: []}, {background: []}], [{font: []}], [{align: []}], ["clean"], ["link", "image", "video"]],
  },
}

这个modules里面的值是参照vue-quill-editor模块里的vue-quill-editor.js里的modules值设置的,只需要将你要修改的工具栏按钮的值替换成step1里设置的whitelist值即可。

step3: 增加定制选项的css样式

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
 content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
 content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
 content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
 content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
 content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
 content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
 content: '36px';
}

此样式的选择器可以从quill.snow.css.js中找到,我们要做的只是修改它的data-value值。

修改后的工具栏:

vue-quill-editor的使用及个性化定制操作

以上这篇vue-quill-editor的使用及个性化定制操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery一般方法介绍 入门参考
Jun 21 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 #Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 #Javascript
VUE使用axios调用后台API接口的方法
Aug 03 #Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 #Javascript
js数组中去除重复值的几种方法
Aug 03 #Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 #Javascript
javascript运行机制之执行顺序理解
Aug 03 #Javascript
You might like
php 分页类 扩展代码
2009/06/11 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
简单的Python抓taobao图片爬虫
2014/10/26 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
python简单的三元一次方程求解实例
2020/04/02 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
分公司总经理岗位职责
2014/08/03 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
环卫工人慰问信
2015/02/15 职场文书
2015年采购工作总结
2015/04/10 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server