快捷導航

vue-quill-editor富文本編輯器簡單使用方法

更新時間：2018年09月21日 14:56:22 作者：ABC

這篇文章主要為大家詳細介紹了vue-quill-editor富文本編輯器簡單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

文章剛開始先來介紹一下vue-quill-editor富文本編輯器的簡單使用，具體操作步驟如下：

安裝：

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(){//失去焦點事件
      },
      onEditorFocus(){//獲得焦點事件
      },
      onEditorChange(){//內(nèi)容改變事件
      }
    }
  }
</script>

看到了一個網(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:'', // 存儲富文本框內(nèi)容
    },
    editorOption: { // 定義富文本編輯器顯示
      modules:{
      toolbar:[
       ['bold','italic','underline','strike'], // 加粗、傾斜、下劃線、刪除線

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue el-table表格第一列序號與復選框hover切換方式
這篇文章主要介紹了Vue el-table表格第一列序號與復選框hover切換方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
關(guān)于vue中媒體查詢不起效的原因總結(jié)
這篇文章主要介紹了關(guān)于vue中媒體查詢不起效的原因總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue 父組件調(diào)用子組件方法及事件
這篇文章主要介紹了vue 父組件調(diào)用子組件方法及事件的相關(guān)資料，父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.怎么實現(xiàn)這樣一個功能呢？接下來跟隨腳本之家小編一起看看吧
2018-03-03
Vue中虛擬列表的原理與實現(xiàn)詳解
虛擬列表是一種技術(shù)，它只渲染用戶當前可見的列表項，而不是渲染整個列表，這篇文章主要來和大家聊聊虛擬列表的原理與實現(xiàn)，希望對大家有所幫助
2023-05-05
Vue實現(xiàn)點擊按鈕進行上下頁切換
這篇文章主要介紹了Vue實現(xiàn)點擊按鈕進行上下頁的切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
Vue項目新一代狀態(tài)管理工具Pinia的使用教程
pinia是一個輕量級的狀態(tài)管理庫,屬于 vue3 生態(tài)圈新的成員之一,下面這篇文章主要給大家介紹了關(guān)于Vue項目新一代狀態(tài)管理工具Pinia的使用教程,需要的朋友可以參考下
2022-11-11
vue中如何防止用戶頻繁點擊按鈕詳解
在后臺使用過程中經(jīng)常會因為按鈕重復點擊,而造成發(fā)送多次重復請求以下方法可以避免這種情況,下面這篇文章主要給大家介紹了關(guān)于vue中如何防止用戶頻繁點擊按鈕的相關(guān)資料,需要的朋友可以參考下
2022-09-09
解決elementui上傳組件el-upload無法第二次上傳問題
這篇文章主要介紹了解決elementui上傳組件el-upload無法第二次上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue實現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名)
Vue實現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue3實現(xiàn)多條件搜索功能的示例代碼
搜索功能在后臺管理頁面中非常常見，這篇文章就著重講一下vue3-admin-element框架中如何實現(xiàn)一個頂部多條件搜索功能，感興趣的小伙伴可以了解一下
2023-08-08