不明白为什么execCommand被废弃

马黑黑 · 发表于 2023-1-15 12:35

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-1-15 12:37 编辑

MDN正式废弃 execCommand API 早已是板上钉钉的事实。不过，浏览器要废弃 execCommand 却不会那么容易，直至今日，主流现代浏览器都还在完美支持 execCommand API。

实际上，在线富文本编辑器基本都基于 execCommand 实现一些特定的常规功能，诸如复制、粘贴、插入，使用 execCommand 都能够轻松完成。MDN宣布废弃 execCommand 之后，主流浏览器很快就推出了自己的完美替代方案，同时在浏览器里保留对 execCommand 的全方位支持。

execCommand好像也一直没能进入w3c标准，只因各浏览器对它的支持方面给力，它才如此大放异彩。当然，这也与其功能有关：该API虽然功能不齐全、可定制性不高，但很实用。以给 textarea 插入文本为例，看看我刚写好的插入文本函数：

let insertStr = (el,str) => {
      if (!str) return;
      el.focus();
      document.execCommand('insertText', false, str);
};

函数需要两个参数，el 是编辑框，txt 是要插入的文本。函数先判断要插入的文本是否为空，如是，不执行后面的语句。接着函数令编辑框获得焦点，这个动作要做，因为 execCommand 命令是基于 document 而不是基于具体对象的，它只会往获得焦点的可编辑元素塞东西。最后用 execCommand 命令的 insertText 指令（插入文本指令），插入 str（字串变量）。execCommand需要三个参数，中间的参数是布尔参数。

这就可以了。

textarea 也有自己的插入文本命令，setRangeText(text)，用起来并不比execCommand复杂。遗憾的是，用 setRangeText(text) 插入的内容没有撤销功能，而用 execCommand 插入的东东可以无限撤销。仅从这一点看，我个人就偏爱 execCommand 命令，可惜它被遗弃了。

在花潮lrc歌词制作程序里，里面的复制功能用的是execCommand，工作状态没问题的，浏览器除IE外都会支持。

下楼给出 execCommand 插入文本的示例。