我打算将Document.execCommand()
方法与contenteditable
属性一起使用来构建我的自定义WYSIWYG编辑器。但是,当我在documentation中检查Document.execCommand()
时,我发现它已经过时了。什么是现代的(或现存的)替代方案?
最佳答案
我创建了Rich Editor,用于平台的XML(HTML5 + XHTML)编辑。我不会说document.execCommand()
完全死了,因为它的某些部分仍然可以正常工作。不幸的是,对我来说,主要的问题是浏览器使用许多不同的代码来生成那些样式的样式,而盲人或几乎这样的样式无法被屏幕阅读器识别。
另外,我不得不克服的最昂贵的时间错误是壁虎/普雷斯托错误,在视觉和技术上的选择(为什么它们不是同一件事,不要问我)会导致DOM的一部分被更改,用户没有意图,这归结为以下事实:每个字符的像素数很低,因此,如果Rich Editor不遵守视觉选择,则用户将很快走开。要征服它需要四个月,而且还有其他错误。
最终,这是一项艰巨而可实现的工作,但是,如果您打算像我一样构建HTML/XML编辑器,则您应该计划至少六个月,如果您不仅打算正确地进行测试,还要测试到讨厌的程度,那么有人来指出另一个错误。
JavaScript的主要重点应该放在以下方面:
document.createRange()
window.getSelection()
appendChild
insertBefore
insertBefore
+ nextSibling
replaceChild
代替使用不同浏览器中的
execCommand()
生成的不一致代码(通常设置内联样式,如果不完全否定它会使网站的CSS复杂化),您应该坚持使用以下元素,这些元素不仅可以控制,而且与屏幕兼容读者:强调的
em
(或“斜体”,不建议使用<i>
)。 strong
(或“粗体”,不建议使用<b>
)。 u
(请确保您的 anchor 的样式与u元素有所区别;尽管我会在 future 十年左右修订标准时将其撤消,并适当使用它,但u
可能被视为“已弃用”)。 sub
在垂直方向上比普通文本低。 sup
,用于显示垂直于普通文本的超行文本。 <span>
元素来专门添加这些样式,因为屏幕阅读器将无法理解或发现错误的行为。如果正确使用,它仍然是有效的通用内联元素。 实际上,我一直打算修改我的Rich Editor(虽然没有正确重写,但已经得到了补丁),但欢迎您在源代码加载到我的个人资料链接的网站的博客页面上时查看源代码。最初的元素花了我11个月的时间,但根据我现在的经验,我认为这大约需要3到4个小时。如果您是认真的人,我强烈建议您远离框架和库。 “但是……但是,它们使生活更轻松!” ...,直到您要使用新版本并不得不重写整个元素。第一次使用纯JavaScript并取消毫无意义的维护。祝你好运!
关于javascript - execCommand()现在已过时,还有什么选择?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60581285/