欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2018年08月17日 13:28:14   作者：譚少居然  
這篇文章主要介紹了vue富文本框（插入文本、圖片、視頻）的使用及問題小結(jié),需要的朋友可以參考下

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

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

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

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

使用在main.js引入相應(yīng)的樣式

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配置工具攔所以它的出事顯示就較為簡潔

如果需要上傳圖片或者視頻就需要對模塊里面對工具欄進(jìn)行改造重構(gòu)(使用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)整個富文本編輯器的工具欄沒有改變，還是只保留了幾個基本的富文本功能。

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

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ù)它的點(diǎn)擊來給他相應(yīng)的處理回應(yīng)，也可以為其重新定向事件，這里我這里給大家介紹重新定向事件

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

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

設(shè)置好相應(yīng)屬性值和事件

<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>

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

由于我是自己寫的上傳所以要插入到富文本內(nèi)部所以添加內(nèi)容的時候需要加入img標(biāo)簽，因?yàn)楦晃谋緝?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標(biāo)簽在富文本里面會失效，在這里我就選擇直接用iframe標(biāo)簽

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

總結(jié)

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

相關(guān)文章

最新評論