Jump to content
xt:Commerce Community Forum

CKEditor anpassen


Crafter
 Share

Recommended Posts

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

Link to comment
Share on other sites

  • 1 year later...

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 1 month later...

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?

Link to comment
Share on other sites

  • 4 months later...

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!!

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
  • Create New...