contenteditable中的锁定元素=“true” DIV [英] Locking elements in contenteditable="true" div
问题描述
我有一个用于用户输入的contenteditable div，当点击一个按钮时，它显示替换某些单词的选项。首先，它剥离所有html并创建跨度元素，可以替换单词。这些词的标记是不同的，我面临一些问题。
I have a contenteditable div that's used for user input, when a button is clicked it shows options to replace certain words. First it strips away all html and creates span elements where a word can be replaced. The mark up of these words is different and I face some problems.
- 当直接在跨度之前或之后点击并键入文本时，文本将具有与跨度相同的标记。在只有跨度的行上添加单词是非常困难的。我正在考虑用
& nbsp;填充跨度来解决这个问题，但看起来有点奇怪。 - 用户可以点击跨度并更改它，我宁愿让用户点击跨度，并在更改之前选择一个替换或忽略选项。换句话说，它需要被锁定。我正在考虑通过capturig keyup来实现，如果它来自一个span，那么e.preventDefault（）就可以了，但是对它进行编程是有点痛苦的。
- When clicking directly before or after a span and typing text the text will have the same markup as the span. It's very hard to add words on a line that only has the span. I was thinking of solving this by padding the spans with
but it looks kind of strange. - User can click in the span and change it, I would rather have the user click on the span and choose a replace or ignore option before changing it. In other words it needs to be locked. I was thinking of doing this by capturig keyup and if it comes from a span then e.preventDefault() on it but it's a bit of a pain to program it.
所以我的问题是：
有没有一个简单的方法来锁定一个可容纳的元素，不涉及捕获密钥和preventDefault（还没有尝试过，甚至不知道是否可以使用）？
Is there an easy way of locking a span element in a contenteditable that doesn't involve capturing key up and preventDefault (have not tried yet and not even sure if it'll work)?
当点击或移动光标直接在一个跨度旁边并键入文本时，它将是跨越的一部分，有没有一种方法不能成为跨度的一部分？使用& nbsp; 填充跨度可能会起作用，但跨度是该行上的第一个单词时看起来很奇怪。为了说明这一点，我在下面发布了一个示例html文件：
When clicking or moving the cursor directly next to a span and typing text it'll be part of the span, is there a way to not have it be part of the span? Padding the span with might work but it looks strange when the span is the first word on the line. To illustrate this I've posted an example html file below:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
</head>
<body>
<div contenteditable="true"></div>
<script type="text/javascript">
document.getElementsByTagName("div")[0]
.innerHTML="<span style='color:green'>hello</span>"
</script>
</body>
</html>
推荐答案
至于contenteditable div中的锁定元素;我正在使用需要锁定的跨距，并且不会触发keydown事件，所以在div上设置事件并检查范围是否是锁定的元素。
As for locking elements in the contenteditable div; I am using spans that need to be locked and they do not trigger keydown events so have set the event on the div and check through range if it's a locked element.
I正在使用谷歌闭包库，所以得到的范围很简单：
I am using google closure library so getting the range is simple:
goog.events.listen(document.getElementById("userInput"),//userInput= contenteditable div
[goog.events.EventType.KEYDOWN,
goog.events.EventType.PASTE],
function(e){
if(32<e.keyCode&&e.keyCode<41){//page up,down,home,end and arrow
return;
}
var el=goog.dom.Range.createFromWindow()
.getContainerElement();
if(el.className.indexOf("locked")!==-1){
e.preventDefault();
}
});
我将使用& nbsp; 如果在元素之前或之后没有空格存在，并且一旦得到解决方案，就会在这里发布空格。
I'll look into padding the locked span with if no whitespace exist before or after the element and post it here once I get the solution.
在没有检查的情况下，填充跨度，因为额外的空格将被删除。看起来很有趣，但最好不要添加文字。
Ended up padding the spans without checking since the extra whitespace will be removed later anyway. Looks kind of funny but it's better then not being able to add text.
这篇关于contenteditable中的锁定元素=“true” DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
