vue-quill-editor富文本编辑器简单使用方法


Posted in Javascript onSeptember 21, 2018

文章刚开始先来介绍一下vue-quill-editor富文本编辑器的简单使用,具体操作步骤如下:

安装:

npm install vue-quill-editor --save

main.js:

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

在需要使用的地方:

<template>
   <quill-editor 
   v-model="content" 
   ref="myQuillEditor" 
   :options="editorOption" 
   @blur="onEditorBlur($event)" 
   @focus="onEditorFocus($event)"
   @change="onEditorChange($event)">
  </quill-editor>
</template> 
<script>
  import { quillEditor } from 'vue-quill-editor'
  export default{
    data(){
      return {
        content:null,
        editorOption:{}  //配置
      }
    },
    methods:{
      onEditorBlur(){//失去焦点事件
      },
      onEditorFocus(){//获得焦点事件
      },
      onEditorChange(){//内容改变事件
      }
    }
  }
</script>

看到了一个网友分享的如何禁用vue-quill-editor 富文本编辑器,分享给大家,也谢谢原作者的分享。

vue:

<el-form-item label="描述:" :label-width="formLabelWidth">
  <quill-editor
   v-model="form.content"
   ref="content"
   :options="editorOption"
   @blur="onEditorBlur($event)" 
   @focus="onEditorFocus($event)"
   @change="onContentChange($event)"
   @ready="onEditorReady($event)">
  </quill-editor>
</el-form-item>

js:

export default {
  data() {
    form: {
      content:'', // 存储富文本框内容
    },
    editorOption: { // 定义富文本编辑器显示
      modules:{
      toolbar:[
       ['bold','italic','underline','strike'], // 加粗、倾斜、下划线、删除线

       [{'header':1},{'header':2}], // 标题一、标题二
       [{'list':'ordered'},{'list':'bullet'}], // 列表

       [{'color':[]},{'background':[]}], // 字体颜色、背景颜色
      ]
     }
    }
  },
  methods: {
    onEditorReady(){ // 富文本准备时的事件

    },
    onEditorFocus(val,editor){ // 富文本获得焦点时的事件
      console.log(val); // 富文本获得焦点时的内容
      editor.enable(false); // 在获取焦点的时候禁用
    },
    onEditorBlur(val){ // 富文本失去焦点时的事件
      console.log(val); // 富文本失去焦点时的内容
    },
    onContentChange(val){ // 富文本内容改变时的事件
      console.log(val); // 富文本改变时的内容
    }
  }
}

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

Javascript 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
JavaScript confirm选择判断
Oct 18 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
探秘vue-rx 2.0(推荐)
Sep 21 #Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 #Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 #Javascript
vue-rx的初步使用教程
Sep 21 #Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 #Javascript
Vue中插入HTML代码的方法
Sep 21 #Javascript
node.js调用C++函数的方法示例
Sep 21 #Javascript
You might like
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
javascript window对象属性整理
2009/10/24 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Python实用日期时间处理方法汇总
2015/05/09 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
全面分析Python的优点和缺点
2018/02/07 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
迟到检讨书800字
2014/01/13 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
公司投资建议书
2014/05/16 职场文书
学校党员对照检查材料
2014/08/28 职场文书
学习十八大宣传标语
2014/10/09 职场文书
幼儿园见习报告
2014/10/30 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby