Responsive Webdesign mit ckEditor

Posted by m.gillen on May 10, 2012 at 10:28am

Hallo!

Ich habe nach Ollis interessantem Vortrag gestern mal ein bissschen geforscht um herauszufinden, wie der ckEditor doch noch responsive Webdesign unterstützten kann und bin auf folgenden Code gestoßen:

Die Datei config.js wie folgt ergänzen:

CKEDITOR.on('instanceReady', function (ev) {
// Ends self closing tags the HTML4 way, like <br>.
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                if (element.name == 'img') {
                    var style = element.attributes.style;

                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s:\s(\d+)px/i.exec(style),
                            width = match && match[1];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s:\s(\d+)px/i.exec(style);
                        var height = match && match[1];

                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s:\s(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s:\s(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
                    }
                }

Damit parst er alle Tags und ersetzt in den IMG-Tags das style-Attribut durch die originären Attribute width und height. Und dies kann dann hier auch entsprechend einfach entfernt werden - je nach Wunsch.

Achtung: Ich habe das ganze noch nicht selbst getestet, da sich das Problem bei mir nicht stellt - stehe aber gern für weitere Fragen zur Verfügung.

Michael