我有一种基于浏览器的WYSIWYG编辑器,用户可以在其中编辑文档模板.
Document-template是一个普通的html,带有一些特殊的"合并代码占位符".通过用来自DB的数据替换这些占位符,可以"实例化"这样的模板.这给出了最终文档 - 模板的一个实例.
我目前的方法如下:
<div contenteditable>
Sample template with <input type=button class="mergecode" value="MergeCode1">.
</div>
(在线样本:http: //jsfiddle.net/tFBKN/)
在这种情况下,输入是不可编辑的,并且表现为固体块 - 正是我需要的.用户可以通过单击DEL或BACKSPACE作为任何其他字符等删除此类合并代码.通过为此类input.mergecode使用适当的CSS,我可以实现我想要的外观.
但是通过这种方法,我在三个不同的UA中有三个不同的问题:
{ font:inherit }根本不起作用,所以如果输入在里面<b>就像这里一样,<b><input value="test"></b>它不会继承任何字体样式.<input>元素的片段副本从剪贴板内容中删除该输入,因此进一步粘贴操作会插入所有内容但不输入.<input>产生奇怪结果后立即单击{BACKSPACE} (bug)因此,我正在寻找其他有关如何在HTML中表示不可编辑的内联块"孤岛"的想法.
到目前为止我尝试过的其他方法:
<span contenteditable="false">MergeCode1</span> - 它不起作用,因为大多数UA从选择中删除此类节点.因此,不可能,例如,应用<b>或<i>包含此类跨度的选择.还有其他想法吗？