WebsiteBaker Community Forum

WebsiteBaker Support (2.12.x) => Modules => Topic started by: CodeALot on July 26, 2019, 11:57:49 AM

Title: CKEditor - dimensions of images
Post by: CodeALot on July 26, 2019, 11:57:49 AM
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?
Title: Re: CKEditor - dimensions of images
Post by: crnogorac081 on July 26, 2019, 01:30:49 PM
a droplet can be made I will send you the code later
Title: Re: CKEditor - dimensions of images
Post by: dbs on July 26, 2019, 01:52:45 PM
Or maybe a piece of jquery.
Code: [Select]
$('.img-responsive').removeAttr('style');
Title: Re: CKEditor - dimensions of images
Post by: Gast on July 26, 2019, 02:57:18 PM
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)



Title: Re: CKEditor - dimensions of images
Post by: CodeALot on July 27, 2019, 10:30:30 PM
Thanks a lot! Your support is highly appreciated!
Title: Re: CKEditor - dimensions of images
Post by: crnogorac081 on July 28, 2019, 06:43:08 PM


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
Title: Re: CKEditor - dimensions of images
Post by: CodeALot on July 30, 2019, 10:28:12 AM


here is some code I am using..

Where exactly did you insert that code?
Title: Re: CKEditor - dimensions of images
Post by: Gast on July 30, 2019, 10:36:20 AM
Quote
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.
Title: Re: CKEditor - dimensions of images
Post by: crnogorac081 on July 30, 2019, 12:56:50 PM
It is example code, i use it whereever i call editor.

For integration in wysiwyg module follow jacobis instructions.