Die Redakteure (in meinem Fall keine HTML Neulinge) wollten innerhalb der Artikel eigene Registerreiter und zugehörige Texte anlegen.
Ich habe gestern lange das Forum nach der passenden Lösung durchsucht aber nichts passendes gefunden. Daher poste ich heute mal meinen Ansatz, läuft unter Contenido 4.6.23 MR V0.3.
Ich habe das ganz über das jQuery UI gelöst, allerdings muss man dann im TinyMCE IDs und DIVs anlegen können.
Dies bringen wir dem TinyMCE über die Mandenteneinstellungen bei,
wie in den "docs/techref/backend/backend.customizing.html" beschrieben ist.
Über den in den Techrefs beschriebenen Namen kann man z.B. auch "theme_advanced_buttons3_add" benutzen.
Jetzt der TinyMCE im einzelnen:
1. Toolbar auf "custom setzen"
tinymce------contenido_toolbar_mode------custom
2. Die einzelnen Zeilen der Toolbar konfigurieren (Ihr könnt an dieser Stelle auch unbenötigte Elemente weglassen.
Zeile 1
tinymce------theme_advanced_buttons1------
cut,copy,paste,pastetext,pasteword,separator,search,replace,separator,
undo,redo,separator,bold,italic,underline,strikethrough,sub,sup,separator,
insertdate,inserttime,preview,separator,styleselect
Zeile 2
tinymce------theme_advanced_buttons2------
link,unlink,anchor,image,flash,advhr,separator,bullist,numlist,separator,
outdent,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,
removeformat,separator,forecolor,backcolor,separator,ltr,rtl,separator,
fullscreen,visualaid,charmap,cleanup,separator,code
Zeile 3
tinymce------theme_advanced_buttons3------
layer,tablecontrols,separator,formatselect,fontselect,fontsizeselect
3. Die Plugins laden
tinymce------plugins------
xhtmlxtras,layer,table,save,advhr,advimage,advlink,insertdatetime,
preview,zoom,flash,searchreplace,print,contextmenu,paste,directionality,
fullscreen
Hier tritt die erste Änderung ein. xhtmlextras und layer sind im Standard nicht vorhanden.
4. Zusätzliche Elemente der Plugins in die Zeile 3 laden.
tinymce------theme_advanced_buttons3_add------
cite,ins,del,abbr,acronym,insertlayer,moveforward,movebackward,absolute,attribs
Hier wird auch deutlich wofür xhtmlextras sowie layer gebraucht werden.
Von Bedeutung für das jQuery UI sind hier lediglich insertlayer (gehört zu layer) und attribs (gehört zu xhtmlextras).
Den Rest habe ich der Vollständigkeithalber drin gelassen, wenn die Redakteure damit umgehen können.
Layout anpassen
Für jQuery muss man die entsprechenden JavaScripte laden, am besten gleich die minimierten da keine Änderunge erforderlich ist.
Im Layout folgende Zeilen hinzufügen und natürlich die Dateien in den "cms/js/" Ordner packen.
Code: Alles auswählen
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/ui.core.min.js"></script>
<script type="text/javascript" src="js/ui.tabs.min.js"></script>Dann muss man folgenden Code auch in den <head> des Layouts schreiben.
Code: Alles auswählen
<script type="text/javascript">
$(document).ready(function(){
$("#register > ul").tabs();
});
</script>Artikel erstellen
Ich gehe jetzt davon aus das Ihr wisst wie man eine solche Struktur im TinyMCE aufbaut und gebe gleich den Beispiel-HTML an.
Aufpassen müsst Ihr nur, dass das <div id="register"> alles umschließt.
Die DIVs, IDs und class's werden alle über die beiden neuen Buttons "attribs" und "insertlayer" angelegt.
Code: Alles auswählen
<div id="register">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item"><a href="#test-1" title="Test 1">Test 1</a></li>
<li class="ui-tabs-nav-item"><a href="#test-2" title="Test 2">Test 2</a></li>
<li class="ui-tabs-nav-item"><a href="#test-3" title="Test 3">Test 3</a></li>
</ul>
<div id="test-1">
<p>Nonummy nibh euismod tincidunt, ut laoreet dolore magna aliquam erat volutpat ut! Me lius quod ii legunt saepius claritas est etiam processus dynamicus qui sequitur mutationem consuetudium.
</p>
</div>
<div id="test-2">
<p>Nonummy nibh euismod tincidunt, ut laoreet dolore magna aliquam erat volutpat ut! Me lius quod ii legunt saepius claritas est etiam processus dynamicus qui sequitur mutationem consuetudium.
</p>
</div>
<div id="test-3">
<p>Nonummy nibh euismod tincidunt, ut laoreet dolore magna aliquam erat volutpat ut! Me lius quod ii legunt saepius claritas est etiam processus dynamicus qui sequitur mutationem consuetudium.
</p>
</div>
</div>Code: Alles auswählen
/*UI tabs*/
.ui-tabs-nav {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: .8; text-decoration: none; font-size: 100%; list-style: none;
font-family: Arial, sans-serif;
float: left;
position: relative;
z-index: 1;
border-right: 1px solid #000000;
bottom: -1px;
}
.ui-tabs-nav-item {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: .8; text-decoration: none; font-size: 100%; list-style: none;
float: left;
border: 1px solid #000000;
border-right: none;
}
.ui-tabs-nav-item a {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: .8; text-decoration: none; font-size: 100%; list-style: none;
float: left;
font-size: 1.3em;
font-weight: normal;
text-decoration: none;
padding: .5em 1.0em;
color: #ffffff;
background: #0086cc url(images/0086cc_40x100_textures_02_glass_33.png) 0 50% repeat-x;
}
.ui-tabs-nav-item a:hover {
background: #cccccc url(images/cccccc_40x100_textures_01_flat_40.png) 0 50% repeat-x;
color: #666;
}
.ui-tabs-selected {
border-bottom-color: #ffffff;
}
.ui-tabs-selected a, .ui-tabs-selected a:hover {
background: #ffffff url(images/ffffff_40x100_textures_02_glass_20.png) 0 50% repeat-x;
color: #0086cc;
}
.ui-tabs-panel {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
font-family: Arial, sans-serif;
clear:left;
border: 1px solid #000000;
background: #ffffff;
color: #666;
padding: 1.5em 1.7em;
}
.ui-tabs-hide {
display: none;/* for accessible hiding: position: absolute; left: -99999999px*/;
}Die Popup-Fenster für "attribs" sind ohne deutsche Sprachunterstützung, das habe ich leider nicht hinbekommen.
Ich hoffe ich konnte dem einen oder anderen halbwegs verständlich helfen.
Wenn die Seite online ist kann ich dann auch ein Beispiel zeigen.
Ciao