vue如何安裝使用Quill富文本編輯器

本文為大家記錄了vue中安裝使用Quill富文本編輯器的具體方法，供大家參考，具體內(nèi)容如下

成都創(chuàng)新互聯(lián)：公司2013年成立為各行業(yè)開(kāi)拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為上千多家公司企業(yè)提供了專業(yè)的成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站推廣服務(wù)， 按需定制開(kāi)發(fā)由設(shè)計(jì)師親自精心設(shè)計(jì)，設(shè)計(jì)的效果完全按照客戶的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺(jué)效果，策劃師分析客戶的同行競(jìng)爭(zhēng)對(duì)手，根據(jù)客戶的實(shí)際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領(lǐng)先地位的。

1、安裝依賴

npm install vue-quill-editor --save

注：我在已有的vue項(xiàng)目中（含有已安裝的依賴，即node_modules文件夾）直接進(jìn)行安裝并不成功，報(bào)錯(cuò)，沒(méi)有截圖，但是我沒(méi)記錯(cuò)的話是顯示"項(xiàng)目名\node_modules\cliui\node_modules\wordwrap"這個(gè)沒(méi)有。所以我把項(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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

標(biāo)題名稱：vue如何安裝使用Quill富文本編輯器
轉(zhuǎn)載來(lái)源：http://muchs.cn/article48/ihccep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、建站公司、定制開(kāi)發(fā)、網(wǎng)站排名、微信公眾號(hào)、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)