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.
Klassen für die stylesheet.css des Templates:
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;}
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
...
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.