Question

我想将一个不可编辑的元素放入TinyMCE中，它本身可以像＆lt; img＆gt;一样被选中，剪切，粘贴和拖动。但其内容不可编辑。

我试过＆lt; div contenteditable =“false”＆gt;用Chrome。它不可编辑。但它也无法选择或拖动。

有没有办法让复合元素（比如＆lt; div＆gt;）原子，就像字符或图像一样，在一个可信区域内。

Answer 1

一个技巧是使用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 Fiddle

由于输入不能包含子元素，因此并不完美。

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

Answer 2

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

当鼠标悬停在一个设计为整体可拖动的元素上时，它会放置一个不可剥离的不可编辑的＆lt; div＆gt;作为保护者。单击保护器时，它将被透明＆lt; img＆gt;替换。那么用户实际拖动的是＆lt; img＆gt;。用户删除＆lt; img＆gt;后，它会移动最初位于＆lt; img＆gt;下的元素。到了新的地方。

在一个contanteditable元素中创建一个不可编辑的块

2 个答案: