11

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

当我添加一些字符时，它们会添加到跨度内，但我希望将它们添加到跨度元素之后。有什么想法可以实现这一目标吗？

4

4 回答 4

21

在 IE <= 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/

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

  • 在 span 之后添加一个零宽度的空格字符并选择它
  • 使用<a>元素而不是 a ，因为 WebKit 对元素<span>进行了例外处理<a>
于 2013-04-04T14:37:20.230 回答
4

我设法使用带有&nbsp. 例子 ：-"<a>"+ content/element you want to add +"</a>&nbsp;"

于 2016-06-02T13:45:05.520 回答
3

这个函数管理我的想法：

<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>
于 2013-04-05T10:58:33.217 回答
3

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

于 2017-03-03T02:29:47.053 回答