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 相关文章推荐
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
jQuery 插件开发指南
Nov 14 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 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超级全局变量数组小结
2012/10/04 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php实现json编码的方法
2015/07/30 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
js给selected添加options的方法
2015/05/06 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
Python可以用来做什么
2020/11/23 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
一套软件测试笔试题
2014/07/25 面试题
女大学生个人求职信
2013/12/09 职场文书
供货协议书范本
2014/04/22 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
升学宴答谢词
2015/01/05 职场文书