Hallo,
als erstes empfehle ich, nach einem Update des Editors auf TinyMCE 4 die Toolbar "full" einzustellen. Die Menüzeile über dem Editor bietet ein paar erweiterte Möglichkeiten.
Ja, der TinyMCE 4 schneidet ein paar alte Zöpfe ab, und das ist auch gut so. Der 3er hat noch die Bildabmessungen ins html geschrieben, was dann zum Problem wurde, wenn man das Bild per CMS responsiv machen wollte. Da musste man diese Felder erst leeren.
Der 4er hat nun im Bilddialog einen Reiter "Erweitert", mit dem kann man das Bild per CSS stylen. Damit erzeugt man aber inline-CSS, auch verpönt im Augenblick. Tragt mal bei Vertikaler Abstand, Horizontaler Abstand und Rahmen Zahlen ein, geht raus aus dem Menü und wieder rein, dann seht Ihr alle Werte oben in der Zeile "Stil".
Der richtige, naja, beste Weg (wer weiss schon, was "richtig" ist) ist die Definition von Bildklassen im Template. Wir haben eine kontextbezogene Klassenerkennung eingebaut, mit der man Bildern Klassen zuordnen kann.
In meinen Templates findet Ihr Klassen wie z. B.:
Code: Select all
.tplge_left_border {float: left; border: 5px solid #998; margin: 0 20px 10px 0;}
.tplge_left_noborder {float: left; border: 0; margin: 0 20px 10px 0;}
.tplge_right_border {float: right; border: 5px solid #998; margin: 0 0 10px 20px;}
.tplge_right_noborder {float: right; border: 0; margin: 0 0 10px 20px;}
.tplge_border {border: 5px solid #998;}
.tplge_noborder {border: 0;}
Die kann man ergänzen zu:
Code: Select all
img.tplge_left_border {float: left; border: 5px solid #998; margin: 0 20px 10px 0;}
img.tplge_left_noborder {float: left; border: 0; margin: 0 20px 10px 0;}
img.tplge_right_border {float: right; border: 5px solid #998; margin: 0 0 10px 20px;}
img.tplge_right_noborder {float: right; border: 0; margin: 0 0 10px 20px;}
img.tplge_border {border: 5px solid #998;}
img.tplge_noborder {border: 0;}
... also ein "img" davorsetzen. Dann erkennt der TinyMCE 4 diese Klassen als Bildklassen.
Dann einfach das Bild anklicken und das Menü oben in der Toolbar benutzen:
Format => Formate => Bildformate
Man kann einem Bild mehrere Klassen zuordnen, dem Bild bereits zugeordnete Klassen sind mit einem hellgrauen Balken links vor der Klasse gekennzeichnet. Allerdings geht das nicht in einem Zug, wenn ich eine Klasse anklicke, schliesst sich das Menü, und ich muss neu Anlauf nehmen
Man muss sich eine neue Denk- und Arbeitsweise aneignen, das Ergebnis ist aber besser.
Man kann auch die Klassen in eine image_class_list eintragen, dann erscheinen sie im Bilddialog als Dropdown Liste. Man kann die Klassen gruppieren und ihnen verständliche Namen geben. So kann man den Editor für seine Kunden anpassen und das Einfügen von Bildern erleichtern. Dazu sollte man aber eine eigene init-Datei anlegen (Kopie der init_full.js, Name z. B. init_myeditor.js) und aktivieren, die bei späteren Updates nicht überschrieben wird.
Hier die Erklärung:
http://www.tinymce.com/wiki.php/Configu ... class_list
Unter "plugins" ist images in allen init Dateien bereits eingetragen, die Zeile in der init Datei könnte dann so aussehen:
Code: Select all
image_class_list: [
{title: 'Keine Klasse', value: ''},
{title: 'Bild links ohne Rahmen', value: 'tplge_left_noborder'},
{title: 'Bild links mit Rahmen', value: 'tplge_left_border'},
...
],
Unter "value" werden die Klassen aus dem Template Stylesheet eingetragen, die dann natürlich auch ohne vorangestelltes "img" verwendet werden können. Vorbereiten kann ich das ganze aber nicht, weil ich nicht wissen kann, welche Klassen im Template des Anwenders zur Verfügung stehen.
Man kann aber auch einfach dem Kunden ein wenig CSS beibringen und inline-CSS tolerieren (für mich kein Problem) - dann kann er einfach den Reiter "Erweitert" im Bilddialog benutzen und dje Bilder per css formatieren. Das ist dann auch am flexibelsten,
Gert
PS: Das ganze mag sich jetzt kompliziert anhören, aber wenn man es einmal gemacht hat, lacht man drüber. Die Kunden werden es einem auf jeden Fall danken.