无法在 document.execCommand 中使用 insertHTML 设置 contentediable="false"

Question

我有一个令人满意的部门。我构建了从我的计算机直接在 contentediable div 内上传图像的可能性。到这里为止一切都很完美。我将图像包装在另一个 div 中，因此我可以向图像添加一个图标（以便可以删除图像）。 该图标是一个

span

元素。

我将图像插入到 contentediable div 中，如下所示：

document.execCommand(insertHTML, null, htmlString);

这是我添加的htmlString：

<div class="wrapper"><div class="icon-wrapper"><span contenteditable="false" class="material-symbols-outlined">close</span></div><img src="IMAGE_URL" ></div>

我的图标位于

span

属性内。在浏览器中它看起来像这样：

在此之前的一切都是正确的。 但问题是，图标也是可编辑的。如果我单击该图标，我可以更改该图标的文本，因此该图标会消失，因为它仅在

span

属性内的文本为

close

时才会显示。

在我的 htmlString 中，我将属性

contentediable="false"

添加到

span

元素，但它不起作用。 如果在浏览器中打开开发工具并检查渲染的 html，我可以看到

contenteditable

属性未设置。 这是chrome开发者工具渲染出来的html：

<div class="wrapper"><div class="icon-wrapper"><span class="material-symbols-outlined">close</span></div><img src="IMAGE_URL"></div>

我认为这是

document.execCommand

的问题。

我向 htmlString 内的 span 元素添加了

contentediable="false"

属性，因为我希望这可以解决这个问题。但我不知道为什么它被忽略。当我检查浏览器中的元素时，未设置属性。

我尝试将属性

contentediable="false"

添加到父级（图标包装器）。但这里也有同样的问题。

当我使用开发人员工具直接在浏览器中编辑 html 并添加 contentediable 属性时，其工作原理与预期一致。但在我看来，它应该与我给函数的 htmlString 中设置的属性一起使用

document.execCommand

。

我在互联网上没有找到解决此问题的方法。

Answer 1

尝试在插入 HTML 后设置

contenteditable

属性，如下所示：

// Assuming htmlString contains your HTML
var htmlString = '<div class="wrapper"><div class="icon-wrapper"><span class="material-symbols-outlined">close</span></div><img src="IMAGE_URL"></div>';

// Insert the HTML
document.execCommand('insertHTML', null, htmlString);

// Set contenteditable="false" for the span element
var spanElement = document.querySelector('.icon-wrapper span');
spanElement.setAttribute('contenteditable', 'false');