javascript - 根据我使用 javascript/JQuery 单击的位置更改 HTML

Question

在 html 页面中，您可能有一些代码包含如下两段:

<hr />
<p>The first paragraph</p>
<p>The second paragraph</p>
<hr />

非常简单，这两个标签会像这样呈现:

---

第一段

第二段

---

我感兴趣的是允许用户单击呈现的 html 代码中的某处，以便使用 JQuery 插入新元素。例如，如果我在第一段中找到的单词 f*ir*st 中单击字母 i 和字母 r(只需单击，没有突出显示/选择)，我将能够插入自定义 span 元素或我在 HTML 代码中那个位置完全喜欢的任何东西，结果如下:

<hr />
<p>The fi<span id="myCustomSpan"></span>rst paragraph</p>
<p>The second paragraph</p>
<hr />

有什么想法可以帮助我吗？我的要求不包括绝对定位。那不会解决我的问题。

Answer 1

这很脏但是使用了 contenteditable:http://jsfiddle.net/Jj9Mp/ .

$('div').click(function(e) {
    $('div').attr('contenteditable', true);
    document.execCommand("InsertHTML", false, "<span class=red>!</span>")
    e.stopPropagation();
});

$(':not(div)').click(function(e) {
    if($(this).parents('div').length === 0) {
        $('div').attr('contenteditable', false);
    } else {
        $('div').click();
    }
    e.stopPropagation();
});