execCommand() 现在已过时,有什么替代方法?

Oma*_*mar 83 html javascript css execcommand

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

Mik*_*nen 103

2022 年\xe2\x80\x932024 答案:已execCommand()正式过时/已弃用,但别无选择。因此,如果您必须拥有富文本支持,则必须继续使用execCommand()并自行弄清楚什么实际上适用于您想要支持的浏览器。

\n

请注意,现实世界的用户代理(Chrome、Firefox 和 Safari 等浏览器)无法放弃对它的支持,execCommand()因为很多服务都需要对其的支持。可悲的是 HTML5 无法指定任何共同点。这是因为浏览器供应商不同意execCommand()应该如何工作。因此,不能为 HTML5 指定任何内容,其总体目标是指定所有 \xe2\x80\x93 内容,并且仅指定任何新浏览器进入市场所需的完全互操作性 \xe2\x80\x93 内容。然而,在我看来,HTML5 在这里失败了,因为execCommand()实际上需要兼容性任何新浏览器进入市场因此,将至少一种浏览器特定实现标准化为官方实现是有意义的。

\n

当前的所有标准化工作(输入事件 2、剪贴板 API)甚至未能尝试涵盖execCommand()实际功能(例如,撤消/重做、在选择范围内实际更改内容)。

\n

最难解决的部分是插入符号移动、选择文本、不同的 IME(输入法编辑器)行为和处理本机剪贴板。根据浏览器和操作系统的不同,它们以各种方式相互作用。例如,iOS Safari 在 iPad 上书写繁体中文时的行为与 Windows 上使用泰语输入法的 Firefox 完全不同。这又与在 Chromebook 上运行的 Chrome 编写芬兰语或使用多个 UNICODE 点编码输入表情符号字符完全不同。由于没有一个可用的 JS API 会公开所有细节,因此对于大多数浏览器来说,您也必须使用contenteditable和 来execCommand()从 IME 获取正确的输入。

\n

另请注意,例如 Android GBoard 还需要了解同一可编辑内容中的周围文本,因为它使用 AI 逻辑来正确找出在输入文本时向用户提供哪些单词建议,因此您不能用单个空的不可见内容来伪造此内容插入符号下的文本区域,因为这会缺少所需的上下文。这并没有阻止人们尝试这样做,但在实践中却以各种方式失败了。

\n

这种情况已经持续了五年多,所以也不要指望会有任何迅速的变化。

\n

  • 目前的“计划”似乎是需要富文本编辑器的应用程序应该监听“beforeinput”事件,从事件中收集待完成的修改信息并阻止浏览器默认行为,而是执行自定义内容修改(自定义富文本编辑器)文本编辑器逻辑)仅在 JS 代码中,然后使用 HTML+CSS 渲染结果。这需要在 JS 中实现所有内容,包括撤消/重做和所有操作,因此不需要任何浏览器支持。 (3认同)
  • @aKiRa 你能提供更多详细信息吗?根据 https://caniuse.com/?search=execcommand ,它应该仍然受到支持。 (3认同)
  • 有关背景信息:https://medium.com/content-uneditable/fixing-contenteditable-1a9a5073c35d (2认同)
  • 2023 年仍然如此 (2认同)

Ahm*_*man 47

您可以使用以下内容:

navigator.clipboard.writeText('text to be copied');
Run Code Online (Sandbox Code Playgroud)

其作用与document.execCommand("copy");

  • 问题是当您需要编写文本以外的内容时,例如 HTML。execCommand 使您可以将事件侦听器附加到复制方法,并且该侦听器获取更有用的 ClipboardEvent 对象。 (2认同)
  • @AdrianStanisławski 是的,他们没有完全取代 execCommand,这很糟糕 (2认同)

Joh*_*ohn 29

我为我平台的 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对于下划线(确保您的锚的样式与 u 元素区分开来;u 可能会被视为“已弃用”,尽管我会在未来十年左右修复标准时将其反转,请适当使用它)。
  • sub 用于垂直显示低于正常文本的子行文本。
  • sup 用于显示垂直高于普通文本的超行文本。
  • 千万不能使用<span>元素专门添加这些样式,屏幕阅读器将无法理解或显示错误行为; 如果使用得当,它仍然是一个有效的通用内联元素。

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

  • 我可能是错的,但 execComand 可以免费为您提供撤消/重做。如果我们不使用 execCommand,什么是一个好的替代方案? (2认同)

Sal*_*808 10

替代方案document.execCommand()是剪贴板 API,通过navigator.clipboard. 根据 MDN Web 文档 ( https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API ):

此 API 旨在取代使用 document.execCommand() 访问剪贴板。

编辑:正如评论和上面引用的文本中提到的,这仅满足要求的子集(剪贴板访问)。

  • 如何使用剪贴板 API 将文本加粗、撤消/重做更改等?这仅实现了 execCommand 功能的非常有限的子集。 (38认同)

Abd*_*lam 8

这里的结论是,尽管w3C有一个关于 的警告execCommand(),但即使在 2022 年,它仍然在工作,而且还没有标准的替代方案,除非导致使用 javascript 版本库。


Mar*_*ser 7

看起来替代方案是 Input Events Level 2

虽然创建一个自制的 WYSIWYG 编辑器很诱人,但我个人会坚持使用 execCommand 直到新标准到来。因为我们都会自己编写一个完整的编辑器,而不是重复使用现有的工作解决方案。

  • @MikkoRantalainen 完全同意。现在已经是 2022 年了,execCommand 仍然被视为已弃用,并且仍有计划替换它以提供相同的功能。即使是已经提出的方案(似乎没那么有用)在 6 年多之后似乎也没有任何进展。同时,所有主要浏览器(根据 CanIUse.com 至少有 15 个)继续支持 execCommand。 (5认同)
  • @IainCollins 浏览器供应商实际上没有选择,因为他们在等待合理的规范时无法从当前的“糟糕的富文本编辑”转变为“没有富文本编辑”。我很失望他们只是没有标准化 execCommand() 的合理部分以允许干净的前进方式。 (2认同)

ger*_*ico 5

参考文档称其为警告。

预计未来这两个规范都将被 Content EditableInput Events取代。

正如每一个预测一样,只需等待即可确定。

  • `contentEditable` 规范在 2015-2020 年间一直在工作中,最终结果是零行规范:https://w3c.github.io/contentEditable/ 。我不会屏住呼吸等待这个规格。 (6认同)
  • 除此之外,现在已经是 2022 年了,我们似乎仍然距离取代 execCommand 还差得很远,而且没有任何含糊的提议甚至试图解决同样的问题。 (2认同)