Geek asks and answers

How to handle url / absolute “crash” in content-capable when copying and pasting

In scope contenteditable, if you insert an element with a URL attribute, in some browsers it converts the URL from relative to absolute .

I read some error messages that claim to be fixed in the latest version, but this is not the case.

I put together this script to demonstrate: Hooray for demos!

It is there, it is ugly, and I wonder how best to fix it.

  • The first thought that comes to mind is to onpastefind everything anchorsin the current node and parse it with regex. Not perfect, I suppose, but it can be effective.

  • ???

  • ???

I'm sorry, they just will not leave things alone, and do not create so many problems with the browser with contenteditable, but I think it would make it too easy .

Any thoughts on the best way to solve this problem?

+3
source share
1 answer

CKEditor, before allowing the browser to break the data, copies all the attributes src, nameand hrefinto the attributes data-cke-saved-src|href. Unfortunately, since the data is a string, this needs to be done with a regular expression. The code can be found here: /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 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;
        } ) + '>';
    } );
}

Then, processing the HTML taken from the editable element, the attributes data-cke-saved-*override the original ones.

+1

More articles:


All Articles