CKEditor - dimensions of images

[CodeALot]

In WB 2.21.2 there is a CKEditor active that handles images different than before, I think.
 
Images inserted inline get automatically

Code: [Select]

class="img-responsive"
Which is fine, since I can define that class myself.

Now before, CKeditor would add the HTML-tags

Code: [Select]

width="1920" height="800"
The new CKEditor however, now adds:

Code: [Select]

style="width:1920px; height:800px;"
And since that's after the class-declaration, the class img-reponsive gets overruled.
 
I do NOT want CKEditor to add image-dimensions at all. I can't find where I have to change that though.... Anyone?

[crnogorac081]

a droplet can be made I will send you the code later

[dbs]

Or maybe a piece of jquery.

Code: [Select]

$('.img-responsive').removeAttr('style');

[jacobi22]

only, to say it... the output from width & height as inline-style is part of the new contentFilter-Rules in CKeditor and has nothing to do with WB

to change the output to the old format with extra width & height instead of a inline-style like style="width:1920px; height:800px;", go into
/modules/ckeditor/wb_config/wb_ckconfig.js ~ Line 254

and change the original code

Code: [Select]

config.disallowedContent = 'script; *[on*]';
to

Code: [Select]

config.disallowedContent = 'script; *[on*];img{width,height}';
add as next line this

Code: [Select]

config.extraAllowedContent = 'img[width,height]';
explanation for element-definition
element-name[attribute]{styles}classes

the code remove the style {...} from the img-element and add the attributes [...] width + height

P.S.1: it is very important, to close all CKeditor-Session after the changes (better: the complete browser) and clear the browser cache
or (at minimum) unload the wb_ckeditor.js from the cache

P.S.2: if you copy this file /modules/ckeditor/wb_config/wb_ckconfig.js into the root folder of your used frontend-template(s), the file will not be overwritten in the next upgrade of the editor

important hint: works only in ckeditor > Version 4.4 (not in FCKeditor or older ckeditor versions)

if you work with more then one frontend templates, copy this file into every used frontend-template-folder

IMPORTANT: to activate the "private" wb_ckconfig.js in the templates folder(s), set in /modules/ckeditor/include.php
the switch $bWbConfigSetting to true  (Ln 81)

[CodeALot]

Thanks a lot! Your support is highly appreciated!

[crnogorac081]

here is some code I am using..

Code: [Select]

if(isset($_POST['content'])) { $content = $admin->strip_slashes(htmlspecialchars_decode($_POST['content'])); } else { $content = ''; }
$content = preg_replace( '/(width|height)="\d*"\s/', "", $content );
$content = preg_replace( '/(style)=""\s/', "", $content );

//Clean img tag (input to img) and add img-responsive
$content = preg_replace('/<input(.*?)type="image"(.*?)>/', '<img $1$2>', $content);
$content = preg_replace( '/(width|height)="\d*"\s/', "", $content );
$classes = 'img-responsive'; // separated by spaces, e.g. 'img image-link' 
        $content = preg_replace('/\s{2,}/', ' ',$content);

if ( preg_match('/<img.*? class="/', $content) ) { 
            $content = preg_replace('/<img(.*?) class=".*?/', '<img$1 class="' . $classes . ' $2', $content); 
        } else {
            $content = preg_replace('/<img(.*?)/', '<img class="'.$classes.'"$1', $content);   
        }
$content = preg_replace('/<img(.*?)class="('.$classes.'\s)+(.*?)/', '<img$1class="$3', $content); 
$content = preg_replace('/([^:])(\/{2,})/', '$1/', $content);
//End cleaning


[CodeALot]

here is some code I am using..

Where exactly did you insert that code?

[jacobi22]

Where exactly did you insert that code?

in save.php from the wysiwyg-module (modules/wysiwyg/save,php), around Ln 64 ff

it needs a little modification, because, $_POST['content'] in connected with the section-ID, like

Code: [Select]

$content = $aRequestVars['content'.$section_id] - (Code from actual wb 2.12.2)

and you have the risk, to lost this changes at the next upgrade.

[crnogorac081]

It is example code, i use it whereever i call editor.

For integration in wysiwyg module follow jacobis instructions.