anchor - 复制和粘贴时如何处理 contenteditable 中的 URL 相对/绝对 "glitch"

Question

在 contenteditable 区域中，如果您粘贴带有 URL 属性的元素，在某些浏览器中会将 URL 从 relative 转换为 >绝对。

我读过一些错误报告，声称它在最新版本中已“修复”，但事实并非如此。

我把这个 fiddle 放在一起来演示: Hurray for Demos!

它就在那里，它很难看，我想知道修复它的最佳方法是什么。

1. 我想到的第一个想法是onpaste，找到当前节点中的所有 anchor 并用正则表达式解析它。我认为并不理想，但它可能有效。

2. ???

3. ???

我真的希望他们不要管事情，不要用 contenteditable 造成这么多与浏览器相关的问题，但我想这会让事情变得太容易 .

对于解决这个问题的最佳方法有什么想法吗？

Answer 1

CKEditor 在让浏览器破坏数据之前，将所有 src、name 和 href 属性复制到 data-cke-saved -src|href 属性。不幸的是，由于数据是一个字符串，因此必须通过正则表达式来完成。您可以在这里找到代码:/core/htmldataprocessor.js#L772-L783 .

var protectElementRegex = /<(a|area|img|input|source)\b([^>]*)>/gi,
    // Be greedy while looking for protected attributes. This will let us avoid an unfortunate
    // situation when "nested attributes", which may appear valid, are also protected.
    // I.e. if we consider the following HTML:
    //
    //  <img data-x="&lt;a href=&quot;X&quot;" />
    //
    // then the "non-greedy match" returns:
    //
    //  'href' => '&quot;X&quot;' // It's wrong! Href is not an attribute of <img>.
    //
    // while greedy match returns:
    //
    //  'data-x' => '&lt;a href=&quot;X&quot;'
    //
    // which, can be easily filtered out (#11508).
    protectAttributeRegex = /([\w-]+)\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|(?:[^ "'>]+))/gi,
    protectAttributeNameRegex = /^(href|src|name)$/i;

function protectAttributes( html ) {
    return html.replace( protectElementRegex, function( element, tag, attributes ) {
        return '<' + tag + attributes.replace( protectAttributeRegex, function( fullAttr, attrName ) {
            // Avoid corrupting the inline event attributes (#7243).
            // We should not rewrite the existed protected attributes, e.g. clipboard content from editor. (#5218)
            if ( protectAttributeNameRegex.test( attrName ) && attributes.indexOf( 'data-cke-saved-' + attrName ) == -1 )
                return ' data-cke-saved-' + fullAttr + ' data-cke-' + CKEDITOR.rnd + '-' + fullAttr;

            return fullAttr;
        } ) + '>';
    } );
}

然后，在处理从可编辑元素获取的 HTML 时，data-cke-saved-* 属性会覆盖原始属性。