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 相关文章推荐
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
微信小程序实现留言板
Oct 31 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
探秘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实现小型站点广告管理
2006/10/09 PHP
建立动态的WML站点(一)
2006/10/09 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
Python自动连接ssh的方法
2015/03/07 Python
Python模拟百度登录实例详解
2016/01/20 Python
浅谈Python处理PDF的方法
2017/11/10 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python Pillow Image Invert
2019/01/22 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
预备党员综合考察材料
2014/05/31 职场文书
物资采购管理制度
2015/08/06 职场文书
销售人员管理制度
2015/08/06 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
JS封装cavans多种滤镜组件
2022/02/15 Javascript
TypeScript 内置高级类型编程示例
2022/09/23 Javascript