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图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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
php实现邮件发送并带有附件
2014/01/24 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
用 JSON 处理缓存
2007/04/27 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python端口扫描简单程序
2016/11/10 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
linux面试题参考答案(5)
2014/09/01 面试题
大学生入党思想汇报
2014/01/01 职场文书
死者家属慰问信
2015/03/24 职场文书