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 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
javascript动画效果类封装代码
Aug 28 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
jquery replace方法去空格
May 08 jQuery
js实现AI五子棋人机大战
May 28 Javascript
详解vue组件之间的通信
Aug 30 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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开发模式(简写版)
2007/03/15 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
小学防溺水制度
2014/01/29 职场文书
《长城》教学反思
2014/02/14 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
信用卡催款律师函
2015/05/27 职场文书
2016年情人节广告语
2016/01/28 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技