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 相关文章推荐
jQuery随机切换图片的小例子
Apr 18 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
Element Carousel 走马灯的具体实现
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
我的论坛源代码(九)
2006/10/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
python打包多类型文件的操作方法
2020/09/21 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
2014年小班元旦活动方案
2014/02/16 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
工作表扬信
2015/01/17 职场文书
三八妇女节寄语
2015/02/27 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
整脏治乱工作简报
2015/07/21 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
MySQL优化及索引解析
2022/03/17 MySQL