CKEditor anpassen

[Crafter]

Hallo Leute,

der CKEditor setzt bei Bildern leider immer eine feste Größe mit !important Tag. Das hat zur Folge das die Bilder nicht responsive sind und auf mobilen Geräten verzerrt dargestellt werden, da sie zwar bis zu eine gewissen Grad skaliert werden, das Seitenverhältniss aber nicht beibehalten wird. Gibt es eine Möglichkeit den Editor anzupassen? Am besten wäre eine Lösung ohne xt:Core Dateien zu überschreiben, vielleicht über das Template?

Viele Grüße

[elektroede]

Hallo! Das Problem habe ich jetzt auch. Konntest Du das irgendwie in den Griff bekommen?

[jhahn]

url?

[elektroede]

www.skydancer24.de

[jhahn]

hm, nee, sry. ich find dort keine verzerrten bilder. bzw kaum bilder die aus dem ck kommen könnten.
https://www.skydancer24.de/ueber-uns sieht bei mir gut aus und hat auch kein !important

[elektroede]

Stimmt. Wenn ich im Editor html code bearbeite und !important lösche und dann auf "Speichern", dann ist das raus. Aber wenn ich den Content dann wieder im Editor öffne, haut der mir wieder das !important rein. Und das nervt.

[jhahn]

gesucht...   conf/config_ckeditor.js    dort wird was mit !important gemacht.

habe das mal auskommentiert, dann wird kein !important mehr erzeugt.

!! habe aber keine Ahnung, ob das wirklich gut so ist !!

[elektroede]

Du bist ja gut! Ich habe zwar die Datei config_ckeditor.js bei mir nicht gefunden aber dafür die costum_config.js, wo anscheinend genau das gemacht wird. Ich hatte mich vorher, aufgrund eines Posts hier im Forum, auf das Verzeichnis \xtFramework\library\ckeditor\ beschränkt und dort nur eine Datei mit !important gefunden, die sich mit meinem Editor nicht sauber öffnen ließ. Ich werde den Part in meiner costum_config.js auch mal auskommentieren... Danke schon mal für den guten Tip!

[elektroede]

Zu früh gefreut. Ich habe in meiner costum_config.js den folgenden Code gefunden und auskommentiert. Aber der Editor macht das immer noch.

 if(htmlFilter)
    {
        htmlFilter.addRules({
            elements: {
                $: function (element) {
                    try {
                    // for images add !important to height and width
                    if (element.name == 'img') {
                        var style = element.attributes.style;
                        if (style) {
                            // check !important added already
                            var match = /(?:^|\s)width\s*:\s*(\d+)px!important/i.exec(style);
                                if (match == null) {
                                match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style);
                                    if (match) {
                                    style = style.replace(match[0], match[0]+'!important');
                                }
                            }

                            // same for height
                            var match = /(?:^|\s)height\s*:\s*(\d+)px!important/i.exec(style);
                                if (match == null) {
                                match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                                    if (match) {
                                    style = style.replace(match[0], match[0]+'!important');
                                }
                            }

                            element.attributes.style = style;
                        }
                    }
                }
                    catch(err)
                    {
                        alert(err.message);
                    }
                }
            }
        });
    }
    else {
        alert('ckeditor custom_config.js : could not get instance of htmlFilter, img style did not get the !important rule applied')
    }

Das if(htmlFilter} lässt mich hoffen, dass man dieses Verhalten irgendwo abschalten kann. Ich kann aber leider nichts derartiges finden.

Hat jemand noch eine Idee?

[jhahn]

Achso, sry, dachte es ist xt6

egal, müsste aber trotzdem gehen:

