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 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
js控制div弹出层实现方法
May 11 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
React服务端渲染原理解析与实践
Mar 04 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
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
Prototype框架详解
2015/11/25 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
Vue封装的组件全局注册并引用
2019/07/24 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
Python Tkinter实现简易计算器功能
2018/01/30 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python之生产者消费者模型实现详解
2019/07/27 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
违反课堂纪律检讨书
2014/01/19 职场文书
考试不及格的检讨书
2014/01/22 职场文书
优秀老师事迹材料
2014/02/05 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
小学一年级评语大全
2014/04/22 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技