Web 媒体资源

在 Web 应用中，除去基本的 html、css、js 等基本的代码文本文件，浏览器原生集成了一些额外的媒体资源格式，包括图片文件、声音文件、视频文件等在内。

• 文本文件
• 文档文件
• 图片文件
• 音乐文件
• 视频文件
• 模型文件
• 压缩文件

Web 端媒体编辑

受限于 Web 端的性能不足的因素，使用 Web 编辑媒体文件主要集中在文本、文档、图片这三个。在这三种文件中，基本可以被 md 和 svg 包揽。此二者具有极高的 web 兼容性、通用性、可编辑性，基于纯文本。

• 文本文件。纯文本文件无需定稿
  • markdown 文件。在 Web 端的一等公民，具有强大的兼容性和可定制性，能够支持简单的排版和样式，能够基于各种编辑器使用扩展语法，例如：github 的 emoji 扩展、html 标签混用、数学公式扩展等。还有一些 SSG 框架中的特殊扩展语法，例如 vitepress 静态站点生成、slidev 演示文稿生成。相较于 word 文档，它牺牲了一定的功能，换来了其轻量性。
  • 代码文件。纯文本，但是需要提供文字的语法高亮显示和智能提示。
• 文档文件。在 Web 端上一般称为富文本编辑器，可以分为传统派和块风格。需要定稿成 pdf 文件。
  • 传统富文本编辑器 (WYSIWYG)，支持尽可能趋近于 word 文档的 web 端富文本编辑。
  • 块风格文本编辑器（Block-style），对 word 做减法，支持有限的 word 能力，提供更加简洁的功能集和强大的兼容性。
  • 数据表格编辑器（web 端数据处理）
• 图片文件。定稿成 svg 或者 png。
  • 矢量图形 svg。使用数学公式和几何形状（如点、线、曲线和多边形）来描述图像。这意味着图像是通过一系列指令生成的，而不是固定的像素网格。由于 svg 在 web 端的强大兼容性，web 端的图形经常使用 svg 作为载体。相较于栅格图像，它牺牲了复杂图像的描述能力，换来了其轻量性和纯文本描述的能力。
  • 栅格图像 png、jpg、gif。由像素网格组成，每个像素都有特定的颜色和位置。图像在放大的时候会由于像素的密度不够而导致图像模糊，并且在特定的像素下，展示图像会出现锯齿的情况。

推荐框架或库：

• 文本文件：
  • markdown：marked、markdown-it
  • 代码文件：Codemirror、Monaco Editor
• 文档文件
  • WYSIWYG：quill、tinymce，前者开源免费，后者免费版阉割
  • block-style：Editor.js
  • 数据表格：Handsontable
  • 演示文件：slidev、revealjs
• 图片文件
  • 矢量图像：draw.io
  • 栅格图像：tui-editor