vue3 ts 集成 tinymce

首先引入 @tinymce/tinymce-vue
yarn add @tinymce/tinymce-vue -S
我的版本是

然后写一个组件

<template>
  <main id="sample">
    <Editor v-model="editorData" api-key="j7tvgx4xnptg3cjd63cfnl62z9s78uylw4o7vkkwdljjy91e" :init="init" />
  </main>
</template>
<script lang="ts" setup>
import Editor from '@tinymce/tinymce-vue'
import instance from '@/util/http'
let props = defineProps(['editorValue'])
const emit = defineEmits(['update:editorValue', 'update:test2'])
let editorData = ref(props.editorValue)
// 图片上传
const example_image_upload_handler = (blobInfo, success, failure) => {
  return new Promise((resolve, reject) => {
    const formData = new FormData()
    formData.append('file', blobInfo.blob(), blobInfo.filename())
    instance
      .post('/system/file/upload/webImage', formData, {
        headers: {
          client: 'WEB_USER',
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(res => {
        resolve(res.data)
      })
  })
}
const onChange = editor => {
  editor.on('change', () => {
    emit('update:editorValue', editorData.value)
  })
}
const init = {
  selector: '#tinydemo',
  language: 'zh_CN',
  language_load: true, // 语言包是否开启
  promotion: false, //Upgrade是否开启
  branding: false, // 移除底部品牌信息
  menubar: false, // 移除顶部菜单栏
  height: 500,
  statusbar: false, // 移除底部状态栏
  toolbar_mode: 'sliding', // 工具栏模式
  paste_data_images: true, // 粘贴图片
  file_picker_types: 'image', // 文件选择类型
  image_uploadtab: true, // 图片上传选项卡
  plugins: 'link image',
  toolbar: ' bold italic backcolor forecolor| fontsize fontfamily | alignleft aligncenter alignright alignjustify | image link emoticons',
  image_dimensions: false,
  image_description: false,
  image_title: false,
  a11ychecker_allow_decorative_images: false,
  typeahead_urls: false,
  block_unsupported_drop: true,
  placeholder: '请输入内容...',
  images_upload_handler: example_image_upload_handler,
  setup: onChange
}
</script>
<style>
// 修改 弹出框在组件之下的问题
.tox-tinymce-aux {
  z-index: 3000 !important;
}
</style>

我是个后端 可能写的不太好 欢迎评论