描述:
本人使用Tinymce富文本插件时出现的bug
图片上传
images_upload_handler: (blobInfo, success) => new Promise((resolve, reject) => {
console.log('blobInfo', blobInfo.blob(), blobInfo)
let param = new FormData()
param.append('file', blobInfo.blob())
// param.append('', 'document-media-resource')
postSysFileUpload({
bucketName: 'document-media-resource', // 桶名
file: param// 文件本体
}, {
headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' }
}).then(res => {
let url = baseurl + '/high-tech/sys' + res.data.url
success(url)
resolve(url)
})
.catch(err => {
ElMessage({
message: '上传失败',
type: 'danger'
})
reject('上传失败', err)
})
})
本人使用的是自定义的方法进行图片上传
重点
在本地开发时,上传一切正常,返回的文本内容也是正常
但部署到线上后,图片上传后组件抛出的文本内容里,对应的img标签上的图片地址域名部分会被替换为././。
见鬼的是我本地运行时并没有问题
百般查找
以下是解决方法
组件的init参数 配置信息里加上
relative_urls: false,
remove_script_host: false,
convert_urls: true,
我的完整配置信息
const defaultSetting = ref({
language_url: 'tinymce/langs/zh-Hans.js',
language: 'zh-Hans',
skin_url: settingsStore.app.colorScheme === 'light' ? 'tinymce/skins/ui/oxide' : 'tinymce/skins/ui/oxide-dark',
content_css: settingsStore.app.colorScheme === 'light' ? 'tinymce/skins/content/default/content.min.css' : 'tinymce/skins/content/dark/content.min.css',
min_height: 250,
max_height: 600,
selector: 'textarea',
plugins: 'autolink autoresize fullscreen image insertdatetime link lists media preview table wordcount code searchreplace',
toolbar: 'undo redo | blocks | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | forecolor backcolor removeformat | link image media table insertdatetime searchreplace | preview code fullscreen',
branding: false,
menubar: false,
toolbar_mode: 'sliding',
insertdatetime_formats: [
'%Y年%m月%d日',
'%H点%M分%S秒',
'%Y-%m-%d',
'%H:%M:%S'
],
relative_urls: false,
remove_script_host: false,
convert_urls: true,
images_upload_handler: (blobInfo, success) => new Promise((resolve, reject) => {
console.log('blobInfo', blobInfo.blob(), blobInfo)
let param = new FormData()
param.append('file', blobInfo.blob())
// param.append('', 'document-media-resource')
postSysFileUpload({
bucketName: 'document-media-resource', // 桶名
file: param// 文件本体
}, {
headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' }
}).then(res => {
// let url = '/high-tech/sys' + res.data.url
let url = baseurl + '/high-tech/sys' + res.data.url
console.log('内容嵌入图片上床', res, baseurl, url)
success(url)
resolve(url)
})
.catch(err => {
ElMessage({
message: '上传失败',
type: 'danger'
})
reject('上传失败', err)
})
})
})
<TinymceEditor v-model="myValue" :init="completeSetting" :disabled="disabled" />