Wie kann ich einen eigenen MyCode erstellen?

Sie haben im Admin-CP des Forums die Möglichkeiten eigenen MyCode für die Benutzung in Beiträgen usw. zu erstellen. Gehen Sie dazu ins Admin-CP -> Konfiguration -> MyCode und klicken Sie auf den Button „Neuen MyCode hinzufügen“.
  • Titel: Geben Sie hier den Namen Ihres MyCodes ein.
  • Beschreibung: Hier können Sie eine kurze Beschreibung eingeben, die erklärt, welche Funktion der Code hat. Diese ist für Benutzer des Forums nicht sichtbar.
  • Regulärer Ausdruck: Hier müssen Sie den regulären Ausdruck eingeben, nach dem im Text gesucht werden muss. Ein regulärer Ausdruck ist eine Art Suchmuster. Ein Beispiel für einen solchen Ausdruck ist: 
    \[b\](.*?)\[/b\]
    Wichtig sind die Backslashes vor den eckigen Klammern, sonst funktioniert es nicht. Lässt man die Backslashes weg wird deutlich, wie der Code aufgebaut ist: 
    [b](.*?)[/b]
    Sie können mehr als nur eine Angabe im MyCode machen. Hier sehen Sie ein Beispiel für einen MyCode, der einen Link mit Angabe eines Titels erzeugt: 
    \[a href=(.*?) title=(.*?)\](.*?)\[/a\]
  • Ersetzung: Geben Sie in das Feld den Code ein, durch den der MyCode ersetzt werden soll. Dabei werden die gemachten Angaben über durchnummerierte Variablen ausgegeben. Die Ersetzung für den MyCode für einen Link mit Titelangabe sähe demnach so aus: 
    <a href="$1" title="$2">$3</a>
  • MyCode aktivieren? Hier können Sie einstellen, ob der Code ausgeführt werden soll oder nicht.

Hinweise

