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

发布时间：2020-12-16 23:30:28 所属栏目：百科来源：网络整理

导读：本文为大家记录了vue中安装使用Quill富文本编辑器的具体方法，供大家参考，具体内容如下 1、安装依赖注：我在已有的vue项目中（含有已安装的依赖，即node_modules文件夹）直接进行安装并不成功，报错，没有截图，但是我没记错的话是显示"项目名node_modul

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

1、安装依赖

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

2、使用

（1）在“项目名srcmain.js”引入

Vue.use(VueQuillEditor)

（2）在具体vue文件中引用

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);
}
}
}

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

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

如果需要改变文本域部分的高度，如下：

.quill-editor { height: 350px; }

Quill的自定义工具栏、字体等，请点击：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!