TinyMCE添加图片路径自动处理成相对路径

最新推荐文章于 2024-07-09 11:05:41 发布

龙小王

最新推荐文章于 2024-07-09 11:05:41 发布

阅读量4.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js vue

本文链接：https://blog.youkuaiyun.com/qq_23614619/article/details/90045030

js 同时被 2 个专栏收录

25 篇文章

订阅专栏

vue

15 篇文章

订阅专栏

本文介绍在Vue中使用TinyMCE编辑器时，如何解决图片路径转换问题，通过设置convert_urls参数为false，可以确保图片路径包含域名，避免转换为相对路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中使TinyMCE编辑器。在往编辑器插入图片，保存后，数据库中的图片路径下会自动转换你的图片路径如：

转换：

/path/name.jpg

为../path/name.jpg

带有域名的路径也会被转换为相对路径。如何让路径带域名呢？

只要在初始化时候，多添加一个参数就ok了：

tinymce.init({

selector: 'textarea', // change this value according to your HTML

convert_urls: false //这个参数加上去就可以了，路径就带域名了

});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

龙小王

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【TinyMce富文本编辑器解决同源策略路径简化的问题】

weixin_52178141的博客

08-26

778

假设你有如下场景当你在 TinyMCE 中插入这个图片时，TinyMCE 会自动将 src 属性简化为 /image/1.jpg，因为编辑器和图片共享相同的域名和端口。你可以通过查看 TinyMCE 编辑器的源码视图，或者使用浏览器的开发者工具查看生成的 HTML 代码来验证这一行为。通常，你会发现 TinyMCE 将同源的图片路径自动简化为了相对路径。要调整 TinyMCE 编辑器的行为，使其不自动简化图片的绝对路径为相对路径，可以通过自定义 TinyMCE的配置或使用插件来实现。

tinymce上传图片路径变为相对路径的解决办法

TangAcrab的博客

11-12

2023

解决办法：在init初始化方法中设置 convert_urls:false 原因： TinyMCE会自动判断是否可以将当前图片路径变为相对路径。带有域名的路径也会被转换为相对路径。文档对其描述如下：我们只需将其自动转换url的功能关闭即可。 ...

1 条评论您还未登录，请先登录后发表或查看评论

tinymce：图片、文件上传的时候相对路径与绝对路径

沧笙踏歌的博客

04-17

3399

官方api：https://www.tiny.cloud/docs/configure/url-handling/ 在配置中加入 relative_urls : false, remove_script_host : false,

修改vue-element-admin中Tinymce编辑器的图片上传路径

just4you的博客

10-30

2706

问题描述在使用vue-admin-admin的Tinymac编辑器时，默认上传图片路径是https://httpbin.org/post。此地址会返回类似如下的json数据，其中包含有图片的base64编码形式。 { ...... "files": { "file": "data:image/jpeg;base64,/9j/4AAQSkZJR......" }, ...... } 当上传的图片很大，会导致返回的base64编码字符串超长，此时会明显感觉

jeecg vue3 tinymce 正式环境上传图片保存路径不对，data-mce-href 取相对路径

xinmengdie01的博客

07-09

681

加上这个三个配置：

使用TinyMCE默认使用相对路径的问题解决

wangxp的专栏

08-22

2755

settings.py中加入： TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600, 'height': 400, 'relative_urls': False, 'remove_script_host': False }

富文本编辑器 Tinymce图片上传之后域名丢失或变成相对路径

weixin_42178050的博客

08-02

3316

https://www.cnblogs.com/osfipin/p/5763883.html

tinymce配置项中convert_urls、relative_urls、remove_script_host、document_base_url

沧笙踏歌的博客

06-17

2781

文档说明 convert_urls 该选项允许你控制TinyMCE是否够聪明，存储URL的原始值，默认情况URL会被自动转化，因为内置的浏览器逻辑以这样的方式工作，没有方法获取真正的URL，除非你别处存储。如果你设置该选项为false，那么它会试着保持URL的完整性。默认为true,意味着URL会依据 relative_urls的状态而被强制为绝对或相对的。 Convert_urls选项示例： tinyMCE.init({ ... convert_urls : false });

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

tiankonlan的博客

09-05

1542

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

tinymce上传图片相对路径变更绝对路径

赛博夫子

11-29

2277

