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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
javascript实现行拖动的方法
May 27 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
webpack的pitching loader详解
Sep 23 Javascript
js原生map实现的方法总结
Jan 19 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
JS中的多态实例详解
2017/10/15 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
python的turtle库使用详解
2019/05/10 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
python实现低通滤波器代码
2020/02/26 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
身边的榜样活动方案
2014/08/20 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
win10更新失败无限重启解决方法
2022/04/19 数码科技
MySQL详细讲解变量variables的用法
2022/06/21 MySQL