Im ckeditor Klasse für Element <img> definieren
Posted: Thu 10. Feb 2022, 20:59
Hallo zusammen,
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
Funkioniert nur bedingt. Sobald der ckeditor das Bild mit dem <figure> Element rendert, wird die Klasse dahin verschoben. Das Element <img> ist dann wieder ohne Klasse. Somit manuell im Quellcode nacharbeiten.
2. Variante
Die neue Klasse automatisch einbauen lassen.
Doku: https://gist.github.com/fabiomaggio/c2f ... cb4d82c0ae
Wenn ich diesen Code in die template/config/ckeditor/ckeditor.config.js einbaue, ändert sich komischerweise nichts.
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
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