tinymce上传图片会自动变更路径为相对路径…/…/…/ 新增配置 relative_urls : false, convert_urls: false, 最终配置 tinymce.init({ selector: '#editor', // selector: '#resourceContent,#editor', language: 'zh_CN', // formatpainter axupimgs

tinymce线上上传图片后域名丢失

Yipitre的博客

01-05

771

https://blog.youkuaiyun.com/weixin_42178050/article/details/98220964

小程序给html标签中的 img路径添加域名

ylp的博客

03-29

957

list = list.replace(new RegExp("/upload", "g"), that.data.ImgUrl + "upload");

tinymce图片的自定义上传和自定义img的url路径

Lee_is_bulibuli的博客

08-10

6592

tinymce图片的自定义上传和自定义img的url路径，实现自定义图片上传可以使用images_upload_handler属性代替TinyMCE来处理上传操作。该自定义函数需提供三个参数：blobInfo、成功回调和失败回调。

Vue配置TinyMCE富文本编辑器 + 图片（本地）上传到服务器

韩旭的博客

08-04

6144

一、TinyMCE是什么？ TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。我们可以先大体看一下配置完成后的样子注：博主使用的TinyMCE版本是 “tinymce”: “^4.8.2” 如果超过此版本可能会导致一些问题。首先如果想要在Vue中使用TinyMCE，我们需要准备一些什么？汉化的中文语言包：zh_CN.js 下载下

Vue项目中集成TinyMCE富文本编辑器(图片批量上传等)

Ghmin的博客

10-20

5078

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。因为项目原因，本文章是在Vue2中封装TinyMce富文本组件。

vue2使用tinyMCE踩过的坑

weixin_70236102的博客

07-14

1298

发现是插件内报错，之前系统内用的是tinymce 5.10.7版本，版本太高导致，后更换到5.6.2（从5.10试了好多，试到的vue2支持的最高版本），再次点击上传图片时，能正常上传了。最近需求中要添加富文本配置元素，多番对比最终选择沿用系统内已存在的tinyMCE，但之前使用的功能较少，只有左中右对齐，其它均无涉及。由于项目是内网开发，在开发环境中没有配置ng，图片不能正常展示导致获取不到图片的宽高，配置ng后上传图片终于能正常带入了。2.上传图片成功后，地址正常回填，但图片的宽高不会自动带入。

vue开发项目时返回的图片路径只有文件名没有全路径，怎样拼接全路径，富文本编辑器返回的数据咋过滤里面的html标签或者样式或者格式

AKindofo的博客

11-01

1014

拼接图片全路径和正则匹配

tinymce图片路径出现../接口图片路径就没了

最新发布

05-01

<think>嗯，用户提到在TinyMCE编辑器中使用图片路径带有“../”导致图片丢失的问题。首先我需要理解这个问题发生的背景。通常，当图片路径使用相对路径如“../images/photo.jpg”，这可能在上传或保存时被编辑器处理不当，导致路径被截断或无法正确解析。接下来，我需要考虑可能的解决方案。根据之前引用的资料，比如引用[1]中提到的插件配置和引用[2]中的ImageMatch配置，可能需要检查TinyMCE的上传配置是否正确处理了相对路径。例如，是否设置了正确的相对_urls选项，或者是否启用了convert_urls来防止路径转换。另外，用户的问题可能涉及到后端接口的处理。如果后端接口返回的JSON中图片路径没有正确包含“../”部分，可能需要调整后端的路径处理逻辑，确保返回完整的相对路径或绝对路径。同时，前端可能需要配置image_list来指定正确的图片目录，避免路径丢失。还要考虑存储路径的配置是否正确。如果图片存储在服务器的某个子目录下，可能需要设置document_base_url或relative_urls为true，以确保路径正确生成。此外，用户可能需要自定义处理上传后的图片路径，例如在保存时替换“../”为合适的路径结构，或者在后端处理时进行路径修正。跨域问题也可能导致路径错误，需要检查CORS设置是否正确。最后，建议用户检查网络请求中的实际路径是否正确，使用开发者工具查看图片请求的URL，从而定位问题所在。结合之前的引用，比如引用[3]中提到TinyMCE在企业中的使用情况，可能需要确保配置的简单性和文档的准确性，帮助用户正确设置路径参数。</think>针对TinyMCE编辑器因图片路径包含$../$符号导致路径丢失的问题，以下是分步解决方案： ### 一、核心问题定位当图片路径包含$../$时，可能触发以下问题： 1. 路径层级解析错误（如将`../uploads/image.jpg`误解析为根目录路径） 2. 安全策略过滤（某些框架自动过滤上级目录符号） 3. URL转换机制冲突（TinyMCE的`convert_urls`配置影响）[^1] ### 二、解决方案步骤 1. **禁用自动URL转换** 在编辑器初始化配置中添加： ```javascript tinymce.init({ convert_urls: false, // 关闭自动路径转换 relative_urls: true, // 保持相对路径 remove_script_host: false // 保留协议和域名 }); ``` 2. **配置API路径处理（Java Spring示例）** ```java // 文件上传接口添加路径保留逻辑 @PostMapping("/upload") public JSONResult upload(@RequestParam("file") MultipartFile file) { String path = "../uploads/" + UUID.randomUUID() + ".jpg"; // 保留../前缀 return JSONResult.ok().put("location", path); // 直接返回原始路径 } ``` 3. **前端添加路径修正逻辑** ```javascript // 在文件上传成功回调中处理路径 images_upload_handler: function (blobInfo, success) { uploadFile(blobInfo.blob()).then(response => { let correctedPath = response.location.replace(/^\.\.\//, 'base/'); success(correctedPath); // 路径映射转换 }); } ``` 4. **Nginx反向代理配置** ```nginx location /base/ { alias /var/www/project/; # 将/base/映射到实际包含../的物理路径 rewrite ^/base/(.*) /$1 break; } ``` ### 三、验证方案 1. 在浏览器控制台检查网络请求： ```javascript // 查看实际请求路径 document.querySelectorAll('img').forEach(img => console.log(img.src)) ``` 2. 测试不同层级页面的路径表现： - 页面路径：`/article/detail?id=1` - 图片路径：`../uploads/image.jpg` - 预期访问路径：`http://domain.com/base/uploads/image.jpg` ### 四、补充说明 1. 使用$encodeURIComponent()$处理特殊符号： ```javascript // 上传前编码路径 const safePath = encodeURIComponent('../uploads/image.jpg'); ``` 2. 路径白名单配置（Spring Security示例）： ```java http.authorizeRequests() .antMatchers("/base/uploads/**").permitAll() // 允许上级目录访问 .regexMatchers("^/(../)?uploads/.*").permitAll(); ```

TinyMCE添加图片 路径自动处理成相对路径

TinyMCE添加图片路径自动处理成相对路径