首先引入 @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>我是个后端 可能写的不太好 欢迎评论
