HTML可以用不可编辑的岛屿来满足 [英] HTML contenteditable with non-editable islands

问题描述

我有一些基于浏览器的WYSIWYG编辑器，用户可以编辑文档模板。

文档模板是一个普通的html，带有一些特殊的合并代码占位符。这样的模板通过用来自数据库的数据替换这些占位符来实例化。这给了最终的文件 - 模板的一个实例。

我目前的方法如下所示：

 < div contenteditable> 
带< input type = button class =mergecodevalue =MergeCode1>的示例模板。 
< / div> 
  

（在线范例： http://jsfiddle.net/tFBKN/ ）

输入在这种情况下是不可编辑的，并且表现得像一个坚实的块一样 - 我需要。
用户可以通过点击DEL或BACKSPACE作为任何其他字符等来删除这样的合并代码。通过对这样的input.mergecode拥有适当的CSS，我能够实现我想要的外观。

但是有了这种方法，我在三个不同的UA中遇到了三个不同的问题：

• IE - CSS {font：inherit} 根本不起作用，所以如果输入在< b> 像这里< b>< input value =test>< / b> 它不会继承任何字体样式。 b
• FF - 包含< input> 元素的片段副本从剪贴板内容中删除该输入，以便进一步的粘贴操作可插入所有内容，但不会输入内容。 b $ b
• GC - 在< input> 产生奇怪的结果（ bug ）

所以我正在寻找其他想法代表HTML中不可编辑的内嵌块岛屿。

其他我迄今尝试过的方法：

• < span contenteditable =false> MergeCode1< / span > - 它不起作用，因为大多数UA会从选择中删除此类节点。因此，不可能在选择之上应用< b> 或< i> 包含这样的跨度。

任何其他想法？

解决方案

另一个看起来很有前途的想法是：

使用空跨度和 :: before {content：caption; } 应该在DOM中产生一个不可编辑的块作为没有插入符的位置。

你可以在这里试一下 http://jsfiddle.net/TwVzt/1/

<但是这种方法并不是没有问题的（在我的例子中）：没有办法使用 style 声明 :: before 内联DOM属性所以整套应该在CSS中预先声明。
但是我拥有的合并代码集非常大，在一些使用情况下甚至是未知的。叹气。

然而，如果有人会有更好的情况（已知的代码集），那么就把这个配方放在这里。

I have sort of browser based WYSIWYG editor where users can edit documents-templates.

Document-template is an ordinary html with some special "merge code placeholders". Such template gets "instantiated" by replacing these placeholders by data coming from DB. This gives final document - an instance of the template.

My current approach looks like this:

<div contenteditable>
  Sample template with <input type=button class="mergecode" value="MergeCode1">.
</div>

(Online sample to play with: http://jsfiddle.net/tFBKN/ )

The input is not editable in such case and behaves as a solid block - exactly what I need. Users can delete such merge codes by clicking DEL or BACKSPACE as any other characters, etc. By having proper CSS for such input.mergecode I am able to achieve look-n-feel I want.

But with such approach I have three different problems in three different UAs:

• IE - CSS { font:inherit } simply does not work there, so if the input is inside <b> like here <b><input value="test"></b> it does not inherit any font styles.
• FF - Copy of fragment that contains <input> element removes that input from clipboard content so further paste operation inserts everything but not inputs.
• GC - Click on {BACKSPACE} immediately after the <input> produces weird results (bug)

So I am looking for other ideas of how to represent non-editable inline-block alike "islands" in HTML.

Other approach that I've tried so far:

• <span contenteditable="false">MergeCode1</span> - it does not work as most of UAs remove such node from selection. So it is not possible to, say, apply <b> or <i> on top of selection that contains such span.

Any other ideas?

解决方案

One more idea that looks promising:

To use empty span with ::before { content:"caption"; } that should produce non editable block represented in in DOM as a node having no caret positions inside.

You can try it here http://jsfiddle.net/TwVzt/1/

But this approach is not free of problems (in my case): There is no way to declare ::before inline using style DOM attribute and so the whole set should be declared in CSS upfront. But set of merge codes I have is pretty large, even unknown upfront in full in some use cases. Sigh.

Nevertheless putting this recipe here if someone will have better circumstances (known set of codes).

这篇关于HTML可以用不可编辑的岛屿来满足的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！