vue如何安装使用Quill富文本编辑器


Posted in Javascript onSeptember 21, 2018

本文为大家记录了vue中安装使用Quill富文本编辑器的具体方法,供大家参考,具体内容如下

1、安装依赖

npm install vue-quill-editor --save

注:我在已有的vue项目中(含有已安装的依赖,即node_modules文件夹)直接进行安装并不成功,报错,没有截图,但是我没记错的话是显示"项目名\node_modules\cliui\node_modules\wordwrap"这个没有。所以我把项目下的node_modules文件删除,然后直接安装quill依赖(执行npm install vue-quill-editor --save)。然后npm run dev 运行项目,不影响之前vue项目的使用和运行,quill的富文本编辑器也可以用了。

2、使用

(1)在“项目名\src\main.js”引入

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
//一定要引入这三个css,不然文本编辑器会出现不规则黑白几何图形
//这三个css可以在main.js中引入,也可以在具体使用的.vue文件中引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor)

(2)在具体vue文件中引用

<template>
 <el-row>
   <quill-editor v-model="content"
    :options="editorOption" 
    @blur="onEditorBlur($event)" 
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)">
   </quill-editor>
 </el-row>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
 
export default {
  data:function(){
   return{
    content:'',
    editorOption:{}
   }
  },
  methods:{
   onEditorBlur(editor){//失去焦点事件 
  },
   onEditorFocus(editor){//获得焦点事件
   },
   onEditorChange({editor,html,text}){//编辑器文本发生变化
    //this.content可以实时获取到当前编辑器内的文本内容
    console.log(this.content);
   }
  }
}
 
</script>

v-model 可以不使用,并不是Quill编辑器自带的,是我项目中使用自己加的。

这样引入后可以得到一个这样的编辑器。

vue如何安装使用Quill富文本编辑器

如果需要改变文本域部分的高度,如下:

<style>
 .quill-editor {
  height: 350px;
 }
</style>

Quill的自定义工具栏、字体等,请点击:vue中Quill富文本编辑器的使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
关于Javascript闭包与应用的详解
Apr 22 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 #Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 #Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 #Javascript
React实现全局组件的Toast轻提示效果
Sep 21 #Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 #Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 #Javascript
解决vue keep-alive 数据更新的问题
Sep 21 #Javascript
You might like
用PHP读取IMAP邮件
2006/10/09 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
php单一接口的实现方法
2015/06/20 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
js form action动态修改方法
2008/11/04 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Django 前后台的数据传递的方法
2017/08/08 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
python 实现按对象传值
2019/12/26 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
艺术系应届生的自我评价
2013/10/19 职场文书
员工培训邀请函
2014/02/02 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
学校安全责任书
2014/04/14 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
银行求职信范文
2019/05/13 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL