Question

如何在一个contenteditable div中的span元素之后设置光标？现在，我在一个span元素中有一个图像，在contenteditable div中。

当我添加一些字符时，它们被添加到span中，但是我希望它们在span元素之后添加。我有什么想法可以实现这个目标吗？

Answer 1

在IE＆lt; = 8以外的浏览器中，这样做：

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);
    }
}

但是，某些浏览器（特别是基于WebKit的浏览器）已经确定了文档中哪些位置对插入符号有效，并将规范化您添加到选择中的任何范围以符合这些想法。以下示例将在Firefox和IE 9中执行您想要的操作，但不会在Chrome或Safari中执行此操作：

http://jsfiddle.net/5dxwx/

没有一种解决方法是好的。选项包括：

在范围后添加零宽度空格字符并选择它
使用<a>元素而不是<span>因为WebKit使<a>元素成为例外

Answer 2

这个功能管理我的想法：

<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>

Answer 3

只是span.contentEditable = false让蒂姆的解决方案正常工作;）

Answer 4

我设法使用带有&nbsp的'a'标记解决了这个问题。示例： - "<a>"+ content/element you want to add +"</a> "

在contenteditable div中的span元素后面设置光标

4 个答案: