在一个html页面中,你可能有一些像这样的两段代码:
<hr />
<p>The first paragraph</p>
<p>The second paragraph</p>
<hr />
,很简单,这两个标签会像这样呈现:
第一段
第二段
我感兴趣的是允许用户单击渲染的html代码中的某个地方,以便用JQuery插入一个新元素。例如,如果我在第一段中的单词f*或*st中单击字母I和字母r之间(只需单击,不突出显示/选择),我将能够在HTML代码中的该位置插入自定义span元素或任何我喜欢的东西,结果如下:
<hr />
<p>The fi<span id="myCustomSpan"></span>rst paragraph</p>
<p>The second paragraph</p>
<hr />
有什么可以帮助我的主意吗?我的要求不包括绝对定位。这解决不了我的问题。
这是肮脏的,但利用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();
});
我的解决方案是:http://jsfiddle.net/gion_13/L6aeT/
它通过计算字符串的实际大小(以px为单位)来工作。
这可以通过一些复杂的脚本来完成。
i可以说明一个你可以尝试的算法。
1。JQuery有一个API offset() http://api.jquery.com/offset/,使用它你可以得到偏移量和元素。
2。现在您需要获取元素的innerHTML,将其作为字符串,从偏移Y值中获取,在字符串中的Y位置分割。将元素设置为两个元素
3。现在您可以使用creteElement(tagname)在脚本中直接创建一个Element,并设置innerHTML,然后将其插入到