MD Composer Extras

[Steven]

Diese Themenkomponente fügt einige Formatierungsoptionen im Editor hinzu: Unterstreichung, zentrieren, rechtsbündig, Blocksatz und durchgestrichen. Sie können den Text jedes Buttons in den Einstellungen anpassen, sodass sie mit jeder Sprache kompatibel ist. Es gibt eine RTL-Version (ändert „rechtsbündig" in „linksbündig").

Kompatibilität

Diese Themenkomponente ist eine Alternative zur Discourse Formatting Toolbar, ich empfehle nicht, beide zu verwenden.

Ich empfehle das Plugin, aber wenn Sie es nicht möchten (oder können), ein Plugin zu installieren, könnte diese Themenkomponente genügend Optionen im Editor für Sie hinzufügen.

Um die Komponente auf mobilen Geräten anzupassen, habe ich einige Buttons ausgeblendet: Aufzählungsliste, Liste und Blocksatz. Sie schienen auf diesem Gerät am wenigsten hilfreich zu sein.

Für Foren mit RTL-Sprachen gibt es hier die RTL-Version: GitHub - MonDiscourse/md-composer-extras-rtl: Add some formatting option in your discourse composer (rtl version) · GitHub

Lassen Sie mich wissen, wenn es Probleme gibt!

	Vorschau	md-composer-extras - Vorschau
	Repository	md-composer-extras
	Installationsanleitung	Wie man ein Theme oder eine Themenkomponente installiert
	Neu bei Discourse-Themen?	Anfängerleitfaden zur Verwendung von Discourse-Themen

[Anatolia]

It becomes like this if I use alignin together with underline.

[Steven]

That’s a limitation of the div align code, you need to add a line between the div align and your text

<div align="center">

[u]underline[/u]
</div>

That’s why I used a bbcode in my formatting toolbar, but I could only use the div in this theme component.

I’ll probably add an extra line by default and a little explanation

[Steven]

I upgraded the component to add those extra lines by default, now, when you use a align button and the underline button, you’ll have something like this

[tophee (Christoph)]

@Steven

I recommend the plugin

What are the disadvantages of using the theme-component?

[Steven]

The plugin is easier to customize, we can choose which buttons will appear or not, and there are some additional options like color or a float button that can do something like this with the image

[jtbayly]

Erstaunlich, was man mit Theme-Komponenten alles machen kann! Gut gemacht.

[verilog15 (verilog)]

Gut gemacht
Glaubst du, es ist möglich, die HTML-Tags irgendwie in einen Standardtag wie [Center] umzuwandeln, und etwas im Backend wandelt ihn dann wieder zurück (aus UI-Gründen)?

[Steven]

Damals war es nicht möglich, einige BB-Codes mit Theme-Komponenten einfach zu erstellen. Ich weiß nicht, ob das jetzt möglich ist.

Derzeit ist der beste Weg, um BB-Code-Zentrierung und eine Schaltfläche im Editor zu haben, die Verwendung des Plugins: Formatting toolbar

[Johani (Joe)]

Ein Tag wie [center] erfordert weiterhin ein Plugin, aber du hast recht, @Steven

Zur Zeit der Erstellung dieser Komponente mussten HTML-<div>-Tags verwendet werden. Du kannst jedoch jetzt [wrap="foo"][/wrap] in Themes oder Komponenten verwenden.

Mehr dazu erfährst du hier:

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

Hier ist ein einfaches Beispiel:

[wrap="center"] 
Einige zentrierter Text 
[/wrap]

Dies erzeugt beim Kochen des Beitrags folgendes Markup:

<div class="d-wrap" data-wrap="center">
  <p>Einige zentrierter Text</p>
</div>

Das kannst du dann mit einem CSS-Attribut-Selektor wie folgt ansprechen:

[data-wrap="center"] {
  text-align: center;
}

Das führt sowohl in der Vorschau des Editors als auch im gerenderten Beitrag zu folgendem Ergebnis:

Oder:

[wrap="right"] 
Einige rechtsbündiger Text 
[/wrap]

