vue富文本编辑器组件vue-quill-edit使用教程


Posted in Javascript onSeptember 21, 2018

之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便。

近期项目vue单页面,就使用vue-quill-edit这个编辑器组件吧!

一、安装  cnpm install vue-quill-editor

二、引入

在main.js引入并注册:

import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

三、封装组件

<template>
 <div class="quill_box">
 <quill-editor 
 v-model="content" 
 ref="myQuillEditor" 
 :options="editorOption" 
 @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
 @change="onEditorChange($event)">
 </quill-editor>
 </div>
 
</template> 
<script>
import Bus from "../../assets/utils/eventBus";

export default {
 data() {
 return {
 content:'',
 editorOption: {
 placeholder: "请编辑内容",
 modules: {
  toolbar: [
  ["bold", "italic", "underline", "strike"],
  ["blockquote", "code-block"],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }],
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: ["small", false, "large", "huge"] }],
  [{ font: [] }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  [ "image"]
  ]
 }
 }
 };
 },
 props:[
 'contentDefault'
 ],
 watch:{
 contentDefault:function(){
 this.content = this.contentDefault;
 }
 },
 mounted:function(){
 this.content = this.contentDefault;
 },
 methods: {
 onEditorBlur() {
 //失去焦点事件
 // console.log('失去焦点');
 },
 onEditorFocus() {
 //获得焦点事件
 // console.log('获得焦点事件');
 },
 onEditorChange() {
 //内容改变事件
 // console.log('内容改变事件');
 Bus.$emit('getEditorCode',this.content)
 }
 }
};
</script> 

<style lang="less">
 .quill_box{
 .ql-toolbar.ql-snow{border-color:#dcdfe6;}
 .ql-container{height:200px !important;border-color:#dcdfe6;}
 .ql-snow .ql-picker-label::before {
 position: relative;
 top: -10px;
 }
 .ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg{position: relative;top:-6px;}
 }
</style>

四、引入使用

<my-editor :contentDefault="contentDefault"></my-editor>
components:{
 myEditor:myEditorComponent
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现打开本地文件或文件夹
Mar 09 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 #Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 #Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 #Javascript
解决vue keep-alive 数据更新的问题
Sep 21 #Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 #Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 #Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 #Javascript
You might like
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
js实现3D旋转相册
2020/08/02 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
python提取log文件内容并画出图表
2019/07/08 Python
Django框架反向解析操作详解
2019/11/28 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
一年级学生评语
2014/04/23 职场文书
房产遗嘱范本
2015/08/06 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python