Question

I need to force CKEditor to apply font styling to a link tag instead of inner span tag. For example, when you write some text, add a link to this text, and change the color of of the link, the source look like this:

<a href="http://www.google.com" target="_blank"><span style="color: rgb(221, 160, 221);">Click here...</span></a>

I need it to be generated like this:

<a style="color: rgb(221, 160, 221);" href="http://www.google.com" target="_blank"><span>Click here...</span></a>

Or like this:

<a style="color: rgb(221, 160, 221);" href="http://www.google.com" target="_blank"><span style="color: rgb(221, 160, 221);">Click here...</span>

I can create content filter for this, but i dont want to loose what was might originally been in link tag

Was it helpful?

Solution

It looks I solved it...

For me it looks there is no other, but to add htmlFilter rules.

Did it like this:

CKEDITOR.on('instanceReady', function (ev) {   
    ev.editor.dataProcessor.htmlFilter.addRules(
                {
                    elements:
                    {
                        $: function (element) {

                            if (element.name == 'a') {
                                if (element.children.length == 1) {
                                    if (element.children[0].name == 'span') {
                                        var innerSpan = element.children[0];
                                        if (innerSpan.attributes.style) {
                                            element.attributes.style = innerSpan.attributes.style;                                            
                                        }
                                    }
                                }
                            }

It checks if link contains only one span children and when just copies everything in style attribute.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top