富文本插件 Tinymce图片上传 img地址变为本地地址

描述:

本人使用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" />
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值