In WB 2.21.2 there is a CKEditor active that handles images different than before, I think.
Images inserted inline get automatically
class="img-responsive"
Which is fine, since I can define that class myself.
Now before, CKeditor would add the HTML-tags
width="1920" height="800"
The new CKEditor however, now adds:
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?
a droplet can be made I will send you the code later
Or maybe a piece of jquery.
$('.img-responsive').removeAttr('style');
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
config.disallowedContent = 'script; *[on*]';
to
config.disallowedContent = 'script; *[on*];img{width,height}';
add as next line this
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)
Thanks a lot! Your support is highly appreciated!
here is some code I am using..
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
Quote from: crnogorac081 on July 28, 2019, 06:43:08 PM
here is some code I am using..
Where exactly did you insert that code?
QuoteWhere 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
$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.
It is example code, i use it whereever i call editor.
For integration in wysiwyg module follow jacobis instructions.