vue项目集成富文本编辑器（tinymce）

中文文档：http://tinymce.ax-z.cn/
官网及文档：https://www.tiny.cloud/
中文包下载地址：https://www.tiny.cloud/get-tiny/language-packages/

效果图如下所示（vue-cli3.x）：

1. 安装所需依赖

npm install tinymce@5.8.2
npm install @tinymce/tinymce-vue@3.0.1

2. 从上述链接下载中文包
   
3. 所需静态资源整合
   在public文件夹下新建tinymce文件夹；
   将下载的中文包解压并复制此文件夹
   在node_modules/tinymce中找到skins文件夹，复制到public/tinymce里；
   
4. 封装tinymce为公共组件，并且全局注册(此处省去注册步骤)

<template>
  <div class="editor_wrap">
    <editor v-model="content" :init="init" :disabled="disabled"></editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/icons/default/icons';
import 'tinymce/themes/silver';
import 'tinymce/plugins/image';
import 'tinymce/plugins/media';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/code';
import 'tinymce/plugins/link';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/codesample';
import 'tinymce/plugins/hr';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/textpattern';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/directionality';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/template';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/nonbreaking';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/imagetools';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/print';

export default {
    
    
  components: {
    
    
    Editor,
  },
  props: {
    
    
    value: {
    
    
      type: String,
      default: '',
    },
    disabled: {
    
    
      type: Boolean,
      default: false,
    },
    plugins: {
    
    
      type: [String, Array],
      default:
        'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave autoresize print',
    },
    toolbar: {
    
    
      type: [String, Array],
      default:
        'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent formatpainter | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap hr pagebreak insertdatetime | fullscreen preview',
    },
  },
  data() {
    
    
    return {
    
    
      //初始化配置
      init: {
    
    
        menubar: true,
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 770,
        min_height: 770,
        max_height: 770,
        toolbar_mode: 'wrap',
        plugins: this.plugins,
        toolbar: this.toolbar,
        content_style: 'p {margin: 5px 0;}',
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats:
          '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
        branding: false,
        images_upload_handler: (blobInfo, success, failure) => {
    
    
          const formData = new FormData();
          formData.append('file', blobInfo.blob());
          reserveTableFoodDescribe(formData)
            .then((res) => {
    
    
              if (res.code === '10000') {
    
    
                const file = res.data;
                success(file.url);
                return;
              }
              failure('上传失败');
            })
            .catch(() => {
    
    
              failure('上传出错');
            });
        },
      },
      content: this.value,
    };
  },
  mounted() {
    
    
    tinymce.init({
    
    });
  },
  methods: {
    
    },
  watch: {
    
    
    value(newValue) {
    
    
      this.content = newValue;
    },
    content(newValue) {
    
    
      this.$emit('input', newValue);
    },
  },
};
</script>

5. 在当前页面使用已注册的全局组件

<tiny-editor v-model="introduction"></tiny-editor>