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加ASP二级域名转向的代码
May 17 Javascript
一个符号插入器 中用到的js代码
Sep 04 Javascript
js日期时间补零的小例子
Mar 05 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 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中“简单工厂模式”实例代码讲解
2012/09/04 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
php调用shell的方法
2014/11/05 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
关于微信小程序登录的那些事
2019/01/08 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
Python实现抢购IPhone手机
2018/02/07 Python
django初始化数据库的实例
2018/05/27 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
护理专科毕业推荐信
2013/11/10 职场文书
电脑教师的自我评价
2013/12/18 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
文明单位申报材料
2014/12/23 职场文书
MySQL七大JOIN的具体使用
2022/02/28 MySQL
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL