VUE 富文本(vue2-editor)

1. 概述

1.1 說明

在項目中，會需要使用富文本編輯器去編輯或保存文檔、圖片、視頻等信息去描述某一個物品的詳細信息與介紹。可使用vue的圖文編輯vue2-editor去處理這些事情。

1.2 vue2-editor安裝

 　　npm install vue2-editor --save 安裝至項目中

1.3 富文本使用

　　在使用vue2-editor的vue頁面文件中，需要引入import { VueEditor } from 'vue2-editor' ，然后在components中進行注冊圖文編輯，然后對圖文編輯器組件進行配置處理。

<template>
  <div>
    <vue2-editor v-model="htmlStr" :editorToolbar="customToolbar"></vue2-editor>
  </div>
</template>
<script>
  import {VueEditor} from 'vue2-editor'
  export default {
    name: 'Vue2Editor',
    data() {
      return {
        htmlStr: '',
        customToolbar: [
          ['bold', 'italic', 'underline'],
          [{'list': 'ordered'}, {'list': 'bullet'}],
          [{'indent': '-""'}, {'indent': '+""'}],
          [{'header': '2'}], ['clean'], [{'align': 'center'}, {'align': 'justify'}, {'align': 'right'}]
        ]
      }
    },
    methods: {},
  }
</script>
<style>
</style>

　　vue2-editor相關配置描述：

　　　　

　　vue2-editor事件描述：

 　　　　

 　　vue2-editor工具欄描述：

　　　　

 

2. 代碼

2.1 代碼示例

　　做成一個公用組件在需要使用的地方進行引入調用

<template>
  <div>
    <vue2-editor v-model="strHtml" useCustomImageHandler @imageAdded="handleImageAdded" :id='id' :editorToolbar="customToolbar" :disabled='!!disabled'></vue2-editor>
  </div>
</template>
<script>
  import { VueEditor } from 'vue2-editor'
  import {defaultBar} from './editorToolBar.js'
  export default {
    name: 'Vue2Editor',
    props: ['content','disabled'],
    data() {
      return {
        strHtml: this.content,
        uploaderUrl: 'https://up.qbox.me',//上傳路徑放至七牛
        imgDomain: 'http://xxx.xxx.net/',//文件所在域名
        id: this.uniqueId(),
        customToolbar:defaultBar
      }
    },
    components: {
      'vue2-editor': VueEditor
    },
    watch: {
      strHtml(newval) {
        //實時監控編輯器內容變化，使父組件能夠實時獲取輸入內容
        this.$emit('change', newval);
      },
      content(newval) {
        //父組件實時更新數據流向子組件
        this.strHtml = newval
      }
    },
    methods: {
      handleImageAdded(file, Editor, cursorLocation, resetUploader) {
        /**
         * 上傳圖片操作(上傳至七牛)
         let formData = new FormData();
         let type = file.name.split('.');
         if (type.length < 2) {
        return false
      }
         type = type.pop();
         //獲取七牛驗證token
         this.getToken(type).then(res => {
        formData.append('file', file);
        formData.append('key', res.key);
        formData.append('token', res.token);
        this.$http({
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          url: this.uploaderUrl
        }).then(result => {
          let url = this.imgDomain + result.data.key // 獲取URL
          if(type.indexOf('png') > -1 || type.indexOf('jpg') > -1 || type.indexOf('jpeg') > -1){
            Editor.insertEmbed(cursorLocation, 'image', url);//圖片
          } else {
            Editor.insertEmbed(cursorLocation, 'video', url);//視頻
          }
          resetUploader()
        }).catch(erro => {
          console.log(erro)
        })
      })
         * **/
        //把獲取到的圖片url 插入到鼠標所在位置 回顯圖片
        Editor.insertEmbed(cursorLocation, 'image', url);
        resetUploader();
      },
      uniqueId() {
        let rdNum = ('' + Date.now()).slice(-8);
        let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_';
        let len = str.length;
        let res = '';
        for (let i = 0; i < 8; i++) {
          res += str[Math.floor(Math.random() * len)];
        }
        return res + rdNum;
      },
    },
  }
</script>

2.2 editorToolbar配置

export let defaultBar =  [
  [{ 'header': [false, 1, 2, 3, 4, 5, 6, ] }],
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  [{'align': ['','center','right','justify']}],
  ['blockquote'],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  ['link', 'image'],
  ['clean'],                                     // remove formatting button
]