2

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

我用 Chrome 尝试了 <div contenteditable="false"> 。它不可编辑。但它也不能被选择或拖动。

有什么方法可以在内容可编辑区域中使复合元素（如 <div>）原子化，就像字符或图像一样。

4

2 回答 2

0

一个技巧是使用 an，因为即使在一个区域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 渲染到画布元素（使用html2canvas或等效项），然后将背景图像设置为在画布上input[type="button"]调用获得的字符串。getDataURL（您还需要计算呈现的 HTML 的高度和宽度，并将input[type="button"]高度和宽度设置为匹配。）

于 2013-11-15T07:16:41.543 回答
0

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

当鼠标悬停在设计为整体可拖动的元素上时，它会在其上放置一个不可拖动的不可编辑 <div> 作为保护器。单击保护器时，它会被透明的 <img> 替换。所以用户实际拖动的是<img>。用户放下 <img> 后，它会将原来在 <img> 下的元素移动到新位置。

于 2013-11-21T05:18:20.887 回答