if (element.name == 'img') {
  ändern auf
if (false && element.name == 'img') {

!browser-cache leeren

nochmal testen

[elektroede]

Wunderbar! Das war es! Ich hatte den Cache nicht gelöscht! Danke!

[elektroede]

Jezt habe ich ein sehr ähnliches Problem mit einem Video, welches ich in die Artikelbeschreibung eingebunden habe. Wenn ich die Beschreibung speichere, wird das Video schön dargestellt. Aber wenn ich den Editor neu lade, dann schmeißt er mir die Zeile aus dem Quelltext. In der o.g. Datei und auch sonst kann ich aber nichts derartiges finden. Jemand eine Idee?

Das ist mein html in der Artikelbeschreibung:

<video src="https://verzeichnis/winkender_airdancer.mp4" poster="https://verzeichnis/prev_winke_video.JPG" controls></video>

Das wird durch den Editor immer ersetzt durch

<video>&nbsp;</video>

Hat jemand einen Vorschlag?

[elektroede]

Hallo Leute,

der CK Editor macht mich ganz irre. Jedes Mal, wenn ich etwas an einer Artikelbschreibung ändern möchte, fliegt mein iframe raus.

Im Quellcoder schreibe ich z.B.

<iframe width="560" height="315" noresize="noresize" scrolling="no"        
        frameborder="0" marginheight="0" marginwidth="0"        
        class="cmplazyload"        
        src="about:blank"     
        data-cmp-vendor="s30"
        data-cmp-src="https://www.youtube-nocookie.com/embed/pPFih3mfcqU"        
        ALLOWTRANSPARENCY="true"></iframe>

Das funktioniert nach dem Abspeichern auch. Aber nach erneutem Aufruf der Artikelbeschreibung steht da nur noch

<iframe class="cmplazyload" frameborder="0" height="315" scrolling="no" src="about:blank" width="560"></iframe>

Worauf ist das zurückzuführen? Ich finde diese Filter einfach nicht. Ich habe noch 5.1.4 laufen.

Es wäre toll, wenn ich einen Hinweis bekommen könnte, denn ich finde es einfach nicht heraus. Ich habe schon gefühlt 1000 verdächtige Dateien durchstöbert.

Danke vorab!!

 

[xt:Commerce]

iframe oder youtube/media plugin bei CK Editor verwenden, nicht einfach in den html schreiben, das wird vom editor gelöscht.

[elektroede]

Danke für die Info. Ich muss aber an den HTML, weil der Code angepasst werden muss, damit der Consentmanager greift. Gibt es vielleicht eine Möglichkeit, den CK Editor anzupassen, dass er den iframe nicht ändert?

 

[Alex@4tfm]

1 hour ago, elektroede said:

Danke für die Info. Ich muss aber an den HTML, weil der Code angepasst werden muss, damit der Consentmanager greift. Gibt es vielleicht eine Möglichkeit, den CK Editor anzupassen, dass er den iframe nicht ändert?

 

Du kannst in die config vom Editor "allowed Tags" angeben, und dort auch die zugelassenen Attribute.

[elektroede]

Danke für den Tip. Leider kapier ich es noch immer nicht. Meine custom_config.js sieht so aus:

/**
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function( config ) {
        // Define changes to default configuration here.
        // For complete reference see:
        // http://docs.ckeditor.com/#!/api/CKEDITOR.config

        // The toolbar groups arrangement, optimized for two toolbar rows.
        config.toolbarGroups = [
                { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
                { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
                { name: 'links' },
                { name: 'insert' },
        //        { name: 'forms' },
                { name: 'tools' },
                { name: 'document',           groups: [ 'mode', 'document', 'doctools' ] },
                { name: 'others' },
                '/',
                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
                { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
                { name: 'styles' },
                { name: 'colors' },
                { name: 'about' }
        ];

        // Remove some buttons provided by the standard plugins, which are
        // not needed in the Standard(s) toolbar.
        config.removeButtons = 'Underline,Subscript,Superscript,Forms,Flash';

        // Set the most common block elements.
        config.format_tags = 'p;h1;h2;h3;pre';

        // Simplify the dialog windows.
        config.removeDialogTabs = 'image:advanced;link:advanced;link:upload;image:Upload';

    config.extraAllowedContent = 'div(*); p(*)';

};

CKEDITOR.on('instanceReady', function (ev) {
    var editor = ev.editor,
        dataProcessor = editor.dataProcessor,
        htmlFilter = dataProcessor && dataProcessor.htmlFilter;

    if(htmlFilter)
    {
        htmlFilter.addRules({
            elements: {
                $: function (element) {
                    try {
                    // for images add !important to height and width
                    if (element.name == 'img') {
                        var style = element.attributes.style;
                        if (style) {
                            // check !important added already
                            var match = /(?:^|\s)width\s*:\s*(\d+)px!important/i.exec(style);
                                if (match == null) {
                                match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style);
                                    if (match) {
                                    style = style.replace(match[0], match[0]+'!important');
                                }
                            }

                            // same for height
                            var match = /(?:^|\s)height\s*:\s*(\d+)px!important/i.exec(style);
                                if (match == null) {
                                match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                                    if (match) {
                                    style = style.replace(match[0], match[0]+'!important');
                                }
                            }

                            element.attributes.style = style;
                        }
                    }
                }
                    catch(err)
                    {
                        alert(err.message);
                    }
                }
            }
        });
    }
    else {
        alert('ckeditor custom_config.js : could not get instance of htmlFilter, img style did not get the !important rule applied')
    }
});

Ich habe bei config.extraAllowedContent = 'div(*);  p(*)';  das iframe(*); zugefügt aber es bleibt dabei. Kann mir jemand auf die Sprünge helfen?

 

[elektroede]

Kann mir jemand sagen wo und wie ich diese "allowed Tags" angeben muss?

[elektroede]

Falls es jemanden interessiert: Ich habe eine Lösung gefunden. Wenn sie auch vielleicht nicht sehr empfehlenswert ist. Ich habe in der custom_config.js die Zeile

config.allowedContent = true;

eingefügt, was offensichtlich dazu führt, dass gar nichts mehr gefiltert wird.

[elektroede]

Jetzt hab ich's begriffen. Glaube ich.

in custom_config.js:

config.extraAllowedContent = 'div(*); p(*); iframe[width,height,noresize,scrolling,frameborder,marginheight,marginwidth,class,src,data-cmp-vendor,data-cmp-src,ALLOWTRANSPARENCY]';

Das erlaubt es mir, Youtube-Videos als iframe, mit allen vom consentmanager geforderten Tags direkt im HTML code einzugeben. config.allowedContent = true; konnte ich somit wieder auskommentieren.

Ich nehme mal an, dass das auch das war, was Alex mir zu sagen versucht hat.

 

[df:bug]

Du solltest folgendes Plugin verwenden:

https://addons.xt-commerce.com/de/plugins/xtckeditor.html

[elektroede]

Danke für die Info. Da steht aber Shop Version Minimum 6.2.0. Ich habe aber nur 5.1.4.