javascript - execCommand() 现在已过时，有什么替代方法？

Question

我打算使用 Document.execCommand()方法以及 contenteditable属性来构建我的自定义 WYSIWYG 编辑器。但是当我查看 documentation 时为 Document.execCommand() ，我发现它现在已经过时了。它的现代(或现存)替代品是什么？

Answer 1

我为我平台的 XML (HTML5 + XHTML) 编辑目的创建了 Rich Editor。我不会说document.execCommand()完全死了，因为它的某些部分仍然可以正常工作。不幸的是，对我来说，主要问题是浏览器使用许多不同的代码来生成那些盲人或几乎盲人使用的屏幕阅读器无法识别的样式。
此外，我不得不克服的最昂贵的时间错误是 Gecko/Presto 错误，其中视觉和技术选择(为什么它们不是一回事，别问我)会导致部分 DOM 被更改，用户无意，这归结为每个字符的像素数很低的事实，因此如果 Rich Editor 不支持视觉选择，用户将很快走开。这需要四个月才能征服，而且还有其他错误。
最终，这是一项艰巨但可实现的努力，但如果您打算像我一样构建 HTML/XML 编辑器，您应该计划至少六个月，如果您不仅计划正确地完成它，但对其进行测试到讨厌蛋糕的程度。让有人过来指出另一个错误。
明智的 JavaScript 主要关注点应该是以下几点:

document.createRange()

window.getSelection()

appendChild

insertBefore

insertBefore + nextSibling

replaceChild

代替使用 execCommand() 生成的不一致代码来自不同的浏览器(通常设置内联样式，如果不完全否定它，这会使您网站的 CSS 复杂化)，您应该坚持使用以下元素，您不仅可以控制这些元素，而且与屏幕阅读器兼容:

em为了强调(或“斜体”，不推荐使用 <i>)。

strong对于强烈阅读的文本(或“粗体”，不推荐使用 <b>)。

u用于下划线(确保您的 anchor 的样式与 u 元素区分开来；u 可能被认为是“不推荐使用的”，尽管我会在 future 十年左右的时间里修复标准时将其逆转，请适当使用它)。

sub用于垂直显示低于正常文本的子行文本。

sup用于显示垂直高于普通文本的超行文本。

不要使用 <span>元素专门添加这些样式，因为屏幕阅读器不会理解或揭示错误行为；如果使用得当，它仍然是一个有效的通用内联元素。

我实际上一直打算修改我的 Rich Editor(它已经打了补丁，但尚未正确重写)，尽管欢迎您在我的个人资料中链接的站点的博客页面上加载源代码时查看源代码。最初的元素花了我 11 个月，但根据我现在的经验，我认为我需要大约三到四个月。如果你是认真的，我强烈建议你远离框架和库。 “但是……但是，它们让生活更轻松!” ... 直到您想使用新版本并且必须重写整个元素。第一次使用纯 JavaScript 并否定无意义的维护。祝你好运!