tinymce前端富文本编辑器在vue3中使用说明

1.package.json添加依赖

"@tinymce/tinymce-vue": "^5.1.1",

2.将tinymce的文件放到public文件夹static下

3.页面使用代码

<template>
  <Editor ref="tinymceRef" v-model="value" :init="initstr"></Editor>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
import { uploadFile } from '@/api/upload'
export default {
  name: 'TpTinymce1',
  data() {
    return {
      initstr: {
        height: 500,
        // readonly: true,
        menubar: true,
        language: 'zh_CN',
        plugins:
          'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap  pagebreak nonbreaking anchor insertdatetime advlist lists wordcount  help emoticons autosave   autoresize',
        toolbar:
          'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
        images_upload_handler: (blobInfo, progress) =>
          new Promise((resolve, reject) => {
            console.log(99, blobInfo)
            const file = blobInfo.blob() // 转化为易于理解的file对象
            const formData = new FormData()
            formData.append('file', file, file.name)
            formData.append('sysCode', 'HID')
            formData.append('modelCode', this.fieldId)
            formData.append('publicFlag', '1')
            uploadFile(formData)
              .then(res => {
                if (res.isSuccess) {
                  resolve(res.data.fileUrl)
                } else {
                  // eslint-disable-next-line prefer-promise-reject-errors
                  reject('Invalid JSON: ' + res.data)
                }
              })
              .catch(e => {
                // eslint-disable-next-line prefer-promise-reject-errors
                reject({ message: 'HTTP Error: ' })
              })
          }),
        automatic_uploads: true,
      }
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Editor
  },
  props: {
    value: Object,
    fieldId: Object
  }
}
</script>

4.tinymce.min.js引用，在main.js中引用

const element = document.createElement('script')
if (window.__POWERED_BY_QIANKUN__) { element.src = window.__webpack_public_path__ + 'static/tinymce/js/tinymce/tinymce.min.js' } else element.src = '/static/tinymce/js/tinymce/tinymce.min.js'
document.body.appendChild(element)

5.问题解决

富文本在qiankun子应用中使用

// qiankun微前端
if (window.__POWERED_BY_QIANKUN__) {
  window.__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
  if (window.tinymce) window.tinymce.baseURL = window.__webpack_public_path__ + 'static/tinymce/js/tinymce'
// eslint-disable-next-line brace-style
}

富文本在wujie子应用中使用，且wujie主应用有富文本的引入使用

需要在app.vue中再次引用一下skin.min.css样式文件

<style lang="scss">
// 富文本加载样式
@import "./style/static/skin.min.css";
</style>