Oma*_*mar 83 html javascript css execcommand
我打算使用Document.execCommand()
方法和contenteditable
属性来构建我的自定义 WYSIWYG 编辑器。但是当我查看 的文档时Document.execCommand()
,我发现它现在已经过时了。它的现代(或现存)替代品是什么?
Mik*_*nen 103
2022 年\xe2\x80\x932024 答案:已execCommand()
正式过时/已弃用,但别无选择。因此,如果您必须拥有富文本支持,则必须继续使用execCommand()
并自行弄清楚什么实际上适用于您想要支持的浏览器。
请注意,现实世界的用户代理(Chrome、Firefox 和 Safari 等浏览器)无法放弃对它的支持,execCommand()
因为很多服务都需要对其的支持。可悲的是 HTML5 无法指定任何共同点。这是因为浏览器供应商不同意execCommand()
应该如何工作。因此,不能为 HTML5 指定任何内容,其总体目标是指定所有 \xe2\x80\x93 内容,并且仅指定任何新浏览器进入市场所需的完全互操作性 \xe2\x80\x93 内容。然而,在我看来,HTML5 在这里失败了,因为execCommand()
实际上需要兼容性任何新浏览器进入市场因此,将至少一种浏览器特定实现标准化为官方实现是有意义的。
当前的所有标准化工作(输入事件 2、剪贴板 API)甚至未能尝试涵盖execCommand()
实际功能(例如,撤消/重做、在选择范围内实际更改内容)。
最难解决的部分是插入符号移动、选择文本、不同的 IME(输入法编辑器)行为和处理本机剪贴板。根据浏览器和操作系统的不同,它们以各种方式相互作用。例如,iOS Safari 在 iPad 上书写繁体中文时的行为与 Windows 上使用泰语输入法的 Firefox 完全不同。这又与在 Chromebook 上运行的 Chrome 编写芬兰语或使用多个 UNICODE 点编码输入表情符号字符完全不同。由于没有一个可用的 JS API 会公开所有细节,因此对于大多数浏览器来说,您也必须使用contenteditable
和 来execCommand()
从 IME 获取正确的输入。
另请注意,例如 Android GBoard 还需要了解同一可编辑内容中的周围文本,因为它使用 AI 逻辑来正确找出在输入文本时向用户提供哪些单词建议,因此您不能用单个空的不可见内容来伪造此内容插入符号下的文本区域,因为这会缺少所需的上下文。这并没有阻止人们尝试这样做,但在实践中却以各种方式失败了。
\n这种情况已经持续了五年多,所以也不要指望会有任何迅速的变化。
\nAhm*_*man 47
您可以使用以下内容:
navigator.clipboard.writeText('text to be copied');
Run Code Online (Sandbox Code Playgroud)
其作用与document.execCommand("copy");
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,否定无意义的维护。祝你好运!
Sal*_*808 10
替代方案document.execCommand()
是剪贴板 API,通过navigator.clipboard
. 根据 MDN Web 文档 ( https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API ):
此 API 旨在取代使用 document.execCommand() 访问剪贴板。
编辑:正如评论和上面引用的文本中提到的,这仅满足要求的子集(剪贴板访问)。
看起来替代方案是 Input Events Level 2。
虽然创建一个自制的 WYSIWYG 编辑器很诱人,但我个人会坚持使用 execCommand 直到新标准到来。因为我们都会自己编写一个完整的编辑器,而不是重复使用现有的工作解决方案。
参考文档称其为警告。
预计未来这两个规范都将被 Content Editable和Input Events取代。
正如每一个预测一样,只需等待即可确定。