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

​

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存储桶文件

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

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

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

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

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

（二）文件预览

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

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

预览图片

视频播放

PPT文档预览

Excel文档预览

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

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

（一）文档预览

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

https://ci-h5-demo-1258125638.cos.ap-chengdu.myqcloud.com/defaults/defaultSlides.pptx?ci-process=doc-preview&dstType=html

（二）播放视频

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

（三）在线编辑

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

四、写在最后

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