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
]