TinyMCE ab 3.3.2: eigene Stile einbinden ohne <span>
Im TinyMCE ab v3.3.2 wurde das Verhalten bei der Einbindung von Stilen geändert. Markiert man im Editor ein Blockelement und fügt einen selbst definierten Stil aus dem Dropdown-Menü ein, wird ein <span> gesetzt.
HTML-Code:
<h2><span class="no-margin-top">Überschrift</span></h2>
In älteren Versionen wurde der Stil direkt an das Block-Element gehängt.
HTML-Code:
<h2 class="no-margin-top">Überschrift</h2>
Will man den alten Zustand wieder herstellen, muss man die neue TinyMCE Option style_formats verwenden. Dazu erstellt man sich in system/config eine Kopie der tinyMCE.php und bindet sie in der dcaconfig.php ein. Wie das geht kann man hier nachlesen.
Den Code kann man z.B. am Ende von tinyMCE.init() einfügen.
Beispiele:
1) Stil für ein bestimmtes Element
Den Stil soll der Anwender nur auf h1 anwenden können:
PHP-Code:
style_formats : [
{title : 'Rote Überschrift', block : 'h1', styles : {color : '#ff0000'}}
]
title definiert den Namen im TinyMCE Dropdown-Menü Format.
Statt dem style-Element, kann man auch eine class verwenden:
PHP-Code:
style_formats : [
{title : 'Rote Überschrift', block : 'h1', classes : 'red'}
]
Man kann Elemente auch über den selector ansprechen:
PHP-Code:
style_formats : [
{title : 'Ü1 rot', selector : 'h1', classes : 'red'},
{title : 'Absatz Abst. gr.', selector : 'p', classes : 'p-marg-max'}
]
2) Stil für mehrere Elemente
Der Stil kann allen aufgeführten Elemente zugewiesen werden:
PHP-Code:
style_formats : [
{title : 'kein Abst. unten', selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'no-margin-bottom'}
]
Leider werden die Redakteuer nicht gewarnt, wenn ein Stil für ein bestimmtes Element nicht zur Verfügung steht - der Stil kann trotzdem aus dem Dropdown ausgewählt werden, wird aber nicht eingefügt.
