在可连接的元素内创建一个不可编辑的块

Make an uneditable block inside a contanteditable element

本文关键字：一个 编辑 元素 可连接 创建      更新时间：2023-09-26

我想在TinyMCE中放入一个不可编辑的元素，该元素本身可以像<img一样被选择，剪切，粘贴和拖动>但它的内容是不可编辑的。

我尝试了

与Chrome。它不可编辑。但它也不能被选择或拖动。

有没有办法在内容可编辑区域中使复合元素（如

）原子化，就像角色或图像一样。

一个技巧是使用input[type="button"]，因为它们即使在contenteditable区域中也是不可编辑的。

<textarea>
    <p>This is editible content.</p>
    <input value="This is uneditable content." type="button" draggable="true" style="border: 0; background: transparent; padding: 0; margin: 0; font-family: inherit" />
</textarea>
<script>
    tinyMCE.init({ mode: 'textareas' });
</script>

TinyMCE 小提琴

它并不完美，因为输入不能有子元素。

如果需要显示动态 HTML，可以将 HTML 呈现为 canvas 元素（使用 html2canvas 或等效项），然后将input[type="button"]的背景图像设置为在画布上调用getDataURL获得的字符串。（您还需要计算呈现的 HTML 的高度和宽度，并设置input[type="button"]高度和宽度以匹配。

我发现维基百科的新所见即所得编辑器已经实现了这一点。页面底部相关主题的参考编号和表格是可拖动的。它们都是复合元素。

当鼠标悬停在设计为整体可拖动的元素上时，它会在其上放置一个不可拖动的不可编辑的

作为保护器。单击保护程序时，它将替换为透明的 。因此，用户实际拖动的是。用户删除 后，它将最初位于 下的元素移动到新位置。
相关文章：