COS控制台进阶 - 文件预览和在线编辑

2021-09-22 18:43:47 浏览数 (2)

COS控制台新上线了文件预览功能,用户可在控制台内直接预览、编辑文件内容。

前不久,微软发布了 vscode for web 的公告,是基于web的在线代码编辑器,无需下载安装可以直接在web浏览器中运行,同时支持断点调试、版本管理、团队开发等功能。全球最大的代码托管网站 github.com,也在网页端支持了在线编辑模式。人们对在线开发的热情被再次点燃。

同样是管理云上文件的腾讯云 COS,也在控制台推出了更便捷的在线管理文件的功能!

一、COS 控制台更新 - 文件预览和在线编辑

文件预览:提供了在线查看文件内容的功能,如在线播放音视频、查看 ppt/pdf 等文档。

文件编辑:方便开发者随时随地编辑 COS 存储桶文件,如在线修改静态网站代码、Markdown 文档。

二、如何使用

(一)文件在线编辑

在线编辑依赖 COSBrowser Web 版来实现。COSBrowser 客户端版大家已经非常熟悉了,WebIDE 的普及越来越广,COSBrowser 也推出了 Web 在线版,方便开发者随时随地管理 COS 存储桶文件,来支持在浏览器内编辑文件内容的能力。 在腾讯云 COS 控制台,选择存储桶进入文件列表页,点击右上角“在线编辑器”链接,即可跳转到 COSBrowser Web版编辑当前文件夹的文件。如果想对当前目录下的文件夹或文件编辑,可以在“更多”找到编辑按钮。

在线编辑COS存储桶文件在线编辑COS存储桶文件

为了贴合开发者习惯,在COSBrowser web版里文件列表以目录树的形式在左边展示,右边为编辑区,用户可像在vscode里修改代码一样,在编辑区修改内容,编辑完之后,Ctrl s键保存。再也不用按照以前那一套低效的下载--> 编辑 -- > 上传来完成文件的修改。

快捷方式一:按键盘快捷键进入编辑

如果你觉得这样的方式太过于平庸,不适合Geek的你,我们还准备了更炫酷的功能给你,当你浏览COS控制台文件列表时,只需要点击键盘上的 . 键,即可进入在线编辑器,如下图:

快捷方式二:修改url地址进入编辑

你也可以通过修改文件列表的url来达到这个目的,将 url 中的 /bucket 改为 /dev,如 https://console.cloud.tencent.com/cos5/dev?... ,同样可以进入编辑当前文件夹。

(二)文件预览

首先选择存储桶进入文件列表页,点击操作栏的预览按钮;

目前支持 图片、视频、音频、文档、代码文本 等几乎所有的文件类型。

预览图片预览图片
视频播放视频播放
PPT文档预览PPT文档预览
Excel文档预览Excel文档预览

有了文件预览,我们再也不需要下载到本地打开了,直接在页面一键预览,省时省力。

三、如何在自己的网站实现

(一)文档预览

除了浏览器自身显示的文件,COS 针对 docx、xlsx、pptx 等复杂文档文件,推出了文档预览功能,开发者只要在控制台开启文档预览功能,在对象的访问URL上加上预览参数?ci-process=doc-preview&dstType=html 即可使用,如 :

代码语言:javascript复制
https://ci-h5-demo-1258125638.cos.ap-chengdu.myzijiebao.com/defaults/defaultSlides.pptx?ci-process=doc-preview&dstType=html

(二)播放视频

在 Web 端实现视频播放,推荐使用腾讯云点播的“超级播放器”,不仅支持 RTMP、FLV、HLS、MP4 等格式,更提供了丰富的音视频播放场景的实用功能。

(三)在线编辑

COSBrowser Web 的在线编辑器,使用了体验接近 vscode 的 monaco editor,开发者可以自行在自己网站实现编辑。

四、写在最后

后续,我们会继续深化研究,提供更加人性化的功能给到大家,敬请期待。欢迎体验和反馈建议。

0 人点赞