如何在vue中使用vue-quill-editor富文本編輯器-創(chuàng)新互聯(lián)

本篇文章為大家展示了如何在vue中使用vue-quill-editor富文本編輯器，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的古藺網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

安裝：

npm install vue-quill-editor --save

main.js：

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

在需要使用的地方：

<template>
   <quill-editor 
   v-model="content" 
   ref="myQuillEditor" 
   :options="editorOption" 
   @blur="onEditorBlur($event)" 
   @focus="onEditorFocus($event)"
   @change="onEditorChange($event)">
  </quill-editor>
</template> 
<script>
  import { quillEditor } from 'vue-quill-editor'
  export default{
    data(){
      return {
        content:null,
        editorOption:{}  //配置
      }
    },
    methods:{
      onEditorBlur(){//失去焦點(diǎn)事件
      },
      onEditorFocus(){//獲得焦點(diǎn)事件
      },
      onEditorChange(){//內(nèi)容改變事件
      }
    }
  }
</script>

看到了一個(gè)網(wǎng)友分享的如何禁用vue-quill-editor 富文本編輯器，分享給大家，也謝謝原作者的分享。

vue：

<el-form-item label="描述：" :label-width="formLabelWidth">
  <quill-editor
   v-model="form.content"
   ref="content"
   :options="editorOption"
   @blur="onEditorBlur($event)" 
   @focus="onEditorFocus($event)"
   @change="onContentChange($event)"
   @ready="onEditorReady($event)">
  </quill-editor>
</el-form-item>

js：

export default {
  data() {
    form: {
      content:'', // 存儲(chǔ)富文本框內(nèi)容
    },
    editorOption: { // 定義富文本編輯器顯示
      modules:{
      toolbar:[
       ['bold','italic','underline','strike'], // 加粗、傾斜、下劃線、刪除線

       [{'header':1},{'header':2}], // 標(biāo)題一、標(biāo)題二
       [{'list':'ordered'},{'list':'bullet'}], // 列表

       [{'color':[]},{'background':[]}], // 字體顏色、背景顏色
      ]
     }
    }
  },
  methods: {
    onEditorReady(){ // 富文本準(zhǔn)備時(shí)的事件

    },
    onEditorFocus(val,editor){ // 富文本獲得焦點(diǎn)時(shí)的事件
      console.log(val); // 富文本獲得焦點(diǎn)時(shí)的內(nèi)容
      editor.enable(false); // 在獲取焦點(diǎn)的時(shí)候禁用
    },
    onEditorBlur(val){ // 富文本失去焦點(diǎn)時(shí)的事件
      console.log(val); // 富文本失去焦點(diǎn)時(shí)的內(nèi)容
    },
    onContentChange(val){ // 富文本內(nèi)容改變時(shí)的事件
      console.log(val); // 富文本改變時(shí)的內(nèi)容
    }
  }
}

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

上述內(nèi)容就是如何在vue中使用vue-quill-editor富文本編輯器，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：如何在vue中使用vue-quill-editor富文本編輯器-創(chuàng)新互聯(lián)
URL地址：http://bm7419.com/article46/ddjehg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、建站公司、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、用戶(hù)體驗(yàn)

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

猜你還喜歡下面的內(nèi)容