contenteditable div中的html标记的奇怪行为 [英] strange behavior of html tags inside contenteditable div

问题描述

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

In my project, I am trying to add HTML tag letter (< and >) dynamically to a contenteditable div. Whenever user is pressing alphanumeric character, I am appending an empty span element which is used for calculating the position of the caret in contenteditable div.

问题是，当我输入如下的字词：

The problem is that when I type some words like following:

when <

并按一个字母数字字符，例如 b 当时，代替时，contenteditable div显示 。

and press a alphanumeric character like b (which calls a function to append a span element), The contenteditable div is showing just when instead of when <b.

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

When I inspected the element I found the contenteditable div has the following content:

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

是示例 JSFiddle 。

Here is a example JSFiddle.

我不知道这是怎么回事。请告诉我应该如何避免这个问题。

I am not sure how this is happening. Please tell me what should I do to evade this issue.

PS：这里我试图添加< 和> ，而不是像< b>< / b> 这样的HTML元素。

PS: Here I am trying to add < and >, not HTML elements like <b></b>.

推荐答案

问题实际上是，当用户键入时，我将 span 一些东西到contenteditable div来抓取插入符的位置。像这样的

The problem was actually that I was appending a span element to the text whenever the user types something in to the contenteditable div to grab the position of the caret. Something like this

Hello I am he|re
             ^ Caret position

然后我在之间添加 span > .html（）这样的东西

Then I was adding a span element in between of that text using .html() something like this

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

现在每当我添加任何表示Html的字母，例如< / code>或> ，那么它正在合并跨度内的一些文本（如我在上面的帖子中所示）。

Now whenever I add any letter which represents Html like < or >, then it was merging some of the text inside the span (as I shown above in my post).

所以，我解决它，通过删除后，当我得到位置通过 span 元素。我按照以下步骤来解决用户按下的每个字母的这个问题。

So, I solved it by removing it just after when I get the position through span element. I followed the below steps to solve this issue for each letter pressed by the user.

//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（）那么我必须重写完整的代码，也可能无法完成项目。

I did these many things to solve this issue because I was using .text() everywhere else in my project code. If I change it to .html() then I must have rewritten the complete code and might also can't complete the project.

显然，我不能做其他回答的帖子中提到的事情。我希望这将帮助某人。

Clearly, I couldn't have done the things which were mentioned in the other answered posts. I hope this will help someone.

这篇关于contenteditable div中的html标记的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！