DREI：面向 HTML 的所见即所得 Emacs

# DREI：用于 HTML 的所见即所得 Emacs Source: https://speechcode.com/blog/drei 在编辑文本时，WYSIWYG（https://en.wikipedia.org/wiki/WYSIWYG），即“所见即所得”，是理想的方式——如果你能做到的话。当我开始写这个博客时，我用 Scheme 代码来表示每篇博文的文本，就像这样： > `` ((p) "When editing text, " (a href "https://en.wikipedia.org/wiki/WYSIWYG") "WYSIWYG" ", or What You See Is What You Get, is the way to go — if you can get it. When I started this blog, I used Scheme code to represent the text of each blog post, like this:") ... `` 可以想象，那是一种乏味的文本编辑方式。于是我便改用 GNU Emacs（https://en.wikipedia.org/wiki/GNU_Emacs）的 Org mode（https://en.wikipedia.org/wiki/Org-mode），并编写了一个围绕 Pandoc（https://pandoc.org/）的自制包装器，将 Org 文件转换为 HTML，并做一些自定义改写，例如添加标准的头部和元数据。Org mode 虽然强大，但它很像 Markdown，在很多方面都很贫乏。有些可以用 HTML 表达的东西，在 Org mode 中却无法表达，除非直接编辑 HTML，而这又违背了初衷。于是我转回手动编辑 HTML，并编写了一个 Emacs 次要模式，在正常编辑时隐藏标记，只显示文本。那用起来仍然毫无乐趣。与其他方法一样，这意味着编辑文章的形式与最终产品完全不像，我的任何 CSS 格式都没有被渲染出来。 我最终决定投入时间去做出更好的东西。我编写了 DREI1（https://speechcode.com/blog/drei#footnote1），它代表“DREI Rich Emacs Implementation”。这是一个 Tauri（https://tauri.app/）应用2（https://speechcode.com/blog/drei#footnote2），实现了 Emacs 文本编辑命令的一个强大子集，同时也包含了 Blockquote、Heading、Link 等用于添加 HTML 元素的命令。所有编辑命令都用 Javascript 编写。到目前为止，我已经实现了： - 按字符、行、词、句子、段落和缓冲区进行前向/后向删除和移动 - 标记区域 - 复制和粘贴 - 字符和词的转置 - 按词进行首字母大写、小写转换和大写转换 - 将区域包裹在 `<blockquote>`、`<h1>`、`<p>` 和 `<a>` 中 - 添加有序和无序列表 - 保存到文件系统或 Web 服务器 还缺少的两个重要功能是增量搜索和撤销。还有很多工作要做，但它已经足够强大，并且比我以前用来编辑 HTML 的其他工具好用得多。目前，与其他版本的 Emacs 不同，DREI 一次只能编辑一个页面。可以使用 `--file` 命令行参数指定输入文件，也可以使用 `--url` 指定从中读取页面的 URL。另一个必需参数 `--selector` 指定一个 CSS 选择器，用以指明页面中哪些部分应该可编辑。整个页面都会显示，但只有该部分可以被更改。 例如，要编辑从文件读取的页面的全部内容： `drei --selector body --file /tmp/index.html` 按下 `C-x C-s` 将把编辑后的文件保存到 `/tmp/index.html`。 另一方面，要从 Web 服务器读取页面并将其写回该服务器，只允许编辑 ID 为 `contents` 的 HTML 元素内部的内容： `drei --selector '#contents' --url https://example.com/index.html` 这将使用 HTTP GET 通过指定的 URL 读取页面，并使用 HTTP PUT 将其写回。不过有个小转折：GET 读取整个页面，但 DREI 只 PUT 页面的已编辑部分，例如本例中的 `#contents`。其背后的想法是，服务器可以在将页面提供给 DREI 之前对页面进行预处理，并在更新之后进行后处理。 当我编辑自己的博客文章时，磁盘上的文件只包含一个最简 HTML 文档。当 DREI 请求它时，服务器会将其扩展为包含所有标准元数据、一个页眉和一个页脚，然后传送给 DREI。当 DREI 保存新版本时，服务器只接收页面中已编辑的部分，并将其包裹在原始的最简 HTML 中。这样一来，服务器负责处理样板内容，我看到的是页面与我的网站上完全一样的外观，而存储的文件只包含核心页面。 以下是服务器的 GET 和 PUT 处理器