溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文為大家記錄了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編輯器自帶的，是我項目中使用自己加的。
這樣引入后可以得到一個這樣的編輯器。
如果需要改變文本域部分的高度，如下：
<style>
.quill-editor {
height: 350px;
}
</style>
Quill的自定義工具欄、字體等，請點擊：vue中Quill富文本編輯器的使用
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
