Chrome没有获得所选的html字符串包装标签（contenteditable） [英] Chrome doesn't get the selected html string wrapping tags (contenteditable)

问题描述

我正在使用Tim Down的此解决方案，以获取可供选择的div中的所选html，并且正常工作谢谢Tim！）
但是使用Chrome，如果我在html标签的边界选择一个html字符串，如下图所示： http://i.imgur.com/UiYzrcp.png?1 ：

我得到的是在这种情况下，只需纯文本（ test ）

如果我将选择扩展到下一个字符code> c ），而是得到正确的html（< strong> test< / strong> c ）。 / p>

我可以通过选择图像中的单词来获取Webkit中的完整HTML吗？
谢谢

解决方案

不是真的。当它被添加到选择中时，WebKit将任何范围的每个边界归一化，使其符合WebKit在文档中有效选择/插入位置的想法。您可以更改原始功能，以便它检测到包含元素中所有文本的选择的情况，并扩展选择范围以包围该元素（不实际更改选择）。这里有一个简单的例子（对于更一般的情况，您可能需要一些更清晰的例子），例如文本在嵌套元素内部，检测块/内联元素等）时：

演示： http://jsfiddle.net/btLeg/

代码：

  function adjustRange（range）{
 range = range.cloneRange（）; 
 
 //如果元素的文本
 //被范围
 var container = range.commonAncestorContainer完全选择，则展开范围以涵盖完整元素; 
 var parentElement = container.nodeType == 3？ 
 container.parentNode：container; 
 
 if（parentElement.textContent == range.toString（））{
 range.selectNode（parentElement）; 
} 
 
返回范围; 
} 
 
函数getSelectionHtml（）{
 var html =，sel，range; 
 if（typeof window.getSelection！=undefined）{
 sel = window.getSelection（）; 
 if（sel.rangeCount）{
 var container = document.createElement（div）; （var i = 0，len = sel.rangeCount; i  {
 range = adjustRange（sel.getRangeAt（i））; 
 container.appendChild（range.cloneContents（））; 
} 
 html = container.innerHTML; 
} 
} else if（typeof document.selection！=undefined）{
 if（document.selection.type ==Text）{
 html = document。 selection.createRange（）的htmlText。 
} 
} 
 return html; 
} 
  

I'm using this solution by Tim Down to get selected html in a contenteditable div, and it's working fine (thank you Tim!) But using Chrome, if I select a html string exactly at the boundaries of a html tag, as in this image: http://i.imgur.com/UiYzrcp.png?1:

what I get it's just plain text (test in this case).

If I expand the selection to a next character (letter c for example), instead I get the correct html (<strong>test</strong> c).

Can I get the full html in Webkit by selecting a word like in the image? Thanks

解决方案

Not really. WebKit normalizes each boundary of any range when it's added to the selection so that it conforms to WebKit's idea of valid selection/caret positions in the document. You could change the original function so that it detects the case of a selection containing all the text within an element and expanding the selection range to surround that element (without actually changing the selection). Here's a simple example (you may need something cleverer for a more general case, such as when the text is inside nested elements, detecting block/inline elements, etc.):

Demo: http://jsfiddle.net/btLeg/

Code:

function adjustRange(range) {
    range = range.cloneRange();

    // Expand range to encompass complete element if element's text
    // is completely selected by the range
    var container = range.commonAncestorContainer;
    var parentElement = container.nodeType == 3 ?
            container.parentNode : container;

    if (parentElement.textContent == range.toString()) {
        range.selectNode(parentElement);
    }

    return range;
}

function getSelectionHtml() {
    var html = "", sel, range;
    if (typeof window.getSelection != "undefined") {
        sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                range = adjustRange( sel.getRangeAt(i) );
                container.appendChild(range.cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

这篇关于Chrome没有获得所选的html字符串包装标签（contenteditable）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！