Image Classes for TinyMCE 4

Oft gestellte Fragen
Locked
admin
Administrator
Posts: 15
Joined: Sun 18. Nov 2012, 13:37

Image Classes for TinyMCE 4

Post by admin »

Image 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 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 Klassen für die stylesheet.css des Templates:
Image 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 In der verwendeten init_xyz.js muss folgender Codeblock eingefügt werden:
Image 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 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 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.
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Locked