vue富文本框（插入文本、圖片、視頻）的使用及問題小結

更新時間：2018年08月17日 13:28:14 作者：譚少居然

這篇文章主要介紹了vue富文本框（插入文本、圖片、視頻）的使用及問題小結,需要的朋友可以參考下

今天在vue里面插入富文本遇到了一些小坑在這里提供給大家用于參考，如有錯誤，望多加指正。

我這里使用的是Element-ui的上傳圖片組件

首先引入Element-ui(這個我就不作贅述了，詳情參考element中文官網(wǎng))

在引入富文本組件vue-quill-editor

使用在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'
Vue.use(VueQuillEditor);

現(xiàn)在就可以在vue中使用富文本

<template>
<!--富文本編輯器-->
  <el-form-item label="內(nèi)容" :label-width="formLabelWidth">
   <quill-editor v-model="value" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)">
   </quill-editor>
  </el-form-item>
</template>
<script>
export default {
 data() {
  return {
        value:'',
  editorOption: {
   placeholder: '請輸入院校簡介',
   theme: 'snow',
   modules: {}
  }
      },
    methods: {
      onEditorChange() {
  console.log(this.value)
  }
    }
}
</script>

這里需要注意的是editorOption是必須要配置的

其樣式由于沒有在modules配置工具攔所以它的出事顯示就較為簡潔

如果需要上傳圖片或者視頻就需要對模塊里面對工具欄進行改造重構(使用handlers)

modules: {
   toolbar: {
    handlers: {
                container: toolbarOptions, // 工具欄
    'image': function(value) {
     if(value) {
     alert(1)
     } else {
     this.quill.format('image', false);
     }
    },
    'video': function(value) {
     if(value) {
     alert(2)
     } else {
     this.quill.format('image', false);
     }
    },
    }
   }
   }

配置好了過后會發(fā)現(xiàn)整個富文本編輯器的工具欄沒有改變，還是只保留了幾個基本的富文本功能。

這個是因為handlers是用來定義自定義程序的，而添加自定義處理程序就會覆蓋它本省的工具欄和主體行為所以我們還要再自行配置下自己需要的工具欄，所有功能的配置如下，大家也可以按需配置

const toolbarOptions = [
 ['bold', 'italic', 'underline', 'strike'], // toggled buttons
 ['blockquote', 'code-block'],
 [{
  'header': 1
 }, {
  'header': 2
 }], // custom button values
 [{
  'list': 'ordered'
 }, {
  'list': 'bullet'
 }],
 [{
  'script': 'sub'
 }, {
  'script': 'super'
 }], // superscript/subscript
 [{
  'indent': '-1'
 }, {
  'indent': '+1'
 }], // outdent/indent
 [{
  'direction': 'rtl'
 }], // text direction
 [{
  'size': ['small', false, 'large', 'huge']
 }], // custom dropdown
 [{
  'header': [1, 2, 3, 4, 5, 6, false]
 }],
 [{
  'color': []
 }, {
  'background': []
 }], // dropdown with defaults from theme
 [{
  'font': []
 }],
 [{
  'align': []
 }],
 ['link', 'image', 'video'],
 ['clean'] // remove formatting button
 ]

此時的文本工具就會豐富了

這樣它的工具欄就會有上傳圖片和視頻的接口，然后你就可以在工具攔的配置里的image和video里配置上傳圖片或視頻，可以根據(jù)它的點擊來給他相應的處理回應，也可以為其重新定向事件，這里我這里給大家介紹重新定向事件

首先定義一個上傳組件，我這里用的是自己寫好的上傳組件

<div class='avatar-uploader'>
 <myUp v-on:getImgUrl='AddInputUrl'></myUp>
</div>

設置好相應屬性值和事件

<script>
import myUp from '@/page/test' //上傳組件
  export default {
    data() {
      return { 
        value:'',          
        editorOption: {
   placeholder: '請輸入院校簡介',
   theme: 'snow', // or 'bubble'
   modules: {
   toolbar: {
    container: toolbarOptions, // 工具欄
    handlers: {
    'image': function(value){
     if(value) {
//     console.log(this.serverUrl)
     document.querySelector('.avatar-uploader').click()
//                alert(1)
     } else {
     this.quill.format('image', false);
     }
    },
    'video': function(value) {
     if(value) {
     alert(2)
     } else {
     this.quill.format('image', false);
     }
    },
    }
   }
   }
  }, 
      }
    },
    methods: {
      onEditorChange() {
  console.log(this.value)
  var conten = this.value
  this.$emit('getText',conten)
  }
    }
  }
</script>

這里需要注意的是如果想直接實現(xiàn)上傳的話就需要在工具欄設置點擊圖片上傳的時候用指針函數(shù)將this鎖定再做其他操作

由于我是自己寫的上傳所以要插入到富文本內(nèi)部所以添加內(nèi)容的時候需要加入img標簽，因為富文本內(nèi)部是支持圖片的解析的

AddInputUrl(data) {
  var a = data
  var tp = a.length
  var imghz = a.slice(tp - 4, tp)
  var src = 'src="' + a + '"'
  var bq = "<img " + src + " alt='' />"
  this.value += bq
}

做到這里一個支持上傳圖片的富文本就做好了，再來說下視頻，由于引入的富文本絕大多數(shù)都是沒有內(nèi)置的播放器所以video標簽在富文本里面會失效，在這里我就選擇直接用iframe標簽

var bq='<iframe frameborder="0" width="100%" height="40%" '+ src+' allowfullscreen></iframe>'
this.value += bq

總結

以上所述是小編給大家介紹的vue富文本框（插入文本、圖片、視頻）的使用及問題小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

在vue項目中使用Nprogress.js進度條的方法
NProgress.js是輕量級的進度條組件，使用簡便，可以很方便集成到單頁面應用中。這篇文章主要介紹了在vue項目中使用Nprogress.js進度條的方法,需要的朋友可以參考下
2018-01-01
vue2 el-checkbox-group復選框無法選中問題及解決
這篇文章主要介紹了vue2 el-checkbox-group復選框無法選中問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-05-05
vue彈窗組件使用方法
彈窗是一個項目必備的復用利器，這篇文章主要介紹了vue彈窗組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-04-04
vue跨窗口通信之新窗口調用父窗口方法實例
由于開發(fā)需要,我需要在登錄成功請求成功后,調用父窗口的一個點擊事件方法,這篇文章主要給大家介紹了關于vue跨窗口通信之新窗口調用父窗口的相關資料,需要的朋友可以參考下
2023-01-01
vue可拖拽的瀑布流布局組件實現(xiàn)詳解
這篇文章主要為大家介紹了vue的可拖拽的瀑布流布局組件有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
Vue3全局組件注冊的實現(xiàn)代碼
在這篇文章中,我們將學習一下 Vue3 的全局組件注冊是如何實現(xiàn)的,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2023-12-12
vue上傳圖片組件編寫代碼
這篇文章主要為大家詳細介紹了vue上傳圖片組件的編寫代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
vue項目中頁面跳轉傳參的方法總結
在Vue項目中,你可以使用路由（vue-router）來實現(xiàn)頁面跳轉并傳遞參數(shù),這篇文章主要為大家整理了一些常用的方法,感興趣的小伙伴可以學習一下
2023-11-11
一文帶你了解vue雙向數(shù)據(jù)綁定
v-model?是?Vue.js?中一個重要的指令,它提供了一種簡潔的方式來實現(xiàn)雙向數(shù)據(jù)綁定,下面小編就來帶大家深入了解下vue雙向數(shù)據(jù)綁定的原理與應用吧
2023-09-09
解決vue3項目打包后部署后某些靜態(tài)資源圖片不加載問題
這篇文章主要給大家介紹了如何解決vue3項目打包后部署后某些靜態(tài)資源圖片不加載問題,文中通過圖文結合的方式講解的非常詳細,有需要的朋友可以參考下
2024-05-05