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

最新推荐文章于 2024-07-09 11:05:41 发布
最新推荐文章于 2024-07-09 11:05:41 发布
阅读量3.1k 收藏 2
点赞数
分类专栏： 组件库 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gabriel_wei/article/details/105581737
版权
前端 同时被 3 个专栏收录
183 篇文章 6 订阅
订阅专栏
学习
61 篇文章 0 订阅
订阅专栏
组件库
23 篇文章 0 订阅
订阅专栏

详读此处的api：http://tinymce.ax-z.cn/configure/url-handling.php

只配置relative_urls : true

relative_urls : true,

不做别的配置,此时的a标签
<a title="设计.docx" href="../../files\upload\2020-04-19\20200419191802836.docx">/keJiaoXingNong/files\upload\2020-04-19\20200419191802836.docx</a>

在这里插入图片描述

他相对的是当前的HTML所在路径来进行的引用

修改为绝对路径

需要做如下配置

//相对路径
relative_urls : false,
remove_script_host : true,
document_base_url : "http://localhost:8080/keJiaoXingNong/",

此时的a标签
<a title="神经网络到卷积神经网络原理与实践.docx" href="/keJiaoXingNong/files\upload\2020-04-19\20200419193122705.docx">/keJiaoXingNong/files\upload\2020-04-19\20200419193122705.docx</a>

在这里插入图片描述

