wangEditor自定义扩展菜单-多次缩进（Vue2）

---

wangEditor自定义扩展菜单

在图文发布类的系统中，经常有对应的管理后台来提供给用户上传文章内容。一般都是提供富文本框给用户编辑，我这里使用的是开源的富文本框编辑器-wangEditor，使用过程中发现wangEditor5.0以上的版本不支持多次缩进，即只能点击一次缩进，这样不能满足用户的使用需求，于是基于vue2的版本，查看它的使用教程结合其他一些文章的回答，扩展了一个自己的菜单，支持多次缩进。

---

一、封装editor组件

基于wangeditor提供的手册，封装editor组件

<template>
  <div class="ed">
    <div class="myEditor">
      <Toolbar class="tools" style="border-bottom: 1px solid #ccc;min-height: 40px;" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor style="height:500px" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="onChange" />

      <span class="wordNumber" v-if="changedMaxLen">{
   {
    TiLength }}/5000</span>
      <span class="wordNumber" v-else>{
   {
    TiLength }}/1000</span>
    </div>
    <p v-if="warnShow" class="warnText">
      {
   {
   changedMaxLen?'编辑内容不能超过5000个字!':'编辑内容不能超过1000个字!'}}
    </p>
  </div>

</template>

<script>
import {
    Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
   
  name: 'TextEditor',
  components: {
    Editor, Toolbar },
  props: {
   
    contents: {
   
      type: String,
      default: ''
    },
    changeMaxLen: {
   
      type: Boolean,
      default: true
    }

  },
  data() {
   
    return {
   
      editor: '',
      html: '',
      toolbarConfig: {
   },
      editorConfig: {
    placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
      TiLength: 0,
      warnShow: false,
      changedMaxLen: false,
    }
  },
  watch: {
   
    contents: {
   
      handler(newV) {
   
        if (this.editor) {
   
          this.editor.setHtml(newV)
        }
      }
    },
    changeMaxLen: {
   
      handler(newV) {
   
        this.changedMaxLen = newV === true ? true : false
      },
      immediate: true
    }
  },
  created() {
   
    console.log(this.editor, 'pppp', this.toolbarConfig);
  },
  methods: {
   
    onCreated(editor) {
   
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      editor.setHtml(this.contents)//把父组件传过来的内容写进当前的editor
      editor.getConfig().MENU_CONF['color'] = {
   
        colors: ['#000', '#333', '#666'],
      }
      editor.getConfig().MENU_CONF['fontFamily'] = {
   
        fontFamilyList: ['微软雅黑']
      }
      let that = this
      //上传图片
      editor.getConfig(that).MENU_CONF['uploadImage'] = {
   
        server: '/camppCmsApi/campp-cms-restapi/api/attachment',
        fieldName: 'multipartFile',
        // 单个文件的最大体积限制
        maxFileSize: 6 * 1024 * 1024, 
        // 最多可上传几个文件，默认为 100
        maxNumberOfFiles: 1,
        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ['image/*'],
        meta: {
   
          'Authorization': window.localStorage.getItem("auth_token"),
          'fileType': 'IMG'
        },
        headers: {
   
          'Authorization': 'Bearer ' + window.localStorage.getItem("auth_token"),
        },
        // metaWithUrl: true,
        // 单个文件上传成功之后
        onSuccess(file, res) {
             // JS 语法
        },
        customInsert(res, insertFn) {
   
          let url = res.data.fileUrl && res.data.fileUrl.indexOf('?') > -1 ? res.data.fileUrl.split('?')