function placeCaretAfterNode(node) {
if (typeof window.getSelection != "undefined") {
var range = document.createRange();
range.setStartAfter(node);
range.collapse(true);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
}
<script type="text/javascript">
function pasteHtmlAtCaret(char) {
var sel = rangy.getSelection();
var range = sel.rangeCount ? sel.getRangeAt(0) : null;
var parent;
if (range) {
var parentEl = document.createElement("span");
jQuery(parentEl).addClass('char').addClass('latest');
parentEl.appendChild(range.createContextualFragment(char));
// Check if the cursor is at the end of the text in an existing span
if (range.endContainer.nodeType == 3
&& (parent = range.endContainer.parentNode)
&& (parent.tagName == "SPAN")) {
range.setStartAfter(parent);
}
range.insertNode(parentEl);
if(jQuery(parentEl).parent().get(0).tagName.toLowerCase() == 'span'){
var spanParent = jQuery(parentEl).parent('span');
var parentEl = jQuery('<span class="char latest spanchild"></span>').insertAfter(spanParent).append(parentEl).get(0);
}
jQuery("span.spanchild").each(function(index, element){
var content = jQuery(element).children('span.char').first().html();
jQuery(element).children('span.char').remove();
jQuery(element).html(content);
jQuery(element).removeClass('spanchild');
});
range.setStartAfter(parentEl);
rangy.getSelection().setSingleRange(range);
jQuery(parentEl).removeClass('latest');
}
}
</script>
4条答案
按热度按时间yvt65v4c1#
在IE〈= 8以外的浏览器中,可以这样做:
然而,一些浏览器(特别是基于WebKit的浏览器)对插入符号在文档中的有效位置有固定的概念,并会规范化您添加到选择中的任何范围以符合这些概念。下面的示例将在Firefox和IE 9中执行您想要的操作,但在Chrome或Safari中不执行:
http://jsfiddle.net/5dxwx/
没有一个解决方法是好的。选项包括:
<a>
元素而不是<span>
,因为WebKit对<a>
元素有例外sz81bmfz2#
我设法使用带有
 
的“a”标记解决了这个问题。例如:-"<a>"+ content/element you want to add +"</a> "
5gfr0r5j3#
这个函数管理我所想到的:
pvabu6sv4#
只需
span.contentEditable = false
到Tim的解决方案即可正常工作;)