vue项目开发中用到的TinyMCE富文本编辑器整理

页面效果展示

页面组件应用

<Tinymce
	ref="editor"
    v-model="goodsForm.goods.description"
    :height="300"
/>

组件结构

index.vue文件

<template>
  <div :class="{fullscreen:fullscreen}" :style="{width:containerWidth}" class="tinymce-container">
    <textarea :id="tinymceId" class="tinymce-textarea" />
  </div>
</template>

<script>
/**
 * docs:
 * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
 */
import plugins from './plugins';
import toolbar from './toolbar';
import load from './dynamicLoadScript';
// import { updateLoad } from '@/api/communityOssApi';
import {
    uploadFile } from '@/api/goodsManage';

// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js';
const imgSrc = '/community/manage/cms/dowloadImage?filePath=';
export default {
   
  name: 'Tinymce',
  components: {
    },
  props: {
   
    id: {
   
      type: String,
      default: function() {
   
        return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '');
      }
    },
    value: {
   
      type: String,
      default: ''
    },
    toolbar: {
   
      type: Array,
      required: false,
      default() {
   
        return [];
      }
    },
    menubar: {
   
      type: String,
      default: 'file edit insert view format table'
    },
    height: {
   
      type: [Number, String],
      required: false,
      default: 360
    },
    width: {
   
      type: [Number, String],
      required: false,
      default: 'auto'
    }
  },
  data() {
   
    return {
   
      hasChange: false,
      hasInit: false,
      tinymceId: this.id,
      fullscreen: false,
      languageTypeList: {
   
        'en': 'en',
        'zh': 'zh_CN',
        'es': 'es_MX',