0

I have to use CKEditor to allow users to edit some HTLM pages that may include SVG images. And the links defined in those SVG images contain some attribute like xlink:href. E.g:

    <svg preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 778 873" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <image height="100%" width="100%" xlink:href="map.png"></image> 
        <g class="hover_group" opacity="1"> 
            <a xlink:href="http://www.google.com">
                <rect fill="red" height="100" opacity="0.0" width="160" x="110" y="240"></rect> 
            </a> 
        </g> 
    </svg>

I already set CKEDITOR.config.allowedContent = true with hope that all tags and attributes will be retained by the editor.

However, when I switch back and forth between WYSIWYG and HTML mode, I notice that the A tag become like this:

a href="http://www.google.com" xlink:=""

<svg preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 778 873" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <image height="100%" width="100%" xlink:href="map.png"></image> 
    <g class="hover_group" opacity="1"> 
        <a href="http://www.google.com" xlink:="">
            <rect fill="red" height="100" opacity="0.0" width="160" x="110" y="240"></rect> 
        </a> 
    </g> 
</svg>

This behavior only happens to the A tag, not the IMAGE tag.

Of course, this makes the link in SVG file no longer work.

Anyone know how to fix this? Thanks. I don't want to manually allow all the allowed tags or attributes because this may be so much work.

1 Answer 1

1

It is a bug (called also "lack of feature") in CKEditor. It's not able to process attributes ending with ":href" properly.

I reported http://dev.ckeditor.com/ticket/13233 which also includes a possible patch. If it's correct, then this issue will be fixed in the next minor release.

2
  • Thanks. Update ckeditor.js with the recommended regular expression and it's working fine now. /([\w-:]+)\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|(?:[^ "'>]+))/gi
    – tala9999
    Apr 29, 2015 at 18:05
  • @ tala9999 Can you please post your working ckeditor.js? I've tried editing with your example, but the ckeditor is breaking. Jun 24, 2015 at 7:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.