![Image](http://www.cmsimple.org/userfiles/images/flags/de.gif)
Im TinyMCE 4 kann man Klassen für Bilder bereitstellen, die dann im Bilddialog als Selectbox zur Auswahl stehen und dem Bild zugeordnet werden können. Diese Klassen können auch gruppiert werden. Die Klassen müssen in der stylesheet.css des Templates definiert werden.
![Image](http://www.cmsimple.org/userfiles/images/flags/en.gif)
In TinyMCE 4 you can provide CSS classes for images, then the image dialog provides a select box to choose from, and the CSS classes can be assigned to the image. These CSS classes can be grouped. The CSS classes must be defined in the stylesheet.css of the template.
![Image](http://www.cmsimple.org/userfiles/images/flags/de.gif)
Klassen für die stylesheet.css des Templates:
![Image](http://www.cmsimple.org/userfiles/images/flags/en.gif)
classes for stylesheet.css of the template:
Code: Select all
/*
##############################
E D I T O R C L A S S E S
##############################
*/
.tmce_left {max-width: 45%; float: left; margin: 0 16px 20px 0;}
.tmce_right {max-width: 45%; float: right; margin: 0 0 20px 16px;}
.tmce_centered {max-width: 100%; display: block; box-sizing: border-box; margin: 16px auto;}
.tmce_border {border: 5px solid #998; box-sizing: border-box;}
.tmce_noborder {border: 0;}
![Image](http://www.cmsimple.org/userfiles/images/flags/de.gif)
In der verwendeten init_xyz.js muss folgender Codeblock eingefügt werden:
![Image](http://www.cmsimple.org/userfiles/images/flags/en.gif)
In the used init_xyz.js following code must be inserted:
Code: Select all
...
image_advtab: true, // bereits vorhanden - already exists
image_class_list: [
{title: 'Keine Klasse', value: ''},
{title: 'left border', value: 'tmce_left tmce_border'},
{title: 'left no border', value: 'tmce_left tmce_noborder'},
{title: 'right border', value: 'tmce_right tmce_border'},
{title: 'right no border', value: 'tmce_right tmce_noborder'},
{title: 'centered border', value: 'tmce_centered tmce_border'},
{title: 'centered no border', value: 'tmce_centered tmce_noborder'},
],
importcss_append: true, // bereits vorhanden - already exists
...
![Image](http://www.cmsimple.org/userfiles/images/flags/de.gif)
Den Codeblock image_class_list könnt Ihr auch in andere init-Dateien einfügen, die könnten aber bei einem Update überschrieben werden. Deshalb ist es bei individuellen Änderungen immer besser, eine der vorhandenen init-Dateien zu kopieren, umzubenennen und dann zu bearbeiten und zu aktivieren.
![Image](http://www.cmsimple.org/userfiles/images/flags/en.gif)
The code block image_class_list you also can add to other ini-files. But these files could be overwritten during an update. Therefore it is always the better way for individual changes, to copy an existing init file, rename it (maybe init_customized.js), and then edit and activate the customized init-file.