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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
探秘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数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
任意位置显示html菜单
2007/02/01 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
后勤主管工作职责
2013/12/07 职场文书
销售找工作求职信
2013/12/20 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
2014年文员工作总结
2014/11/18 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
2015年服务员工作总结
2015/04/08 职场文书
企业员工辞职信范文
2015/05/12 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
微信小程序实现轮播图指示器
2022/06/25 Javascript