vue如何安裝使用Quill富文本編輯器
更新時間：2018年09月21日 11:38:11 作者：姜蕾
這篇文章主要為大家詳細介紹了vue如何安裝使用Quill富文本編輯器，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家記錄了vue中安裝使用Quill富文本編輯器的具體方法，供大家參考，具體內(nèi)容如下
1、安裝依賴
npm install vue-quill-editor --save
注：我在已有的vue項目中（含有已安裝的依賴，即node_modules文件夾）直接進行安裝并不成功，報錯，沒有截圖，但是我沒記錯的話是顯示"項目名\node_modules\cliui\node_modules\wordwrap"這個沒有。所以我把項目下的node_modules文件刪除，然后直接安裝quill依賴（執(zhí)行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，不然文本編輯器會出現(xiàn)不規(guī)則黑白幾何圖形 //這三個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}){//編輯器文本發(fā)生變化
//this.content可以實時獲取到當(dāng)前編輯器內(nèi)的文本內(nèi)容
console.log(this.content);
}
}
}
</script>
v-model 可以不使用，并不是Quill編輯器自帶的，是我項目中使用自己加的。
這樣引入后可以得到一個這樣的編輯器。
如果需要改變文本域部分的高度，如下：
<style>
.quill-editor {
height: 350px;
}
</style>
Quill的自定義工具欄、字體等，請點擊：vue中Quill富文本編輯器的使用
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中關(guān)于el-popover的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue實現(xiàn)todolist基本功能以及數(shù)據(jù)存儲功能實例詳解
本文通過實例代碼給大家介紹了vue實現(xiàn)todolist基本功能以及數(shù)據(jù)存儲功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
本文會通過一個簡單的vue-toast插件，來幫助了解掌握插件的開發(fā)和使用。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了Vue.js?前端路由和異步組件介紹，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
ElementUI實現(xiàn)el-table列寬自適應(yīng)的代碼詳解
這篇文章給大家介紹了ElementUI實現(xiàn)el-table列寬自適應(yīng)的詳細步驟,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue發(fā)布到nginx下請求后臺404問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue過濾器（filter）實現(xiàn)及應(yīng)用場景詳解
在Vue中使用過濾器（Filters）來渲染數(shù)據(jù)是一種很有趣的方式,下面這篇文章主要給大家介紹了關(guān)于Vue過濾器（filter）實現(xiàn)及應(yīng)用場景的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了Vue-router路由該如何使用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實現(xiàn)頁面自動刷新的解決思路,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
Vue實現(xiàn)遠程獲取路由與頁面刷新導(dǎo)致404錯誤的解決
這篇文章主要介紹了Vue實現(xiàn)遠程獲取路由與頁面刷新導(dǎo)致404錯誤的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01