关于vue.js:vue26-实现tinymce5富文本编辑器以及图片上传

1. 装置 tinymce
   npm install tinymce -S
   npm install @tinymce/tinymce-vue -S

1. 下载中文语言包

地址：https://www.tiny.cloud/get-ti…
下载选中的中文包

下载完之后在我的项目里新建 public 文件夹

1）在 public 目录下新建 tinymce 文件夹，并将下载的语言包解压到该目录下

2）在 node_modules 外面找到 tinymce，将 skins 目录复制到 public/tinymce 外面，目录如下：

3.tinymce 应用
1）封装组件

<template>
    <div class="tinymce-editor">
        <Editor
                :id="tinymceId"
                :init="init"
                :disabled="disabled"
                v-model="myValue"
                @onClick="onClick"
        ></Editor>
    </div>
</template>

<script>
  import axios from "axios";
  import tinymce from 'tinymce/tinymce' //tinymce 默认 hidden，不引入不显示
  import Editor from '@tinymce/tinymce-vue'// 编辑器引入
  import 'tinymce/themes/silver/theme'// 编辑器主题
  import 'tinymce/icons/default'  // 引入编辑器图标 icon，不引入则不显示对应图标
  // 引入编辑器插件（根本收费插件都在这儿了）import 'tinymce/plugins/advlist'  // 高级列表
  import 'tinymce/plugins/autolink'  // 主动链接
  import 'tinymce/plugins/link'  // 超链接
  import 'tinymce/plugins/image'  // 插入编辑图片
  import 'tinymce/plugins/lists' // 列表插件
  import 'tinymce/plugins/charmap'  // 特殊字符
  import 'tinymce/plugins/media' // 插入编辑媒体
  import 'tinymce/plugins/wordcount'// 字数统计
  import Cookies from "js-cookie";

  const fonts = [
    "宋体 = 宋体",
    "微软雅黑 = 微软雅黑",
    "新宋体 = 新宋体",
    "黑体 = 黑体",
    "楷体 = 楷体",
    "隶书 = 隶书",
    "Courier New=courier new,courier",
    "AkrutiKndPadmini=Akpdmi-n",
    "Andale Mono=andale mono,times",
    "Arial=arial,helvetica,sans-serif",
    "Arial Black=arial black,avant garde",
    "Book Antiqua=book antiqua,palatino",
    "Comic Sans MS=comic sans ms,sans-serif",
    "Courier New=courier new,courier",
    "Georgia=georgia,palatino",
    "Helvetica=helvetica",
    "Impact=impact,chicago",
    "Symbol=symbol",
    "Tahoma=tahoma,arial,helvetica,sans-serif",
    "Terminal=terminal,monaco",
    "Times New Roman=times new roman,times",
    "Trebuchet MS=trebuchet ms,geneva",
    "Verdana=verdana,geneva",
    "Webdings=webdings",
    "Wingdings=wingdings,zapf dingbats"
  ];
  export default {
    components: {Editor},
    props: {
      // 内容
      value: {
        type: String,
        default: ''
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      // 插件
      plugins: {type: [String, Array],
        default: 'advlist autolink link image lists charmap  media wordcount'
      },
      // 工具栏
      toolbar: {type: [String, Array],
        default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table'
      }
    },
    data() {
      return {
        // 初始化配置
        tinymceId: 'tinymce',
        myValue :this.value,
        init: {
          selector: '#tinymce',
          language_url: '/tinymce/langs/zh_CN.js',// 汉化门路是自定义的，个别放在 public 或 static 外面
          language: 'zh_CN',
          skin_url: '/tinymce/skins/ui/oxide',// 皮肤
          plugins: this.plugins,// 插件
          // 工具栏
          toolbar: this.toolbar,
          toolbar_location: '/',
          fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',  // 字体大小
          font_formats: fonts.join(";"),

          height: 500,// 高度
          placeholder: '在这里输出文字',

          branding: false,// 暗藏右下角技术支持
          // 图片上传
          images_upload_handler: function (blobInfo, success, failure) {
            // 文件上传的 formData 传递，遗记为什么要用这个了
            const isAccord = blobInfo.blob().type === 'image/jpeg' || blobInfo.blob().type === 'image/png' || blobInfo.blob().type === 'image/GIF' || blobInfo.blob().type === 'image/jpg' || blobInfo.blob().type === 'image/BMP';
            if (blobInfo.blob().size/1024/1024>2) {failure("上传失败，图片大小请管制在 2M 以内")
            } else if (blobInfo.blob().type == isAccord) {failure('图片格式谬误')
            } else {let formData = new FormData()
              // 服务端接管文件的参数名，文件数据，文件名
              formData.append('file', blobInfo.blob(), blobInfo.filename())
              axios({
                method: 'POST',
                headers: {Authorization: 'bearer' + Cookies.get('access_token')
                },
                // 这里是你的上传地址
                url:  window.SITE_CONFIG['apiURL'] + '/oss/file/upload',
                data: formData,
              }).then((res) => {console.log(res)
                // 这里返回的是你图片的地址
                success(res.data.data.url)
              }).catch(() => {failure('上传失败')
              })
            }
          }
        }
      }
    },
    watch: {
      // 监听内容变动
      value(newValue) {this.myValue = (newValue == null ? '' : newValue)
      },
      myValue (newValue) {if(this.triggerChange){this.$emit('change', newValue)
        }else{this.$emit('input', newValue)
        }
      }
    },
    mounted () {tinymce.init({})
      // console.log(this.toolbar,'======')
    },
    methods: {onClick(e) {this.$emit('onClick', e, tinymce)
      },
      // 能够增加一些本人的自定义事件，如清空内容
      clear() {this.myValue = ''}
    }
  }
</script>

注：当遇到报错信息 Uncaught SyntaxError: Unexpected token ‘<‘ 时，查看引入的 语言包 和 编辑器主题 的门路是否正确
语言包的门路引入不须要加 public/static 文件夹
4. 组件注册及应用

1)在 main.js 中全局注册

import TEditor from '@/views/components/TEditor.vue'
Vue.component('TinymceEditor',TEditor)

2)在页面应用

<el-form-item label="商品详情：" prop="detail">
    <TinymceEditor v-model="dataForm.detail" ></TinymceEditor>
</el-form-item>

效果图：

到此富文本编辑器就完满实现啦！如果须要其它插件可去官网查问。。。官网地址：http://tinymce.ax-z.cn