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 页面全选框实践代码
Apr 02 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
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 时间日期操作实战
2011/08/26 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP7新增函数
2021/03/09 PHP
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
Python读写文件方法总结
2015/06/09 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Python 爬虫的原理
2020/07/30 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
求职简历中个人的自我评价
2013/12/25 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
网络管理专业求职信
2014/03/15 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL