vue中使用 tinymce富文本编辑器

参考 https://blog.csdn.net/weixin_53605215/article/details/123043676

1. npm下载

vue3.x ：

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

vue2.x的话，固定版本（vue2中不能使用@tinymce/tinymce-vue为4以上版本）

npm install tinymce@5.1.0 -S

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

2.将node_modules里面的tinymce文件复制到public目录下

3.富文本封装

html：

<template>
  <div>
    <editor v-model="editorVal" :init="init" />
  </div>
</template>

js:

<script>
import { uploadFile } from '@/api/toppic';
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver/theme';
// import 'tinymce/plugins/image'; // 图片
import 'tinymce/plugins/imagetools'; // 图片裁剪
import 'tinymce/plugins/media';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/skins/ui/oxide/skin.css';
import '../../../public/tinymce/plugins/lineheight/plugin'; // 行高
import '../../../public/tinymce/plugins/indent2em/plugin'; // 首行缩进
import '../../../public/tinymce/plugins/letterspacing/index'; // 文字间距
import '../../../public/tinymce/plugins/image/index'; // 图片
export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      init: {
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        // skin_url: '../../../public/tinymce/skins/ui/oxide', // 打包部署后404，要用绝对路径引入
        skin_url: '/tinymce/skins/ui/oxide',
        content_css: '/tinymce/skins/content/default/content.css',
        height: 500,
        plugins: [
          'lists advlist image imagetools lineheight indent2em letterspacing table wordcount'
        ],
        toolbar:
          'formatselect fontsizeselect | lineheight indent2em letterspacing | bold italic underline strikethrough forecolor backcolor| alignleft aligncenter alignright alignjustify | bullist numlist outdent indent  | lists advlist image table | removeformat undo redo',
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        branding: false,
        menubar: false,
        statusbar: false,
        image_title: false,
        automatic_uploads: true,
        toolbar_drawer: false,
        images_upload_handler: this.imgUpload
      },
      editorVal: this.value
    };
  },
  watch: {
    value(newValue) {
      this.editorVal = newValue;
    }
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    imgUpload(blobInfo, success, failure) {
      const formData = new FormData();
      formData.append('file', blobInfo.blob(), blobInfo.filename());
      uploadFile(formData).then(res => {
        if (res && res.code && res.code === 200) {
          this.$message.success('上传成功');
          success(res.data.fileUrl);
        } else {
          this.$message.error('上传失败');
          failure();
        }
      });
    }
  }
};
</script>