4. Eigene Buttons erstellen
Eine der Stärken des BUEditor sind die umfangreichen Konfigurationsmöglichkeiten: Nahezu alles kann nach Wunsch angepasst und erweitert werden. Voraussetzung hierfür sind Kenntnisse in HTML, JavaScript und/oder PHP.
Um sich mit der Materie vertraut zu machen, sollte man sich folgendes anschauen:
[1] Readme.txt des Moduls
[2] Projekt-Website: http://ufku.com/drupal/bueditor/buttons (dort insbesondere die API-Dokumentation)
[3] Button-Sammlung: http://drupal.org/node/334109 (als Beispielsammlung)
In den Editor-Einstellungen (/admin/settings/bueditor/) können eigene Buttons erstellt werden, der dafür nötige Code wird in der Spalte "Content" eines jeden Buttons eingetragen.
Hierbei ist zwischen den folgenden Button-Typen zu unterscheiden:
HTML Buttons
Dies ist der einfachste Button Typ, bei dem einfacher Text oder HTML-Tags in das Drupal Textfeld eingefügt wird. Der Platzhalter %TEXT% beinhaltet den vom Benutzer vor dem Klick auf den Button im Drupal Textfeld markierten Text.
JavaScript Buttons
Der Inhalt eines JavaScript Buttons wird als JavaScript Code interpretiert, der Code muss mit der Zeichenfolge "js:" beginnen.
PHP Buttons
Der Inhalt eines PHP Buttons wird serverseitig ausgeführt und muss Code zurückliefern (HTML Code oder JavaScript), der Inhalt des PHP Buttons muss mit der Zeichenfolge "php:" beginnen.
Theme Buttons
Über Theme Buttons wird das Aussehen des Editos angepasst, beispielsweise kann ein Zeilenwechsel oder ein Trennzeichen zwischen Buttons eingefügt werden. Der Inhalt eines Theme Buttons muss mit der Zeichenfolge "tpl:" beginnen.
Beispiel
Auf Basis vom eleganten Tabellen-Button von [3] kann man beispielsweise leicht einen komfortablen Listen-Button erstellen: Im Default-Editor wird eine Liste mit nur einem einzigen Listeneintrag erstellt, mit dem folgenden Code dagegen kann man mit der Maus die gewünschte Anzahl an Listeneinträgen festlegen (für eine Aufzählungsliste):
js:
BUE.quickPop.open('<table id="bue-quick-table" style="width: auto; height: auto;"><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr></table>','fadeIn');
quickTableY = -1;
quickTableTd = function () {
$(this).css(
{width: '16px', height: '16px', border: '1px solid #ddd', padding: '5px', backgroundColor: 'white', cursor: 'pointer'}
).html(' ').mouseover(quickTableTdOver).click(quickTableTdClick);
};
quickTableTdOver = function () {
var row = this.parentNode, table = row.parentNode, Y = row.rowIndex;
if (Y == table.rows.length - 1) {
var _row = table.insertRow(Y+1);
for (var i = 0, t = row.cells.length; i < t; i++) quickTableTd.apply(_row.insertCell(i));
}
var aY = Y < quickTableY ? [quickTableY, Y, 0, 'white'] : [Y, quickTableY, 0, 'blue'];
for (var i = aY[0]; i > aY[1]; i--) for (var j = aY[2]; j > -1; j--) {
table.rows[i].cells[j].style.backgroundColor = aY[3];
}
quickTableY = Y;
};
quickTableTdClick = function () {
var rows = '';
for (var i = quickTableY; i > -1 ; i--) {
rows += '\n<li>'+ '</li>';
}
BUE.dialog.close();
BUE.active.replaceSelection('<ul>'+ rows +'\n</ul>', 'end');
};
$('#bue-quick-table td').each(quickTableTd);Für eine nummerierte Liste ist einfach der als Parameter übergebene HTML-Code der Methode BUE.active.replaceSelection entsprechend anzupassen.
- Anmelden oder Registrieren um Kommentare zu schreiben
Neue Kommentare
vor 2 Wochen 3 Tagen
vor 2 Wochen 3 Tagen
vor 2 Wochen 3 Tagen
vor 2 Wochen 3 Tagen
vor 2 Wochen 4 Tagen
vor 2 Wochen 4 Tagen
vor 2 Wochen 5 Tagen
vor 2 Wochen 6 Tagen
vor 2 Wochen 6 Tagen
vor 3 Wochen 2 Tagen