這篇文章將為大家詳細講解有關如何在vue中使用vue-quill-edit富文本編輯器組件，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

作為一家“創意+整合+營銷”的成都網站建設機構，我們在業內良好的客戶口碑。成都創新互聯公司提供從前期的網站品牌分析策劃、網站設計、成都網站建設、網站制作、創意表現、網頁制作、系統開發以及后續網站營銷運營等一系列服務，幫助企業打造創新的互聯網品牌經營模式與有效的網絡營銷方法,創造更大的價值。

一、安裝  cnpm install vue-quill-editor

二、引入

在main.js引入并注冊：

import VueQuillEditor from 'vue-quill-editor'
// require styles 引入樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

三、封裝組件

<template>
 <div class="quill_box">
 <quill-editor 
 v-model="content" 
 ref="myQuillEditor" 
 :options="editorOption" 
 @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
 @change="onEditorChange($event)">
 </quill-editor>
 </div>
 
</template> 
<script>
import Bus from "../../assets/utils/eventBus";

export default {
 data() {
 return {
 content:'',
 editorOption: {
 placeholder: "請編輯內容",
 modules: {
  toolbar: [
  ["bold", "italic", "underline", "strike"],
  ["blockquote", "code-block"],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }],
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: ["small", false, "large", "huge"] }],
  [{ font: [] }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  [ "image"]
  ]
 }
 }
 };
 },
 props:[
 'contentDefault'
 ],
 watch:{
 contentDefault:function(){
 this.content = this.contentDefault;
 }
 },
 mounted:function(){
 this.content = this.contentDefault;
 },
 methods: {
 onEditorBlur() {
 //失去焦點事件
 // console.log('失去焦點');
 },
 onEditorFocus() {
 //獲得焦點事件
 // console.log('獲得焦點事件');
 },
 onEditorChange() {
 //內容改變事件
 // console.log('內容改變事件');
 Bus.$emit('getEditorCode',this.content)
 }
 }
};
</script> 

<style lang="less">
 .quill_box{
 .ql-toolbar.ql-snow{border-color:#dcdfe6;}
 .ql-container{height:200px !important;border-color:#dcdfe6;}
 .ql-snow .ql-picker-label::before {
 position: relative;
 top: -10px;
 }
 .ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg{position: relative;top:-6px;}
 }
</style>

四、引入使用

<my-editor :contentDefault="contentDefault"></my-editor>
components:{
 myEditor:myEditorComponent
 },

關于如何在vue中使用vue-quill-edit富文本編輯器組件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

本文名稱：如何在vue中使用vue-quill-edit富文本編輯器組件-創新互聯
分享URL：http://www.yijiale78.com/article4/icdoe.html

成都網站建設公司_創新互聯，為您提供移動網站建設、服務器托管、品牌網站建設、網站收錄、電子商務、品牌網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