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 相关文章推荐
javascript 学习之旅 (1)
Feb 05 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
PHP服务器页面间跳转实现方法
2012/08/02 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
react路由配置方式详解
2017/08/07 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python算法应用实战之栈详解
2017/02/04 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
Python目录和文件处理总结详解
2019/09/02 Python
python中rc1什么意思
2020/06/19 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Python中Yield的基本用法
2020/10/18 Python
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
软件毕业生个人鉴定
2014/03/03 职场文书
业务员的岗位职责
2014/03/15 职场文书
先进党员事迹材料
2014/12/24 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android