Bitte beachten Sie, dass der als Beispiel genannte Code nicht funktionieren würde, wenn der Benutzer keinen Titel angibt: 
[a href=http://www.mybb.de]MyBB.de[/a]
Für solche Fälle sind mehrere MyCodes zu erstellen, die auch die anderen Fälle berücksichtigen (falls gewünscht).

Wie füge ich einen Button für eigenen MyCode in den Editor ein? (MyBB 1.8)

Hier sehen Sie wie Sie einen Button in den Editor einbinden, der Ihren MyCode in folgender Form in den Text einfügt: 
[mycode]INHALT[/mycode]

Erstellen des Buttons

Sie müssen zuerst einen Button gestalten, der später im Editor gezeigt werden soll. Dieser sollte im Format 16x16 Pixel vorliegen. Laden Sie die Grafik in folgenden Ordner auf dem Server: jscripts/sceditor/editor_themes.

Button einbauen

Gehen Sie in Ihr Admin-CP unter „Templates & Style“. Wählen Sie dort auf der linken Seiten den Punkt „Templates“ aus und klicken Sie dann auf den Namen des gewünschten Templatesets. Öffnen Sie anschließend das Template „codebuttons“, das Sie unter den „Templates ohne Gruppe“ finden. Suchen Sie nach folgender Code-Zeile: 
$(function() {
Fügen Sie darunter diesen Code ein: 
$.sceditor.command.set('mycode', {
	exec: function() {
		this.insert('[mycode]', '[/mycode]');
	},
	tooltip: "MyCode einfügen"
});
Erklärung:
  • exec: Geben Sie hier den MyCode an, indem Sie zuerst den öffnenden und dann den schließenden Tag eintragen.
  • tooltip: Hier können Sie die Beschriftung des Buttons festlegen.
Wir verzichten an dieser Stelle zur Vereinfachung auf die WYSIWYG-Funktionalität des Editors.
Weitere Informationen finden Sie in der Dokumentation des Editors.
Anschließend können Sie den Button in die Menü-Leiste einfügen. Dazu suchen Sie nach: 
	toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source"
und ersetzen den Code mit: 
	toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote,mycode|maximize,source",
Dabei wird der neue Button nach dem Zitier-Button (quote) eingefügt.

Button per CSS formatieren

Um dem Button die hochgeladene Grafik zuzuweisen, suchen Sie im selben Template: 
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/editor_themes/{$theme['editortheme']}" type="text/css" media="all" />
Fügen Sie darunter folgenden CSS-Code ein: 
<style type="text/css">
.sceditor-button-mycode div  {
	background: url(images/mycode.png);
}
</style>
Zur Anpassung an Ihren MyCode ersetzen Sie bitte mycode bei .sceditor-button-mycode und den Pfad zu Ihrer Grafik (im Beispiel liegt diese im Verzeichnis „images“).

Wie füge ich einen Button für eigenen MyCode in den Editor ein? (MyBB 1.6 und älter)

Hier sehen Sie wie Sie einen Button in den Editor einbinden, der Ihren MyCode in folgender Form in den Text einfügt: 
[mycode]INHALT[/mycode]

Erstellen des Buttons

Sie müssen zuerst einen Button gestalten, der später nach dem PHP-Code Button im Editor gezeigt werden soll. Dieser muss im Format 23x22 Pixel vorliegen. Laden Sie die Grafik in folgenden Ordner auf dem Server: jscripts/editor_themes/*Theme*/images/.

Button einbauen

Öffnen Sie die Datei '/jscripts/editor.js' lokal und suchen Sie nach: 
{type: 'button', name: 'php', sprite: 'php', insert: 'php', title: this.options.lang.title_php}
Ergänzen Sie am Ende dieser Zeile ein Komma (falls nicht vorhanden) und darunter fügen Sie den Code ein, der später den MyCodeButton ausgibt: 
{type: 'separator'},
{type: 'button', name: 'mycode', sprite: 'mycode', insert: 'mycode', title: this.options.lang.title_mycode},
           |              |                  |               |                      |
	   Typ            ID                 CSS-Klasse      Einzufügender Code     Alternativtext
  • ID: Geben Sie hier einen String ein, der den Button eindeutig wiedergibt.
  • CSS-Klasse: Geben Sie den Namen der CSS-Klasse an, über die der Button formatiert werden kann.
  • Einzufügender Code: Das ist der MyCode, der später beim Klicken auf den Button eingefügt wird (wenn Sie hier z.B. beispiel eingeben, dann wird daraus [beispiel] bzw [/beispiel]).
  • Alternativtext: Hier wird der Alternativtext, der z.B. angezeigt wird wenn Sie mit der Maus über den Button fahren, als Variable eingebunden. Diese Variable müssen Sie dann noch in den Sprachpaketen anpassen.

Button per CSS formatieren

Die Grafikdatei wird im Button per CSS zugeordnet. Öffnen Sie die Datei jscripts/editor_themes/*Theme*/stylesheet.css und fügen Sie am Ende folgenden Code ein: 
.messageEditor .toolbar_button .toolbar_sprite_mycode {
	background: url(images/mycode.gif) no-repeat;
}
Den Namen der Grafikdatei und der CSS-Klasse müssen Sie entsprechend anpassen.

Alternativtext erstellen

Um den ALT-Text anzupassen, der angezeigt wird falls Ihre Buttongrafik nicht geladen werden kann bzw. den Sie sehen wenn Sie mit der Maus später über den Button fahren, müssen Sie zuerst das englische Standardsprachpaket anpassen. Die Variablen für die MyCode Buttons befinden sich in der Datei inc/languages/english/global.lang.php. Öffnen Sie diese lokal in einem Editor und suchen Sie nach: 
$l['editor_title_php'] = "Insert formatted PHP code";
Dies ist der Code, der den ALT-Text „Insert formatted PHP code“ in die Variable „editor_title_php“ lädt. Kopieren Sie sich diese Zeile und fügen Sie sie in veränderter Form danach ein.

Wichtig: Wenn Sie in der Datei editor.js „this.options.lang.title_beispiel“ eingegeben haben müssen Sie hier auch „editor_title_beispiel“ eingeben.

Um nun das Ganze noch für das deutsche Sprachpaket zu übernehmen, gehen Sie einfach gleich vor, außer dass Sie den ALT-Text hier natürlich auf Deutsch eingeben und nicht nach 
$l['editor_title_php'] = "Insert formatted PHP code";
sondern nach 
$l['editor_title_php'] = "Formatierten PHP-Code einfügen";
suchen.

Sprachstring laden

Um die Sprachstrings jetzt noch an das Board zu übergeben öffnen Sie einfach die Datei: inc/functions.php und suchen nach 
"editor_title_php",
Sie kopieren diese Zeile wieder und ändern 'editor_title_php' in den Namen Ihrer Variablen, also hier 'editor_title_beispiel'. Es sollte also nach dem Editieren so aussehen (bzw. ähnlich): 
function build_mycode_inserter() {
 
[...]
"editor_title_php",
"editor_title_beispiel",
[...]
Wichtig: „editor_title_beispiel“ muss natürlich wieder der gleiche Name sein wie in der global.lang.php.
Bitte beachten Sie beim Bearbeiten von PHP-Dateien unsere Hinweise.