ich verwende mittlerweile recht häufig den News CP und habe nun den Fall, dass ich Bilder zwischen den Text einbinden möchte. Was mit dem ckeditor über die Funktion Bild auch super funktioniert.
Leider komme ich nicht zu einem Ergebnis, wo ich eine neue Klasse gleich direkt über den ckeditor setzen/definieren kann. Ich musste letztendlich immer manuell über den "Quellcode" nachbasteln, was nicht so toll ist.
Es geht um Bootstrap Responsive images https://getbootstrap.com/docs/3.4/css/? ... responsive
Deshalb möchte ich auch nicht an anderer Stelle im CSS anpassen.
Was ich schon versucht habe.
1. Variante
Per ckeditor Style Erweiterung in der template/config/ckeditor/ckeditor.config.js
Doku: https://ckeditor.com/docs/ckeditor4/lat ... tyles.html
Code: Select all
CKEDITOR.stylesSet.add( 'my_styles', [
// Object Styles
{ name: 'RES IMG', element: 'img', attributes: { 'class': 'img-responsive' } },
// Widget styles
{ name: 'RES IMG WIG', type: 'widget', widget: 'image', attributes: { 'class': 'img-responsive' } },
]);
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'styles', items: [ 'Styles', 'Font', 'FontSize', 'Format' ] },
];
// For inline style definition.
config.stylesSet = 'my_styles';
};
2. Variante
Die neue Klasse automatisch einbauen lassen.
Doku: https://gist.github.com/fabiomaggio/c2f ... cb4d82c0ae
Code: Select all
// If you want inserted images in a CKEditor to be responsive
// you can use the following code. It creates a htmlfilter for the
// image tag that replaces inline "width" and "style" definitions with
// their corresponding attributes and add's (in this example) the
// Bootstrap "img-responsive" class.
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules( {
elements : {
img: function( el ) {
// Add bootstrap "img-responsive" class to each inserted image
el.addClass('img-responsive');
// Remove inline "height" and "width" styles and
// replace them with their attribute counterparts.
// This ensures that the 'img-responsive' class works
var style = el.attributes.style;
if (style) {
// Get the width from the style.
var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
width = match && match[1];
// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
var height = match && match[1];
// Replace the width
if (width) {
el.attributes.style = el.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
el.attributes.width = width;
}
// Replace the height
if (height) {
el.attributes.style = el.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
el.attributes.height = height;
}
}
// Remove the style tag if it is empty
if (!el.attributes.style)
delete el.attributes.style;
}
}
});
});
Laut Kommentaren eigentlich nur "Just Copy this Code and Page into Ckeditor's Configs.js File"?
Sind die beiden Varianten einfach zu komplizert gedacht?
Gibt es eine simplere Lösung?
Grüße
Daniel