Dies ergibt das folgende gekochte Markup:

<div class="d-wrap" data-wrap="right">
  <p>Einige rechtsbündiger Text</p>
</div>

Du kannst dann dieses CSS hinzufügen:

[data-wrap="right"] {
  text-align: right;
}

für dieses Ergebnis:

Da die Komponente derzeit das HTML-align-Attribut verwendet, sollte diese Änderung zu 100 % abwärtskompatibel sein.

Probier es aus, wann immer du Zeit hast, und schick mir gerne eine PN, falls du Fragen dazu hast.

[thwright]

Ich habe gerade Pull Requests für die Wrap-Komponenten eingereicht.

https://github.com/iunctis/md-composer-extras/pull/1
https://github.com/iunctis/md-composer-extras/pull/2
https://github.com/iunctis/md-composer-extras/pull/3

[thwright]

Ich habe weitere Pull Requests für ‘float left’ hinzugefügt, mit einer CSS-Option für ‘float right’, den Durchstreich-Button zu den Buttons für Fett, Kursiv und Unterstrichen verschoben und einen grundlegenden Spalten-Button erstellt. Letzterer könnte eventuell besser als eigene Komponente oder im Pop-up-Menü untergebracht werden.

Ich habe den Pull Request zurückgezogen; er benötigt weitere Anpassungen. Ich plane zudem, Buttons für Hoch- und Tiefstellung hinzuzufügen, aber sobald Kalenderereignisse, Slick und Kacheln hinzukommen, sind zu viele Buttons im vertikalen Composer auf Mobilgeräten vorhanden. Im horizontalen Layout sollte das kein Problem sein, aber wenn alle Buttons über beide Menüs erreichbar sein sollen, müssten sie ins Pop-up verschoben werden.

Hast du dazu Gedanken, @Steven, wie du das handhaben möchtest?

Ich werde die Haupt-JS-Datei einfach in zwei Dateien aufteilen und an etwas responsive CSS arbeiten.

Idealerweise sollten wir auch Einstellungen hinzufügen, um Buttons nach Bedarf zu deaktivieren oder auszublenden.

---

EDIT: Ich habe die genannten Änderungen umgesetzt (Elemente haben jedoch keine Option, um außerhalb von CSS ausgeblendet zu werden) und muss die Änderungen nur noch testen, bevor ich einen PR einreiche.

[thwright]

Dieser PR sollte jetzt in Ordnung sein, @Steven.

https://github.com/iunctis/md-composer-extras/pull/8

Dieser PR implementiert Responsiveness, Floats, Spalten, Hoch- und Tiefstellung. Siehe README, wie Spalten funktionieren.

[ondrej]

Hallo,
keine Ahnung, warum ich das bekomme. Habe es erst vor ein paar Tagen hochgeladen. Ich nutze die neueste Version davon. Zumindest sagt mir das die Software.
Vielen Dank

[Steven]

Ich habe kürzlich ein Upgrade durchgeführt, das jedoch korrekt funktionieren sollte. Ich habe es gerade auf einer Website sowohl am Desktop als auch auf dem Mobilgerät getestet.

Könntest du versuchen, die Komponente zu löschen und neu zu installieren? Es scheint auf deinem Forum beschädigt zu sein.

Oder verwendest du auch das Plugin für die Formatierungsleiste? Das könnte dazu führen, dass doppelte Symbole angezeigt werden.

[ondrej]

Okay, danke! Ich werde mir das ansehen und machen, was du sagst. Alles Gute zum Geburtstag auch

[zuker (Matías)]

Ist es möglich, einige Symbole auszublenden?

[Steven]

Welche möchtest du ausblenden? Ich helfe dir dabei.

[zuker (Matías)]

Durchgestrichen, hochgestellt, tiefgestellt. Danke!

[Steven]

Der einfachste Weg wäre, diese CSS-Zeilen in Ihrem Theme unter Allgemein > CSS hinzuzufügen

.d-editor-button-bar .strikethrough_button, .d-editor-button-bar .superscript_button, .d-editor-button-bar .subscript_button {
    display: none;
}