Gabriel_wei
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
tinymce上传图片路径变为相对路径的解决办法
TangAcrab的博客
11-12 1707
解决办法：在init初始化方法中设置 convert_urls:false 原因： TinyMCE会自动判断是否可以将当前图片路径变为相对路径。带有域名的路径也会被转换为相对路径。 文档对其描述如下： 我们只需将其自动转换url的功能关闭即可。 ...
tinymce上传图片相对路径变更绝对路径
清欢
11-29 2040
tinymce上传图片会自动变更路径为相对路径…/…/…/ 新增配置 relative_urls : false, convert_urls: false, 最终配置 tinymce.init({ selector: '#editor', // selector: '#resourceContent,#editor', language: 'zh_CN', // formatpainter axupimgs
vue之富文本的简单使用
only_zing的博客
06-28 271
vue-quill-editor富文本的安装、引入、封装、使用以及开发过程中遇到的问题
Tinymce配置智能的Url
weixin_30879169的博客
07-18 216
convert_urls 该选项允许你控制TinyMCE是否够聪明，存储URL的原始值，默认情况URL会被自动转化，因为内置的浏览器逻辑以这样的方式工作，没有方法获 取真正的URL，除非你别处存储。如果你设置该选项为false，那么它会试着保持URL的完整性。默认为true,意味着URL会依据 relative_urls的状态而被强制为绝对或相对的。 Convert...
修改vue-element-admin中Tinymce编辑器的图片上传路径
just4you的博客
10-30 2547
问题描述 在使用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 381
加上这个三个配置：
tinymce配置项中convert_urls、relative_urls、remove_script_host、document_base_url
沧笙踏歌的博客
06-17 2398
文档说明 convert_urls 该选项允许你控制TinyMCE是否够聪明，存储URL的原始值，默认情况URL会被自动转化，因为内置的浏览器逻辑以这样的方式工作，没有方法获 取真正的URL，除非你别处存储。如果你设置该选项为false，那么它会试着保持URL的完整性。默认为true,意味着URL会依据 relative_urls的状态而被强制为绝对或相对的。 Convert_urls选项示例： tinyMCE.init({ ... convert_urls : false });
vue中本地引用tinymce
weixin_40136189的博客
11-22 2895
本地引用方便于插件的自定义修改，针对于客户脑洞打开的需求还是方便一些。 1、首先把tiny从官网下载下来。 https://www.tiny.cloud/get-tiny/self-hosted/ 2、然后把tiny整个包扔到static中。（我是webpack3.0的版本，所以放到static中不会被编译。如果是webpack4.0以后放到public中道理是一样的，注意下一步引入的路径即可）...
tinymce 自定义多图片批量上传插件 附使用示范Test
06-22
在官方的默认设置中，TinyMCE仅支持单个图片的上传功能。然而，对于需要处理大量图片的场景，如博客发布、文章编辑等，单个图片上传往往效率较低。为了满足这种需求，开发者们通常会通过自定义插件来扩展TinyMCE的...
TinyMce 上传多图片组件（修改）.zip
11-28
这个服务接收来自编辑器的图片文件，处理它们（例如，重命名、调整大小、存储到服务器），然后返回一个URL，这个URL会被插入到编辑器中的图片标签中。 在提供的链接中...
begard-tinymce:Begind的TinyMce文件管理器插件
05-12
4. **图片预览**：对于图片文件，插件通常还提供预览功能，用户可以在选择前查看图片内容。 5. **权限控制**：根据项目需求，你可能需要实现用户权限控制，限制用户可以访问、上传或删除的文件类型和目录。 6. **...
TinyMCE自定义上传图片
12-04
以上就是关于TinyMCE自定义上传图片插件的详细解释，它涉及到前端交互、文件上传、服务器通信等多个技术环节。在实际开发中，你可能还需要考虑安全性、性能优化以及用户体验等方面的问题，确保插件的稳定性和易用性...
TinyMCE 新增本地图片上传功能
09-05
在TinyMCE 在处理富文本时，可以通过网站的相对路径录入图片地址。
ember-tinymce：TinyMCE v5的余烬
02-04
安装要开始使用，只需安装插件： ember install ember-tinymce零件{{ tinymce-editor options = options value = text}} options属性已完全支持。 更改选项将导致编辑器重新加载。 值-由编辑器生成HTML文本。 如果...
tinymce-fileupload:TinyMCE的文件上传插件，基于jQuery文件上传插件
07-02
TinyMCE 文件上传插件 TinyMCE的文件上传插件，基于jQuery文件上传插件 设置 将以外的所有文件复制到您的tinymce/plugins文件夹 从为您的语言设置上传处理程序。 打开并将表单元素的 action 参数更改为您的上传处理...
yii2-tinymce:Yii2扩展，tinymce所见即所得编辑器
05-10
与文件管理器（如elFinder）集成的存根 ## Installation安装此扩展的首选方法是通过 。 无论运行 php composer.phar require --prefer-dist zxbodya/yii2-tinymce "*@dev" 或添加 "zxbodya/yii2-tinymce": "*@dev...
【注释修正版】tinymce paste，paste_preprocess中粘贴图片之前， 完整图片上传方法 以及使用文件服务返回的URL使用方法（使用正则获取img标签），js获取img标签。
晨曦博客
09-25 2469
Tinymce富文本 想学，图片上传可参考代码怎么写的。 一、实例： 注释：只写了blob流图片数据格式上传，专门用在word文档里复制粘贴用的(只能一张一张复制粘贴上传)，好像tinymce，paste不支持全选图片，多张上传（我懒，想少掉点头发） paste_preprocess(plugin, args) { const z = '<img[^<>]*? src="([^<>]*?)"'; const IMG = args
tinymce富文本编辑器 + 图片（本地）上传到服务器
weixin_49523082的博客
09-03 1055
tinymce富文本编辑器 安装 npm i tinymce npm install @tinymce/tinymce-vue 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 或plugins 目录下 如果要使用中文版记得下载语言包 使用 tinymce.vue <template> <div class="tinymce-editor"> <Editor :id="ti
vue中使用Tinymce富文本插入表情处理，打包后提交表情路径为绝对路径，修改为相对路径
wpfgaoerfu的博客
04-09 1421
vue中使用Tinymce富文本插入表情处理 在VUE中使用Tinymce富文本时今天遇到一个问题，前端打完包后执行访问后台服务，当时富文本中插入表情图片时，会存储绝对路径，导致不同客户端访问的时候表情读取失败。 解决办法 不多说直接上代码，对Tinymce富文本内容做正则处理： var result = '<p>4444<img src="file:///F:/develop/...
vue tinymce skin_url 使用相对路径
06-10
如果您想在 Vue 中使用 TinyMCE，并使用相对路径设置 `skin_url`，可以按照以下步骤操作： 1. 在安装 TinyMCE 时，确保将 `skin` 文件夹复制到您的项目中的某个目录下，例如 `src/assets/skins`。 2. 在您的组件中，使用 `import` 导入 TinyMCE，并在 `mounted` 钩子函数中初始化 TinyMCE 编辑器。在初始化的同时，设置 `skin_url` 选项，将其设置为相对路径即可。 ``` <template> <div> <textarea ref="editor"></textarea> </div> </template> <script> import tinymce from 'tinymce/tinymce'; import 'tinymce/themes/silver'; import 'tinymce/plugins/link'; import 'tinymce/plugins/image'; import 'tinymce/plugins/table'; export default { mounted() { tinymce.init({ selector: this.$refs.editor, skin_url: './assets/skins/ui/oxide', plugins: 'link image table', toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image table', menubar: false, branding: false }); } } </script> ``` 在上面的示例中，`skin_url` 设置为相对路径 `./assets/skins/ui/oxide`，其中 `./` 表示当前文件所在的目录。 希望这可以帮助您解决问题！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值