锁定contenteditable =" true& quot;中的元素股利 [英] Locking elements in contenteditable="true" div
问题描述
我有一个供用户输入使用的contenteditable div，当单击按钮时，它会显示替换某些单词的选项.首先，它剥离所有html并创建可以替换单词的span元素.这些单词的标记不同，我遇到了一些问题.
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来执行此操作，如果它来自某个范围，则可以在其上使用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.
所以我的问题是:
是否有一种简单的方法来将span元素锁定在contenteditable中，而该方法不涉及捕获键和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中锁定元素；我正在使用需要锁定的范围，并且它们不会触发按键事件，因此已在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.
我正在使用Google闭包库，因此获取范围很简单:
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& quot;中的元素股利的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
