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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
ant design charts 获取后端接口数据展示
May 25 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开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php实现的http请求封装示例
2016/11/08 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
Highcharts入门之简介
2016/08/02 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
js实现弹窗效果
2020/08/09 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
django queryset相加和筛选教程
2020/05/18 Python
python的help函数如何使用
2020/06/11 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
伦敦一卡通:The London Pass
2018/11/30 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
培训主管的岗位职责
2013/11/23 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
大学生自荐书范文
2015/03/05 职场文书
项目战略合作意向书
2015/05/08 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android