Spoiler BB-Code

[hililililklklklkl]

Hallo ich würde gerne einen benutzerdefinierten BB-Code einfügen der es ermöglicht einen Spoiler zu erstellen.
Doch was muss ich im Admin Panel eingeben bei BB-Codes hinzufügen?

[waldkatze]

Probier mal das:https://www.phpbb.com/customise/db/bbcode/new_spoiler/

oder: http://bild4.bplaced.net/phpbb/viewtopi ... n-f=5&t=47

[rainchiller]

Hallo. Ich hole den Beitrag mal aus der Versenkung. Habe das gerade umgesetzt.
Beim öffnen egal welchen Spoilers öffnet sich nur der erste Spoiler

Lösung;

Code: Alles auswählen

<div style="margin-bottom: 2px;">
  <b>Spoiler! </b>
  <input
    value="Show"
    style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;"
    onclick="var c=this.parentNode.nextElementSibling.getElementsByTagName('div')[0]; if(c.style.display!='inline'){c.style.display='inline';this.value='Hide';}else{c.style.display='none';this.value='Show';}"
    type="button">
</div>
<div style="border: 1px inset; padding: 6px;">
  <div style="display: none;">{TEXT}</div>
</div>

Das Problem liegt im ursprünglichen onclick-Code, der den aufzuklappenden Inhalt über parentNode.parentNode.getElementsByTagName('div') sucht. Diese Methode navigiert zwei Ebenen nach oben und sucht dann alle <div>-Elemente unterhalb – und landet dabei immer beim ersten Spoiler der Seite, egal welcher Button geklickt wurde.
Lösung: Statt durch den gesamten übergeordneten Bereich zu suchen, navigiert der neue Code vom Button-<div> direkt zum nächsten Geschwisterelement (nextElementSibling). Da der Inhalts-<div> immer direkt nach dem Button-<div> steht, ist die Referenz damit eindeutig – jeder Button steuert nur seinen eigenen Spoiler.
Der entscheidende Teil im onclick:
var c = this.parentNode.nextElementSibling.getElementsByTagName('div')[0];

this → der geklickte Button
.parentNode → das umschließende Button-<div>
.nextElementSibling → das direkt folgende <div> (mit dem Border)
.getElementsByTagName('div')[0] → der darin enthaltene Inhalts-<div>

So funktioniert jeder Spoiler unabhängig voneinander, egal wie viele im selben Post stehen.

[hackepeter13]

Nutze doch eine ganz einfache HTML-Lösung, wie:
BBCode:

Code: Alles auswählen

[spoiler={TEXT2;optional}]{TEXT}[/spoiler]

HTML-Ersetzung:

Code: Alles auswählen

<details class="spoiler-details" id="{TEXT2}">
<summary title="Inhalt anzeigen/verbergen">{TEXT2}</summary>
{TEXT}
</details>

Mit css kann das ganze auch noch aufgehübscht werden.

[LukeWCS]

Ich schliesse mich an. Zumal das Thema hier von 2015 und der besagte BBcode von 2014 ist und seitdem gab es massive Änderungen und Neuerungen bei HTML, CSS und JavaScript. Wir haben heutzutage ganz andere Möglichkeiten und es ist nicht mehr nötig für simple Spoiler JavaScript einzusetzen, das geht mit einer puren HTML5 Implementierung.

Ich habe hier für phpBB.de ebenfalls einen Spoiler BBcode nach HTML5 Standard entworfen, der basiert auf der Spoiler Lösung die ich schon seit vielen Jahren bei phpBB Ext Check einsetze und das habe ich hier allgemein für phpBB portiert und speziell an phpBB.de angepasst. Da ist es egal ob 1 oder 10 Spoiler auf der Seite oder im Beitrag vorhanden sind und der kann auch problemlos mehrfach verschachtelt werden.

Beispiel Spoiler mit Titel Funktion

Text

Noch ein weiterer Spoiler im Spoiler

Noch mehr Text

Und noch eine Spoiler Ebene

Okay, jetzt reichts aber!

