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 select选中的一个小问题
Oct 11 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
对vue中methods互相调用的方法详解
2018/08/30 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python学生管理系统代码实现
2020/04/05 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
解决Python中回文数和质数的问题
2019/11/24 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
展会邀请函范文
2014/01/26 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
安全责任书模板
2014/07/22 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
公司2014年度工作总结
2014/12/10 职场文书