Vue-Quill-Editor在vue中自定義選擇視頻插入編輯文章中

vue-quill-editor 是 Vue 項目中使用的 富文本編輯器

1 引言

在實際應用開發中，在常見的管理後臺或者是多媒體管理後臺，多多少少都會有富文本編輯器，而在編輯富文本時，一般的一個需求就是在富文本中插入圖片或者視頻，本篇文章講述的就是在 vue 項目中，使用 Vue-Quill-Editor 編輯器在富文本中插入視頻。

官方的效果以下圖1所示 點擊這裏查看Vue-Quill-Editor官方效果

圖1

在實際應用開發中，官方提供的效果每每知足不了咱們的效果，而經過咱們自定義樣式後，達到以下的效果

圖2

2 一步步實現咱們上面的效果

在實際項目中，咱們有引用到 quill-editor 的地方，如這裏寫的

<quill-editor class="editer" ref="editer" v-model="dataForm.content" :options="editorOption" style="height: 500px;">

 </quill-editor>
複製代碼

在 vue 中 ref 用來給元素或者子組件 註冊引用信息，引用信息會註冊在父組件的 refs對象中，也就是說 咱們能夠經過 this.refs.editer 來獲取當前 quill-editor 的實例

在這裏 quill-editor 有一個配置信息 editorOption ，editorOption 是定義在 咱們的 data() 中

<script>
  ...
  export default {
   
    data() {
     
      var self2 = this;
      return {
            //顯示插入視頻連接彈框的標識
            videoUploadTag: false,
            //彈框插入的視頻連接記錄
            videoLink:"",
            //quill-editor 編輯器的配置
			editorOption: {
			          modules: {
			            toolbar: {
			              container: [
			                ...
			                ['image', 'video']
			              ],
			              handlers: {
			                  ...
			                'video': function(value) {
			                  self2.videoUploadTag = true;
			                }
			              }
			            }
			          }
			  },
        }
複製代碼

在上述代碼塊中，經過 toolbar 來配置 quill-editor 編輯器的菜單欄 ，如這裏配置的 ['image', 'video'] 在編輯器中以下顯示 圖3

經過在 handlers 配置 'video': function(value) 來自定義quill-editor 編輯器的菜單欄中的視頻圖標點擊事件，在這裏，當點擊菜單欄的視頻圖標時，這裏定義的方法監聽到點擊事件，而後將 標識 videoUploadTag 的值修改成 true,在頁面上顯示插入視頻連接地址的彈框

<!--videoUploadTag 默認是 false -->
    <!--因此這裏的上傳彈框是隱藏的 -->
    <!--當點擊編輯器菜單欄中的視頻圖標時，將videoUploadTag 修改成 true 在頁面上顯示出來插入視頻的彈框-->
    <div :visible.sync="videoUploadTag">
      <el-dialog width="50%" id="video_upload" style="margin-top: 1px" title="視頻上傳" :visible.sync="videoUploadTag" append-to-body>
        <el-tabs v-model="activeName" @tab-click="videoSelectTagClick" value="0">
          <el-tab-pane label="添加視頻連接" name="first">
            <el-input v-model="videoLink" placeholder="請輸入視頻連接" clearable></el-input>
            <el-button type="primary" size="small" style="margin: 20px 0px 0px 0px " @click="addVideoLink()">添加
            </el-button>


          </el-tab-pane>
          <el-tab-pane label="素材庫" name="second">請期待</el-tab-pane>

        </el-tabs>
      </el-dialog>
    </div>
複製代碼

在這裏使用到的 el-dialog、el-tabs、el-input 等等是 element ui框架點擊這裏查看element

當點擊 添加按鈕時會調用 addVideoLink() 方法 圖4

在代碼中 addVideoLink() 的定義以下

methods: {

      addVideoLink() {
        
        if (this.videoLink.length == 0) {
          alert('請輸入視頻連接');
        }
        //當編輯器中沒有輸入文本時，這裏獲取到的 range 爲 null
        var range = this.$refs.editer.quill.getSelection();
        //視頻插入在富文本中的位置
        var index = 0;
        if (range == null) {
          index = 0;
        } else {
          index = range.index;
        }
        //隱藏彈框
        this.videoUploadTag = false;
        //將視頻連接插入到當前的富文本當中
        this.$refs.editer.quill.insertEmbed(index, 'video', this.videoLink);



      },
}
複製代碼

最終咱們實現瞭如圖2中所示的效果。

---

完結