Das ist möglich mit dem Konstrukt was hackepeter gezeigt hat. Nur mit dem Unterschied das bei mir optional ein Titel definiert werden kann. Aber das ist alles eine Frage der persönlichen Anforderungen und kann ja jeder machen wie er das braucht.

[rainchiller]

...
Ich habe hier für phpBB.de ebenfalls einen Spoiler BBcode nach HTML5 Standard entworfen, der basiert auf der Spoiler Lösung die ich schon seit vielen Jahren bei phpBB Ext Check einsetze und das habe ich hier allgemein für phpBB portiert und speziell an phpBB.de angepasst. Da ist es egal ob 1 oder 10 Spoiler auf der Seite oder im Beitrag vorhanden sind und der kann auch problemlos mehrfach verschachtelt werden.

Beispiel Spoiler mit Titel Funktion

Text

Noch ein weiterer Spoiler im Spoiler

Noch mehr Text

Und noch eine Spoiler Ebene

Okay, jetzt reichts aber!

Das ist möglich mit dem Konstrukt was hackepeter gezeigt hat. Nur mit dem Unterschied das bei mir optional ein Titel definiert werden kann. Aber das ist alles eine Frage der persönlichen Anforderungen und kann ja jeder machen wie er das braucht.

Kannst du mir bitte die dazugehörigen Codes geben, bzw den Link wo du deinen Spoiler vorstellst?

[LukeWCS]

Hi

Den habe ich nirgends öffentlich vorgestellt, sondern speziell für phpBB.de erstellt. Ich klärs mit der Administration ab, ob ich das posten kann, bitte etwas Geduld.

[LukeWCS]

BBCode-Benutzung

Code: Alles auswählen

[spoiler={TEXT1;optional;defaultValue=Ausgeblendeter Text}]{TEXT2}[/spoiler]

HTML-Ersetzung

Code: Alles auswählen

<details style="background-color: #EDE8E0; border: 1px solid #CDC8C0; margin: 1em 0;">
	<summary style="display: list-item; cursor: pointer; padding: .5em;">
		{TEXT1}
	</summary>
	<div style="border-top: 1px solid #CDC8C0; padding: .5em 0; margin: 0 .5em;">
		{TEXT2}
	</div>
</details>

Tipp-Anzeige

Code: Alles auswählen

Ausgeblendeter Text: [spoiler]Text[/spoiler] oder [spoiler=Titel]Text[/spoiler]

Der BBcode hat 2 Modi, wodurch der Spoiler flexibel einsetzbar ist. Benutzt man den BBcode ohne Parameter, wird automatisch der Standardwert "Ausgeblendeter Text" als Beschriftung gesetzt. Wird ein Titel angegeben, dann wird dieser als Beschriftung genommen.

Der BBCode ist natürlich für unseren angepassten prosilver Style konzipiert. Wenn du einen oder mehrere andere Styles nutzt, musst du natürlich das Inline-CSS durch externes CSS ersetzen und anpassen.

[rainchiller]

Danke, habs schon geschrieben (mir Hilfe von Claude )

Code: Alles auswählen

[spoiler={TEXT2;optional}]{TEXT}[/spoiler]

Code: Alles auswählen

<details class="spoiler-bbcode">
<summary>{TEXT2}</summary>
<div class="spoiler-content">{TEXT}</div>
</details>

Code: Alles auswählen

details.spoiler-bbcode {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 4px 8px;
    margin: 6px 0;
    background: #f9f9f9;
}

details.spoiler-bbcode summary {
    cursor: pointer;
    font-weight: bold;
    color: #555;
    padding: 2px 0;
    user-select: none;
}

details.spoiler-bbcode summary::before {
    content: "▶ Spoiler: ";
    color: #888;
}

details.spoiler-bbcode[open] summary::before {
    content: "▼ Spoiler: ";
}

details.spoiler-bbcode .spoiler-content {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #ddd;
}

ps. Hab deine Antwort erst jetzt gelesen @Like.
Danke für den Hinweis,. Ja ich nutze schon ausgelagertes CSS