Im ckeditor Klasse für Element <img> definieren

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
dani
Posts: 77
Joined: Sat 21. Jan 2006, 19:39
Location: Germany
Contact:

Im ckeditor Klasse für Element <img> definieren

Post by dani »

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

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';
};
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

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;
            }
        }
    });
});
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
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Im ckeditor Klasse für Element <img> definieren

Post by Oliver Georgi »

Also für meinen Geschmack zu kompliziert, ich müsste mich jetzt auch erst wieder einarbeiten, Dir da eine Lösung aufzuzeigen. ich schätze, Du hast paar wesentliche Sachen vergessen, die dann wieder zu einem Reformat führen bzw. Dinge aus dem HTML kippen.

Hier ein Muster:

Code: Select all

/**
 * @license Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 *
 * Adopted for phpwcms, Oliver Georgi
 * Default CKEditor configuration in phpwcms backend
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For the complete reference:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config

	config.toolbar = [
		{ name: 'tools', items: ['Maximize', '-', 'Source', '-', 'Undo', 'Redo', '-', 'Paste', '-', 'Find', '-', 'ShowBlocks'] },
		{ name: 'paragraph', items: ['BulletedList', 'NumberedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv'] },
		{ name: 'diverse', items: ['Link', 'Unlink', '-', 'Image', 'Table', 'HorizontalRule', '-', 'SpecialChar'] }, //, 'Iframe', 'Anchor',
		{ name: 'format', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'TextColor', '-', 'Bold', 'Italic', 'Underline', 'Subscript', 'Superscript'] }, //, 'RemoveFormat','JustifyBlock','BGColor',
		{ name: 'elements', items: ['Styles', 'Format'] },
		//{ name: 'elements', items: ['Format'] },
		{ name: 'about', items: ['About'] }
	];

	//config.removeButtons = 'Cut,Copy,Strike,Underline,Italic,Bold,Iframe,Flash,Smiley,PageBreak,FontSize,Styles,Format,Save,Print,NewPage,Preview,Templates,PasteFromWord,PasteText';

	config.format_tags = 'p;upperstretch;uppercase;stretched;h1;h2;h3;h4;h5;h6;div;blockquote'; //h1
	config.format_upperstretch = { element: 'span', attributes: {'class': 'upperstretch'}, name: 'U P P E R S T R E T C H' };
	config.format_uppercase = { element: 'span', attributes: {'class': 'uppercase'}, name: 'UPPERCASE' };
	config.format_stretched = { element: 'span', attributes: {'class': 'stretched'}, name: 'S t r e t c h e d' };
	config.format_blockquote = { element: 'blockquote', name: 'Blockquote' };

	config.stylesSet = [
		{ name: 'Caption', element: 'p', attributes: {'class': 'caption'} },
 		{ name: 'Copyright', element: 'em', attributes: {'class': 'copyright'} }
	];

	config.width = 750;
	config.height = 500;

	config.extraPlugins = 'magicline';
	config.removePlugins = 'colordialog';

	config.toolbarCanCollapse = true;
	config.toolbarStartupExpanded = true;

	config.forcePasteAsPlainText = true;
	config.pasteFromWordRemoveFontStyles = true;
	config.pasteFromWordRemoveStyles = true;
	config.pasteFromWordPromptCleanup = true;

	config.ignoreEmptyParagraph = true;

	config.contentsCss = 'assets/config/ckeditor/ckeditor.bhd.css';
	//config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
	//config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag

	config.colorButton_colors = "00F"; //000,FFF,
	config.image2_altRequired = true;
	config.image2_alignClasses = ['image-left', 'image-center', 'image-right'];
	config.image2_captionedClass = 'has-caption';
};
Und CSS:

Code: Select all

.cke_editable {
	font-size:16px;
	line-height:135%;
	position:relative;
}

.cke_editable .stretched {
	letter-spacing:.3em;
	word-spacing:-.25em;
}

.cke_editable .uppercase {
	text-transform:uppercase;
}

.cke_editable .upperstretch {
	letter-spacing:.3em;
	text-transform:uppercase;
	word-spacing:-.25em;
}

.cke_editable blockquote {
	border-left:1px solid #000;
	line-height:16px;
	position:relative;
}

.image-center {
	text-align:center;
}

.image-center > figure {
	display:inline-block;
}

.image-left {
	float:left;
}

.image-right {
	float:right;
}

a {
	color:#00f;
	text-decoration:underline;
}

abbr {
	border-bottom:1px dotted #000;
	cursor:help;
}

body {
	background-color:#fff;
	color:#000;
	font-family:Arial,sans-serif;
	font-size:16px;
	line-height:1;
	margin:3px 10px 10px;
}

dl {
	padding:0 24px;
}

figcaption {
	font-style:italic;
}

h1 {
	font-family:Arial,sans-serif;
	font-size:26px;
	font-weight:400;
	margin-bottom:12px;
}

h2 {
	font-size:21px;
	font-weight:400;
	margin-bottom:12px;
}

h3 {
	font-size:18px;
	font-weight:400;
	margin-bottom:12px;
}

h4 {
	font-size:17px;
	font-weight:400;
	margin-bottom:12px;
}

h5 {
	font-size:16px;
	font-weight:400;
	margin-bottom:12px;
}

h6 {
	font-size:16px;
	font-weight:400;
	margin-bottom:12px;
}

hr {
	border:0;
	border-top:1px solid #000;
	height:1px;
	margin:15px 0 16px;
}

img.left {
	border:0;
	float:left;
	margin-right:16px;
	padding:8px;
}

img.right {
	border:0;
	float:right;
	margin-left:16px;
	padding:8px;
}

img:hover {
	filter:alpha(opacity=90);
	opacity:.9;
}

ol {
	padding:0 24px;
}

p.caption {
	font-style:italic;
}

ul {
	padding:0 24px;
}

.email-button {
    display: inline-block;
    color: #000000;
    font-weight: bold;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid #000000;
    padding: .25em 1em;
    margin: .5em 0;
}
.email-button:hover {
    color: #ffffff;
    text-decoration: none;
    background-color: #000000;
}
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
dani
Posts: 77
Joined: Sat 21. Jan 2006, 19:39
Location: Germany
Contact:

Re: Im ckeditor Klasse für Element <img> definieren

Post by dani »

Hallo Oliver,
danke für die Rückmeldung.
Ich habe meine ckeditor Konfiguration nochmal etwas angepasst und deine config.format_* Objekte mit eingebaut.

Hier meine jetzige komplette Konfiguration.
template/config/ckeditor/ckeditor.config.js

Code: Select all

/**
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 *
 * Adopted for phpwcms, Oliver Georgi
 * Default CKEditor configuration in phpwcms backend
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For the complete reference:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    config.toolbar = [
        { name: 'tools', items: ['Maximize', '-', 'Source', '-', 'Undo', 'Redo', '-', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Find', '-', 'ShowBlocks' ] },
        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
        { name: 'paragraph', groups: [ 'align', 'list', 'indent', 'blocks' ], items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BulletedList', 'NumberedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv'] },
        { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Iframe', 'SpecialChar' ] },
        { name: 'styles', items: [ 'Styles', 'Font', 'FontSize', 'Format' ] },
    ];

    // Remove some buttons, provided by the standard plugins, which we don't
    // need to have in the Standard(s) toolbar.
    //config.removeButtons = 'Copy,Iframe,Flash,Smiley,PageBreak,FontSize,Save,Print,NewPage,Preview,Templates,PasteFromWord,PasteText';

    config.format_tags = 'p;upperstretch;uppercase;stretched;h1;h2;h3;h4;h5;h6;div;blockquote;imgresponsive'; //h1
    config.format_upperstretch = { element: 'span', attributes: {'class': 'upperstretch'}, name: 'U P P E R S T R E T C H' };
    config.format_uppercase = { element: 'span', attributes: {'class': 'uppercase'}, name: 'UPPERCASE' };
    config.format_stretched = { element: 'span', attributes: {'class': 'stretched'}, name: 'S t r e t c h e d' };
    config.format_blockquote = { element: 'blockquote', name: 'Blockquote' };
    config.format_imgresponsive = { element: 'img', attributes: {'class': 'img-responsive'}, name: 'IMG Responsive' };

    config.stylesSet = [
        { name: 'Caption', element: 'p', attributes: {'class': 'caption'} },
        { name: 'Copyright', element: 'em', attributes: {'class': 'copyright'} },
        // Widget Styles
        { name: 'RES IMG WIG', type: 'widget', widget: 'image', attributes: { 'class': 'img-responsive' } },
        // Object Styles
        { name: 'RES IMG', element: 'img', attributes: { 'class': 'img-responsive' } }
    ];

    config.width = 538;
    config.height = 400;

    //config.extraPlugins = 'magicline';
    config.extraPlugins = 'magicline,image2';
    //config.removePlugins = 'resize';

    // Allow classes for all tags
    config.extraAllowedContent = '*(*)';

    config.toolbarCanCollapse = true;
    config.toolbarStartupExpanded = true;

    config.forcePasteAsPlainText = true;
    config.pasteFromWordRemoveFontStyles = true;
    config.pasteFromWordRemoveStyles = true;
    config.pasteFromWordPromptCleanup = true;

    //config.contentsCss = 'template/config/ckeditor/ckeditor.custom.css';
    config.contentsCss = 'template/config/ckeditor/ckeditor.custom_blog.css';
    //config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
    //config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag

    //config.contentsCss = 'assets/config/ckeditor/ckeditor.custom.css';
    //config.colorButton_colors = "00F"; //000,FFF,...

    //config.image2_altRequired = true;
    //config.image2_alignClasses = ['image-left', 'image-center', 'image-right'];
    config.image2_captionedClass = 'img-responsive';

};

// 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;
            }
        }
    });
});
template/config/ckeditor/ckeditor.custom_blog.css

Code: Select all

.cke_editable {
	font-size:16px;
	line-height:135%;
	position:relative;
}

.cke_editable .stretched {
	letter-spacing:.3em;
	word-spacing:-.25em;
}

.cke_editable .uppercase {
	text-transform:uppercase;
}

.cke_editable .upperstretch {
	letter-spacing:.3em;
	text-transform:uppercase;
	word-spacing:-.25em;
}

.cke_editable blockquote {
	border-left:1px solid #000;
	line-height:16px;
	position:relative;
}

.cke_editable .img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

figcaption {
	font-style:italic;
}
template/inc_css/blog/blog_ckeditor.css

Code: Select all

.stretched {
	letter-spacing:.3em;
	word-spacing:-.25em;
}

.uppercase {
	text-transform:uppercase;
}

.upperstretch {
	letter-spacing:.3em;
	text-transform:uppercase;
	word-spacing:-.25em;
}

blockquote {
	border-left:1px solid #000;
	line-height:16px;
	position:relative;
}

figcaption {
	font-style:italic;
}
Die in deinem Beispiel enthaltenen Formatierungen funktionieren im Backend (ckeditor) und auch Frontend (Webseite).

Code: Select all

	config.format_tags = 'p;upperstretch;uppercase;stretched;h1;h2;h3;h4;h5;h6;div;blockquote'; //h1
	config.format_upperstretch = { element: 'span', attributes: {'class': 'upperstretch'}, name: 'U P P E R S T R E T C H' };
	config.format_uppercase = { element: 'span', attributes: {'class': 'uppercase'}, name: 'UPPERCASE' };
	config.format_stretched = { element: 'span', attributes: {'class': 'stretched'}, name: 'S t r e t c h e d' };
	config.format_blockquote = { element: 'blockquote', name: 'Blockquote' };
Mein zusätzliches "config.format_imgresponsive" greift nicht für das Bildobjekt.
Liegt wohl daran, dass <img> kein Block-level Objekt ist, welche im "Format" Dropdown funktionieren:
https://ckeditor.com/docs/ckeditor4/lat ... ormat.html
https://ckeditor.com/docs/ckeditor4/lat ... tyle-types
Block-level styles: These apply to the following elements: address, div, h1, h2, h3, h4, h5, h6, p, and pre
Object styles: These apply to the following elements: a, embed, hr, img, li, object, ol, table, td, tr, and ul.
Immer wenn man über die ckeditor Toolbar ein Bildobjekt erstellt ist dies ein Widget Objekt. Womit dann nur folgendes greift:
https://ckeditor.com/docs/ckeditor4/lat ... get-styles
Since widgets are a lot more complex structures than standard content, only classes defined in the style definition will be applied to them. Other attributes and inline styles will be ignored.
Somit bleibt nur noch die Anpassung über das "Stil" Dropdown, wobei im Dropdown immer nur "RES IMG WIG" sichtbar wird. Nie "RES IMG".
https://ckeditor.com/docs/ckeditor4/lat ... tyles.html

Code: Select all

    config.stylesSet = [
        { name: 'Caption', element: 'p', attributes: {'class': 'caption'} },
        { name: 'Copyright', element: 'em', attributes: {'class': 'copyright'} },
        // Widget Styles
        { name: 'RES IMG WIG', type: 'widget', widget: 'image', attributes: { 'class': 'img-responsive' } },
        // Object Styles
        { name: 'RES IMG', element: 'img', attributes: { 'class': 'img-responsive' } }
    ];
Oder der im Internet beschriebene Umweg über die nachträgliche Bearbeitung. Wie hier https://stackoverflow.com/a/46398668 beispielhaft beschrieben.

Die Anpassung über

Code: Select all

config.image2_captionedClass = 'img-responsive';
bringt auch nichts, da die Klasse dann im <figure> Element gesetzt wird.

Warum bei meiner 2.Variante nichts passiert, erklärt vielleicht der nachfolgende Hinweis aus dem Artikel https://stackoverflow.com/a/46398668. Wobei ich keine Ahnung habe, wie ich das debuggen kann?
Muss da noch etwas geladen werden?
The function CKEDITOR.on() the event 'instanceReady' will execute the code to add the 'img-responsive' class to the image element el

The fact is, I believe you should put a breakpoint inside that code and test if it is actually executing

Code: Select all

CKEDITOR.on('instanceReady', function (ev) { // etc.. etc.. });
because this are the instruction on how to adapt ckeditor with turbolinks https://github.com/galetahub/ckeditor#t ... ntegration

Create a file app/assets/javascripts/init_ckeditor.coffee

Code: Select all

var ready = function() {
    CKEDITOR.on('instanceReady', function (ev) { // code });
}

$(document).ready(ready)
$(document).on('page:load', ready)
Make sure the file is loaded from your app/assets/javascripts/application.js

CKEDITOR is the API entry point. The entire CKEditor code runs under this object.
Was zumindest - etwas umständlich - mit der jetzigen Konfiguration funktioniert, ist folgender Ablauf.
  1. Bildobjekt öffen und in den Bild-Eigenschaften NUR "URL" setzen/auswählen. Ok klicken.
  2. Bild im Editor markieren und im "Stil" Dropdown "RES IM WIG" auswählen.
  3. Bild mit rechter Maustaste "Bildeigenschaften" wieder öffnen und "Alternativer Text" sowie "Bild mit Überschrift" Haken setzen.
Das Ergebnis ist dann folgendes und die Klasse im <img> bleibt auch bei Änderungen erhalten. Die Klasse in <figure> stört nicht weiter.

Code: Select all

<figure class="img-responsive"><img alt="ALT-TEXT" class="img-responsive" height="645" src="im/860x645/1b7804771172d9a3f68e9c81cc8524d8.jpg" width="374" />
<figcaption>&Uuml;berschrift</figcaption>
</figure>
Die Variante mit der Klassenanpassung über den Code (2. Variante) wäre natürlich der elegantere Weg und stellt auch sicher, dass die Klasse für <img> immer gesetzt wäre.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Im ckeditor Klasse für Element <img> definieren

Post by Oliver Georgi »

Überlege Dir genau, was die Klassen denn jetzt wirklich machen sollen. Sowas macht keinen Sinn:

Code: Select all

<figure class="img-responsive">
    <img alt="ALT-TEXT" class="img-responsive" height="645" src="im/860x645/1b7804771172d9a3f68e9c81cc8524d8.jpg" width="374" />
    <figcaption>&Uuml;berschrift</figcaption>
</figure>
Entweder:

Code: Select all

<figure class="img-responsive">
    <img alt="ALT-TEXT" height="645" src="im/860x645/1b7804771172d9a3f68e9c81cc8524d8.jpg" width="374" />
    <figcaption>&Uuml;berschrift</figcaption>
</figure>
Oder

Code: Select all

<figure>
    <img alt="ALT-TEXT" class="img-responsive" height="645" src="im/860x645/1b7804771172d9a3f68e9c81cc8524d8.jpg" width="374" />
    <figcaption>&Uuml;berschrift</figcaption>
</figure>
Und auch ein Style über Wrapping wäre unproblematisch.

Code: Select all

<span  class="img-responsive"><img…></span>

Code: Select all

.img-responsive > img,
img.img-responsive {
    display: inline-block;
    …
}
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
dani
Posts: 77
Joined: Sat 21. Jan 2006, 19:39
Location: Germany
Contact:

Re: Im ckeditor Klasse für Element <img> definieren

Post by dani »

Ich würde die Klassen ja gern sauber setzen, aber der ckeditor überschreibt halt mit dem Widget Dinge in seiner Art. Ich habe noch keine Möglichkeit gefunden, wie man das Widget selbst anpassen kann. Im "Quellcode" die Dinge wieder gerade ziehen, geht, kann man aber dem Endanwender eher nicht zumuten.

Dein Hinweis mit dem Wrapping klingt interessant und funktioniert auch. Wäre eine Lösung, ohne viel Anpassungen.
Oliver Georgi wrote: Mon 14. Feb 2022, 15:26 Und auch ein Style über Wrapping wäre unproblematisch.

Code: Select all

.img-responsive > img,
img.img-responsive {
    display: inline-block;
    …
}
Damit hebel ich halt wieder Bootstrap aus und überschreibe Dinge. Was ich vermeiden wollte.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Im ckeditor Klasse für Element <img> definieren

Post by Oliver Georgi »

Naja, Bootstrap ist ja genau dafür vorgesehen. Du hebelst ja nichts aus, sondern erweiterst nur. Ich schätze Du benutzt sowieso veraltete Bootstrap, img-responsive, klingt nach Bootstrap 3 – aktuell wäre es ja img-fluid.

Und Du benutzt genau die gleichen Klassen wie im BS. Fertig.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
dani
Posts: 77
Joined: Sat 21. Jan 2006, 19:39
Location: Germany
Contact:

Re: Im ckeditor Klasse für Element <img> definieren

Post by dani »

Oliver Georgi wrote: Mon 14. Feb 2022, 18:20 ...Ich schätze Du benutzt sowieso veraltete Bootstrap, img-responsive, klingt nach Bootstrap 3 – aktuell wäre es ja img-fluid.
Erwischt! :)
Das ist noch eine weitere Baustelle. Aber bei so viel sonnigem Wetter, lässt man den PC halt oft links liegen und stürmt aus dem Haus.
Wollte Bootstrap v4 überspringen und gleich auf v5 umbauen. Bootstrap v3 ist ja nun schon eine Weile Eol (https://github.com/twbs/release). Muss halt recht viele Klassen und Elemente im Template anpassen, da einiges neu strukturiert wurde.

Der Vollständigkeit wegen hier noch meine schlussendlich verwendete Konfiguration. Wo ich im ckeditor auch nicht mehr im "Quellcode" anpassen muss. Egal wie oft über das Widget geändert wird.

template/config/ckeditor/ckeditor.config.js
(Der Wert config.image2_captionedClass = 'img-responsive'; setzt die Klasse im <figure> Element)

Code: Select all

/**
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 *
 * Adopted for phpwcms, Oliver Georgi
 * Default CKEditor configuration in phpwcms backend
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For the complete reference:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    /* The full default CKEditor toolbar
    config.toolbar = [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
        { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
        { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
        '/',
        { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
        { name: 'others', items: [ '-' ] },
        { name: 'about', items: [ 'About' ] }
    ];
    */
    
    config.toolbar = [
        { name: 'tools', items: ['Maximize', '-', 'Source', '-', 'Undo', 'Redo', '-', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Find', '-', 'ShowBlocks' ] },
        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
        { name: 'paragraph', groups: [ 'align', 'list', 'indent', 'blocks' ], items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BulletedList', 'NumberedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv'] },
        { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Iframe', 'SpecialChar' ] },
        { name: 'styles', items: [ 'Font', 'FontSize', 'Format' ] },
    ];

    // Remove some buttons, provided by the standard plugins, which we don't
    // need to have in the Standard(s) toolbar.
    //config.removeButtons = 'Copy,Iframe,Flash,Smiley,PageBreak,FontSize,Save,Print,NewPage,Preview,Templates,PasteFromWord,PasteText';

    config.width = 538;
    config.height = 400;

    //config.extraPlugins = 'magicline';
    config.extraPlugins = 'magicline,image2';
    //config.removePlugins = 'resize';

    // Allow classes for all tags
    config.extraAllowedContent = '*(*)';

    config.toolbarCanCollapse = true;
    config.toolbarStartupExpanded = true;

    config.forcePasteAsPlainText = true;
    config.pasteFromWordRemoveFontStyles = true;
    config.pasteFromWordRemoveStyles = true;
    config.pasteFromWordPromptCleanup = true;

    //config.contentsCss = 'template/config/ckeditor/ckeditor.custom.css';
    config.contentsCss = 'template/config/ckeditor/ckeditor.custom_blog.css';
    //config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
    //config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag

    //config.contentsCss = 'assets/config/ckeditor/ckeditor.custom.css';
    //config.colorButton_colors = "00F"; //000,FFF,...

    //config.image2_altRequired = true;
    //config.image2_alignClasses = ['image-left', 'image-center', 'image-right'];
    //config.image2_captionedClass = 'image-captioned';
    config.image2_captionedClass = 'img-responsive';

};
template/config/ckeditor/ckeditor.custom_blog.css
(Eigentlich nur angelegt, damit sich die Bildbeschreibung im Backend etwas von normalen Text abhebt.)

Code: Select all

figcaption {
  font-style:italic;
}
template/inc_css/blog/blog_ckeditor.css

Code: Select all

.img-responsive > img,
img.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
Der Quelltext im Editor sieht jetzt so aus:

Code: Select all

<figure class="img-responsive">
    <img alt="ALT-TEXT" height="645" src="im/860x645/1b7804771172d9a3f68e9c81cc8524d8.jpg" width="374" />
    <figcaption>&Uuml;berschrift</figcaption>
</figure>
Danke für den Tipp mit dem Wrapping!
User avatar
top
Posts: 535
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: Im ckeditor Klasse für Element <img> definieren

Post by top »

Eine weitere Möglichkeit wäre vielleicht noch ein kleines Script in template/inc_script/frontend_render/
(ungetestet)

Code: Select all

<?php
// Verschieben der class=img-responsive von figure nach img

$content['all'] = str_replace('<figure class="img-responsive">
    <img', '<figure>
    <img class="img-responsive"', $content['all']);
Dann musst du aber sicher sein, dass du bei nicht schon manuell bei einigen img eine class ergänzt hast. Sonst hast du die bei der Ausgabe dann doppelt.
Post Reply