-1

在我的项目中，我试图将 HTML 标记字母 (<和>) 动态添加到 contenteditable div。每当用户按下字母数字字符时，我都会附加一个空span元素，用于计算插入符号在 contenteditable div 中的位置。

问题是，当我输入如下内容时：

when <

并按下一个字母数字字符b（它调用一个函数来附加一个 span 元素），contenteditable div 只是显示when而不是when <b.

当我检查元素时，我发现 contenteditable div 具有以下内容：

when <b<span class="spanPos"></b<span>
                              ^  strange that span is holding '</b' instead of being empty

这是一个示例JSFiddle。

我不确定这是怎么发生的。请告诉我应该怎么做才能避免这个问题。

PS：我在这里尝试添加<and >，而不是 HTML 元素，例如<b></b>.

4

3 回答 3

1

正如您所说，您正在尝试添加一个可以解释为 HTML 的符号。您需要对其进行转义或使用不同的方式将其表示为 ISO 实体：

$('#btnContent').click(function(){
    $('#content').html("when &lt;b" + "<span class='spanPos'></span>");
});

http://jsfiddle.net/Dekku/jXeVW/1/

于 2013-05-14T11:32:19.570 回答
0

问题实际上是，span每当用户在 contenteditable div 中键入内容以获取插入符号的位置时，我都会在文本中附加一个元素。像这样的东西

Hello I am he|re
             ^ Caret position

然后我使用类似这样的东西span在该文本之间添加一个元素.html()

Hello I am he<span></span>re

现在，每当我添加任何代表 Html 之类的字母时<，>它都会合并跨度内的一些文本（如我在上面的帖子中所示）。

因此，我通过在通过span元素获得位置后将其删除来解决它。我按照以下步骤为用户按下的每个字母解决了这个问题。

//Store the .text() in a variable.
//Replace Html letters inside the contenteditable div with alphabets which has same width. (for exact positioning).
//add span to the modified text through .html()
//get the offset position of the span 
//Do something with that offset position
//Remove span
//Replace the .text() inside the contenteditable div with the text which was stored in a variable.

我做了很多事情来解决这个问题，因为我.text()在项目代码中的其他地方都使用了。如果我将其更改为，.html()那么我必须重写完整的代码，并且可能也无法完成该项目。

显然，我无法完成其他回复帖子中提到的事情。我希望这会对某人有所帮助。

于 2013-05-26T02:27:09.703 回答
0

我访问了您的代码，发现<bJS 中有一个不知道您是否在使用它。

使用以下代码：

$('#btnContent').click(function(){
    $('#content').html("when" + "<span class='spanPos'></span>");
});

通过删除<b标签，您将不会得到这个。或者您应该适当地靠近它以使代码正确。

编辑：

访问您的新代码后，我得到了解决方案，您应该使用以下代码：

$('#btnContent').click(function(){
    $('#content').html("when &lt;b");
    $('#content').html($('#content').html()  + "<span class='spanPos'></span>");
});

如果您需要详细信息，请告诉我。

于 2013-05-14T11:34:22.113 回答