CODEWITHSUNDEEP
ckeditor
Doin
Doin

Reputation: 8174

CKeditor stripping font tags instead of converting to span

I have a CKeditor instance (version 4.1.2) with font, size, text and background color buttons in its toolbar, all completely default.

It's created by replacing a <textarea> whose contents are loaded from a database.

When the loaded html contains elements such as:

<h3><font color="red">Big Red Heading</font></h3>

CKeditor is simply stripping away the tags, to leave:

<h3>Big Red Heading</h3>

Whereas, my expectations (according to the docs) were that it should convert this to:

<h3><span style="color:red">Big Red Heading</span></h3>

(It strips tags with size and face attributes also, just the same way).

I haven't changed allowedContent or colorButton_foreStyle, or any other config setting that ought to have any effect on this issue. I've tried removing all custom config (leaving an absolutely default instance of the editor), and it still happens.

Can anyone explain why this might be happening, and how to fix it?

Thanks.

EDIT: The default value of colorButton_foreStyle is set like this in the CKeditor source:

    CKEDITOR.config.colorButton_foreStyle = {
        element: 'span',
        styles: { 'color': '#(color)' },
        overrides: [ { element: 'font', attributes: { 'color': null } } ]
    };

...which is why I expected it would automatically convert font tags..?

Upvotes: 2

Views: 5514

Answers (2)

Nayan K
Nayan K

Reputation: 21

I got same problem in CKeditor 4. i searched but i didnt get solution. but i need it so i created my own method in js. its working great.

i created ownFunctoin:

function ConvertFontTagToSpanTag(str) { 

        var startIndex = str.indexOf('<font');
        while (startIndex >= 0) {               

            var endIndex = str.substring(startIndex).indexOf('>');
            var subString1 = str.substring(startIndex, (startIndex + endIndex) + 1);
            var subString2 = subString1;              

            var mapObj = {
                size: "font-size:",
                face: "font-family:",
                color: "color:"
            };
            subString2 = subString2.replace(/size|face|color/gi, function (matched) {
                return mapObj[matched];
            });

            subString2 = subString2.replace(/['"]/g, ';');
            subString2 = subString2.replace(/=;/g, '');

            subString2 = subString2.replace('font', 'span');
            if (subString2.length > 6) {
                subString2 = [subString2.slice(0, 6), 'style=\"', subString2.slice(6)].join('');
                subString2 = [subString2.slice(0, subString2.length - 1), '\"', subString2.slice(subString2.length - 1)].join('');
            }

            //Converting Font-size           
            var sizeIndex = subString2.indexOf('font-size:');
            if (sizeIndex >= 0) {
                var sizeEndIndex = subString2.substring(sizeIndex).indexOf(';');
                var size = subString2.substring(sizeIndex + 10, (sizeIndex + sizeEndIndex));
                //Removing Font size
                subString2 = subString2.slice(0, (sizeIndex + sizeEndIndex) - 1) + subString2.slice((sizeIndex + sizeEndIndex));                  
                //Adding Font Size
                subString2 = [subString2.slice(0, (sizeIndex + sizeEndIndex)-1), ConvertSpanFontSize(size), subString2.slice((sizeIndex + sizeEndIndex)-1)].join('');

            }
            //end

            str = str.replace(subString1, subString2);

            startIndex = str.indexOf('<font');            

        }
        str = str.replace(/font>/g, 'span>');
        return str;

    }

    function ConvertSpanFontSize(size) {
        switch (size) {
            case '1': return '0.63em';
            case '2': return '0.82em';
            case '3': return '1.0em';
            case '4': return '1.13em';
            case '5': return '1.5em';
            case '6': return '2em';
            case '7': return '3em';                
            default: return '4em';
        }

Cheers...! Thank you

Upvotes: 2

Reinmar
Reinmar

Reputation: 22023

CKEditor hasn't got all possible transformations defined by default. There is a set of them and it will be enlarged in the future, but this specific one wasn't defined yet.

From Advanced Content Filter guide - content transformations:

Currently, we have defined content transformations for only a handful of editor features, but their number will increase in future releases.

So, there are two solutions:

  1. If you want to keep your font tags, then extend the Advanced Content Filter settings by defining config.extraAllowedContent and change the font plugins settings like in HTML output sample.
  2. If you want to automatically transform your font tags to their newer equivalents, then you can add a new transformations. Read more in filter#addTransformations doc.

Upvotes: 2

Related Questions