同源策略的路径简化
- 同源资源简化:当页面和资源位于同一源(同一协议、域名和端口)时,浏览器和编辑器有时会在源码中隐藏这部分相同的路径,仅显示相对路径。这是为了简化代码并避免不必要的重复。
- TinyMce的处理:TinyMCE 编辑器在处理 HTML 内容时,会优化代码,去掉冗余信息以保持代码简洁。如果图片的 src 属性中的 URL 和页面的 URL 相同,它会认为这部分 URL 是重复的,并将其转换为相对路径。这种行为与浏览器的处理方式类似。
举例说明:
假设你有如下场景
- 页面 URL: http://127.0.0.1/index.html
- 图片 URL: http://127.0.0.1/image/1.jpg
当你在 TinyMCE 中插入这个图片时,TinyMCE 会自动将 src 属性简化为 /image/1.jpg,因为编辑器和图片共享相同的域名和端口。
如何验证
你可以通过查看 TinyMCE 编辑器的源码视图,或者使用浏览器的开发者工具查看生成的 HTML 代码来验证这一行为。通常,你会发现 TinyMCE 将同源的图片路径自动简化为了相对路径。
要调整 TinyMCE 编辑器的行为,使其不自动简化图片的绝对路径为相对路径,可以通过自定义 TinyMCE
的配置或使用插件来实现。以下是一些常见的调整方式:
方法一:禁用 URL 自动简化
TinyMCE 有一个名为 convert_urls 的配置项,默认情况下是启用的,它会将绝对路径转换为相对路径。你可以通过禁用 convert_urls 来避免路径被自动简化。
tinymce.init({
selector: '#editor',
convert_urls: false, // 禁用路径转换
setup: function (editor) {
// 在此处可以添加其他配置或事件监听器
}
});
方法二:使用 relative_urls 和 remove_script_host 配置项
如果你想让 TinyMCE 保持绝对路径,你可以配置 relative_urls 和 remove_script_host 选项。
- relative_urls: false: 保持使用绝对路径。
- remove_script_host: false: 保留协议和域名部分(如 http://127.0.0.1)。
tinymce.init({
selector: '#editor',
relative_urls: false, // 禁止使用相对路径
remove_script_host: false, // 保留主机名和协议
setup: function (editor) {
// 添加额外的设置或事件处理
}
});
说明
- convert_urls: false:关闭了路径自动转换,确保 TinyMCE 不再修改 URL 的格式。
- relative_urls: false 和 remove_script_host: false:这些配置项使 TinyMCE 保留绝对路径,并防止自动移除协议和主机部分。
大多数情况下,配置 convert_urls: false 和 relative_urls: false 应该可以解决你遇到的问题。如果你需要进一步的定制,可以结合事件监听器来进行特殊的 URL 处理。