vue如何安裝使用Quill富文本編輯器
本文為大家記錄了vue中安裝使用Quill富文本編輯器的具體方法，供大家參考，具體內(nèi)容如下
1、安裝依賴
npm install vue-quill-editor --save
注：我在已有的vue項(xiàng)目中（含有已安裝的依賴，即node_modules文件夾）直接進(jìn)行安裝并不成功，報(bào)錯(cuò)，沒有截圖，但是我沒記錯(cuò)的話是顯示"項(xiàng)目名\node_modules\cliui\node_modules\wordwrap"這個(gè)沒有。所以我把項(xiàng)目下的node_modules文件刪除，然后直接安裝quill依賴（執(zhí)行npm install vue-quill-editor --save）。然后npm run dev 運(yùn)行項(xiàng)目，不影響之前vue項(xiàng)目的使用和運(yùn)行，quill的富文本編輯器也可以用了。
2、使用
（1）在“項(xiàng)目名\src\main.js”引入
import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor'
//一定要引入這三個(gè)css，不然文本編輯器會(huì)出現(xiàn)不規(guī)則黑白幾何圖形 //這三個(gè)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){//失去焦點(diǎn)事件
},
onEditorFocus(editor){//獲得焦點(diǎn)事件
},
onEditorChange({editor,html,text}){//編輯器文本發(fā)生變化
//this.content可以實(shí)時(shí)獲取到當(dāng)前編輯器內(nèi)的文本內(nèi)容
console.log(this.content);
}
}
}
</script>
v-model 可以不使用，并不是Quill編輯器自帶的，是我項(xiàng)目中使用自己加的。
這樣引入后可以得到一個(gè)這樣的編輯器。
如果需要改變文本域部分的高度，如下：
<style>
.quill-editor {
height: 350px;
}
</style>
Quill的自定義工具欄、字體等，請(qǐng)點(diǎn)擊：vue中Quill富文本編輯器的使用
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
el-table-column疊加el-popover使用示例小結(jié)
el-table-column有一列展示多個(gè)tag信息,實(shí)現(xiàn)點(diǎn)擊tag展示tag信息以及tag對(duì)應(yīng)的詳細(xì)信息,本文通過示例代碼介紹el-table-column疊加el-popover使用示例小結(jié),感興趣的朋友跟隨小編一起看看吧2024-04-04
關(guān)于vue 結(jié)合原生js 解決echarts resize問題
這篇文章主要介紹了關(guān)于vue 結(jié)合原生js 解決echarts resize問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了詳解Vue 單文件組件的三種寫法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
使用Vue如何寫一個(gè)雙向數(shù)據(jù)綁定(面試常見)
這篇文章主要介紹了使用Vue如何寫一個(gè)雙向數(shù)據(jù)綁定，在前端面試過程中經(jīng)常會(huì)問到，文中主要實(shí)現(xiàn)v-model，v-bind 和v-click三個(gè)命令，其他命令也可以自行補(bǔ)充。需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue自定義指令directive的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue使用js-file-download插件下載文件亂碼的解決
這篇文章主要介紹了vue使用js-file-download插件下載文件亂碼的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue實(shí)現(xiàn)開關(guān)按鈕拖拽效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)開關(guān)按鈕拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)
這篇文章主要介紹了Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue中關(guān)于redirect(重定向)初學(xué)者的坑
這篇文章主要介紹了vue中關(guān)于redirect(重定向)初學(xué)者的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08