富文本插件（v2）

在非框架项目中使用富文本编辑器，需要单独下载包，但是部分富文本编辑器并不是兼容的，且无法复制表格，通过测试，此版本富文本编辑器基本满足使用要求，留作备份

1、组件代码

<template>
  <div class="activeConfig">
    <div class="activeConfig-container">
      <Editor id="tinymce" v-model="localTinymceHtml" :init="init()" />
    </div>
  </div>
</template>

<script>
// 引入组件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'

// 扩展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/wordcount'

// import { uploadImgage } from '@/api/activeConfig'
// import { uploadFileApi } from '@/api/gas/gas-file/index.js';

export default {
  name: 'ActiveConfig',
  components: { Editor },
  props: {
    tinymceHtml: String // tinymce的绑定值
  },
  data() {
    return {
      // tinymce的绑定值
      localTinymceHtml: ''
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    init() {
      let _this = this
      const editorInit = {
        selector: '#tinymce',
        language_url: '/tinymce/langs/zh_CN.js',
        paste_data_images: true,
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 400,

        plugins: 'link image code table wordcount ', // 插件
        font_formats:
          '微软雅黑="微软雅黑";宋体=simsun;仿宋体=FangSong;黑体=SimHei;Arial=arial,helvetica;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;楷体=楷体,楷体_GB2312',
        toolbar:
          'fontselect fontsizeselect bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify |  bullist numlist outdent indent | formatselect | bullist numlist | outdent indent blockquote | undo redo | removeformat | importword',

        // 此处为图片上传处理函数
        // images_upload_handler: this.handleImageUpload,
        importword_filter: function (result, insert, message) {
          // 自定义操作部分
          insert(result) // 回插函数
        },
        statusbar: false, // 是否隐藏底部的状态栏
        menubar: false, // 是否隐藏最上方的菜单
        branding: false // 是否禁用“Powered by TinyMCE”,
      }

      return editorInit
    },

    getImageSize(str) {
      //此处str为args.content，以下通过正则获取img标签的src属性
      let urlArr = str.match(/src=[\'\"]?([^\'\"]*)[\'\"]?/gi)
      let promiseArr = []
      //此处将src=删除
      urlArr = urlArr.map((item) => {
        return item.slice(5, -1)
      })
      //此处为promiseArr添加img的异步onload事件

      for (let i = 0; i < urlArr.length; i++) {
        let img = new Image()
        img.src = urlArr[i]
        promiseArr.push(
          new Promise((resolve) => {
            //如果不是用onload 立马获取的宽高为空
            //如果想提高效率可以设置定时器，定时获取宽高，比等待onload要快很多
            img.onload = function () {
              sizeArr.push({
                width: img.width,
                height: img.height,
                id: id + i
              })
              resolve()
            }
          })
        )
      }
      //当所有图片都加载好之后把id replace为宽高就大功告成了
      Promise.all(promiseArr).then(() => {
        sizeArr.forEach((item) => {

          this.value = this.value.replace(
            `id="${item.id}"`,
            `height=${item.height}
                width=${item.width}`
          )
        })
      })
    },

    handleImageUpload(blobInfo, success, failure) {
      // 将图片上传到服务器.
      let formdata = new FormData()
      formdata.append('files', blobInfo.blob())
      uploadFileApi(formdata)
        .then((result) => {
          success(result[0].contBase64)
        })
        .catch((e) => {})
    },

    // 移动光标到最后
    moveCursorToLast(editor) {
      editor.selection.select(editor.getBody(), true)
      editor.selection.collapse(false)
    },

    // // 图片上传
    // handleImgUpload(blobInfo, success, failure) {},

    paste_preprocess(args) {
      //作用是给所有的img一个不会重复的id
      let id = Date.parse(new Date())
      let sizeArr = [] //存储所有图片的尺寸信息,格式:[{id:123,width:234,height:123}]
      let lastIndex = 0 //存储args.content查询的下标
      let flag = false //判断有没有图片
      //此处给所有img加上id
      for (let i = 0; args.content.indexOf('<img', lastIndex) != -1; i++) {
        flag = true
        args.content = args.content.replace('<img', `<img id=${id + i}`)
        i++
        lastIndex = args.content.indexOf('<img', lastIndex) + 1
      }
      // 如果存在图片就执行获取图片尺寸的方法;
      if (flag) {
        that.getImageSize(args.content)
      }
    }
  },

  watch: {
    // 监听父组件传递的HTML值
    tinymceHtml: {
      handler(val) {
        this.localTinymceHtml = val
      },
      immediate: true // 立即触发监听器
    },

    // 监听HTML是否发生变化
    localTinymceHtml(val) {
      // 调取父组件的方法 传递值
      this.$emit('input', val)
    }
  }
}
</script>

2、父组件使用

  <Editor :tinymceHtml="form.content" @input="getTinymceHtml"></Editor>

import Editor from '@/components/myEditor'

    // 获取富文本编辑器的内容
    getTinymceHtml(v) {
      this.form.content = v
      if (v) {
        this.$refs.form.clearValidate('content')
      }
    },

3、需要其他字体

      font_formats:
          '新罗马字体=Times New Roman;微软雅黑="微软雅黑";仿宋_GB2312=仿宋,仿宋_GB2312;宋体=simsun;仿宋体=FangSong;黑体=SimHei;Arial=arial,helvetica;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;楷体GB2312=楷体,楷体_GB2312;方正小标宋GBK=方正小标宋简体',

在editorInit中的font_formats属性修改，常见字体基本都可以显示，但是需要特殊字体的话，需要自己下载字体包，在C:\Windows\Fonts路径下可看到本机已有字体，新的字体包导入，即可使用