限制 contenteditable 的大小

问题描述

我正在构建一个程序，您可以在其中插入从 Webbrowser 复制的 HTML 到程序中，然后使用 contenteditable div 标签对其进行编辑，但是复制的 HTML 溢出了 div 并且不会应用相对于我的样式div 但对整个屏幕，有没有办法防止？

document.getElementById("HTmlmd").contentEditable = html;

#container-HTmlmd {
  overflow: auto;
  background-color: white;
  height: 100vh;
  width: 50%;
}
#HTmlmd {
  padding: 5px;
}

<div id="container-HTmlmd">
  <div id="HTmlmd" spellcheck="false"></div>
</div>

结果（顶部栏应该只占其他元素宽度的一半）：

解决方法

解决方案：我检查了 html 内容，发现溢出的项目是带有 position: absolute 和 position: fixed 的项目，我通过首先设置 #HTMLMD { position: relative } 解决了问题，它解决了带有 {{1} 的项目的问题}，然后我写了JS脚本：

position: absolute

将带有 let children = inner.getElementsByTagName("*"); children.forEach((e) => { if (e.style.position === "fixed") e.style.position = "absolute"; }); 的所有项目设置为 position: fixed，这绝对不是最佳解决方案，但它适用于我的情况。

contenteditable html javascript