为什么document.execCommand()只在<img>标签

Why document.execCommand() only works in <img> tag?

本文关键字:标签 img 只在 document execCommand 为什么      更新时间:2023-09-26

这是我的HTML代码:

function formatDoc() {
     document.execCommand('italic', false, null);
}
<div id="toolBar2">
    <span onclick="formatDoc();">italic</span>
    <img src="images/video.jpg" onclick="formatDoc();">
</div>
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>

formatDoc()<span>标签中不工作,但在<img>标签中工作良好。为什么?它也不工作在<p>标签等。到目前为止,我试图自己找出一个解决办法都没有成功。

谁能告诉我为什么会这样?(
谢谢大家。

我也遇到了这个问题,发现设置css属性

user-select: none;

上的标记与点击处理程序运行execCommand修复了这个问题。

似乎问题是由于选择对象有错误的项目选择(焦点变化),当你点击一个HTML标签,可以选择

这是来自mozilla开发网络

当HTML文档切换到designMode时,文档对象公开execCommand方法,该方法允许运行命令来操作可编辑区域的内容。大多数命令会影响文档的选择(粗体、斜体等),而其他命令会插入新元素(添加链接)或影响整行(缩进)。当使用contentEditable时,调用execCommand()会影响当前活动的可编辑元素。

查看更多细节https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand