Wir stellen unseren neuen Composer vor, der das Schreiben auf Discourse einfacher denn je macht

Eines unserer Hauptprojekte in diesem Jahr war die Entwicklung eines neuen Rich-Text-Editormodus für den Composer, der das Schreiben auf Discourse vertrauter und intuitiver macht. Der neue Composer ist hier auf Meta und als experimentelle Einstellung schon seit einiger Zeit verfügbar, aber wir sind nun an dem Punkt, an dem wir das Label experimental mit Begeisterung entfernen und Ihre Community einladen, ihn auszuprobieren!

In diesem Thema stellen wir den Composer genauer vor, erklären, wie er funktioniert, und zeigen, wie Sie ihn mit nur wenigen Klicks in Ihrer Community verfügbar machen können.

:writing_hand: Ein neuer Rich-Text-Editor für Discourse

Der neue Rich-Text-Editor vereinfacht das Schreiben für Discourse-Nutzer, insbesondere für diejenigen, die weniger technikaffin sind oder mit dem Schreiben in Markdown nicht vertraut oder unsicher sind. Der Rich-Text-Editor unterstützt Markdown sowie andere gängige Tastenkombinationen und Formatierungsoptionen über die Symbolleiste. Die Formatierung wird jedoch sofort dargestellt, für ein WYSIWYG-Erlebnis („what you see is what you get“), das bekannten Tools wie Google Docs und Notion ähnelt.

:thought_balloon: Die Zukunft von Markdown

Wir wissen, dass viele Discourse-Nutzer den aktuellen Markdown-Composer lieben und seine vorhersehbare, unkomplizierte Schreibweise schätzen. Der neue Editor ist ein Composer-„Modus“, der neben dem bestehenden Markdown-Modus existiert, sodass Ihre Mitglieder den Schreibstil wählen können, der am besten zu Ihnen passt.

Die meisten Funktionen, die Sie im klassischen Markdown-Composer verwendet haben, werden nun vom Rich-Text-Editor unterstützt, darunter:

  • Alle grundlegenden Formatierungen, die in Markdown unterstützt werden (**fett**), über gängige Tastenkombinationen (Command + B) und über Symbole in der Symbolleiste.

  • Unterstützung für erweiterte Funktionen wie das Erstellen von Tabellen und Umfragen, das Einfügen von Datum/Uhrzeit, das Hinzufügen von „Details verstecken“-Abschnitten, das Einfügen von „Spoiler verschwimmen“-Abschnitten, das Hochladen von Dateien/Bildern/Videos, das Rendern von Links als Oneboxes, das Stylen von Kategorie-/Tag-/Benutzererwähnungen, das Zitieren von Inhalten und das Einfügen von Fußnoten.

  • Dedizierte Benutzeroberfläche für Links, um Links zu besuchen, zu bearbeiten, zu kopieren, Titel zu setzen oder zu entfernen

  • Dedizierte Benutzeroberfläche für Bilder, um Bilder zu vergrößern/verkleinern, Bildunterschriften hinzuzufügen oder Bilder zu löschen

Es gibt jedoch noch Bereiche, an denen wir arbeiten, wie beispielsweise die einfachere Bearbeitung von Tabellen und Umfragen. Wir werden weiterhin an der Funktionsäquivalenz zwischen den Composer-Modi arbeiten und ermutigen Sie, #contribute:Feature-Anfragen zu teilen, welche Funktionen und Möglichkeiten Ihnen am wichtigsten sind, damit wir unsere Arbeit priorisieren können. In der Zwischenzeit können Sie jederzeit zurück zum Markdown-Modus wechseln, um erweiterte Anforderungen zu erfüllen.

:hammer: Wie wir es gebaut haben

Unsere Implementierung baut auf dem hervorragenden ProseMirror und seinem nicht-kern Markdown-Modul auf. Wir verwenden das Schema, die Parsing- und Serialisierungsdefinitionen des Moduls als Basis für weitere Discourse-spezifische Funktionen.

:gear: Den neuen Composer aktivieren

Der Rich-Editor ist standardmäßig für alle Communities aktiviert. Wenn Sie oder Ihre Mitglieder den Composer öffnen, werden Sie einen Umschalter in der Symbolleiste bemerken. Damit können Sie zwischen dem klassischen Markdown-Only-Modus und dem neuen Rich-Text-Editor wechseln.

CleanShot 2025-06-11 at 15.45.35


Update: Wenn Sie möchten, dass Ihre Mitglieder standardmäßig den Markdown-Composer sehen:

45 „Gefällt mir“

Gute Nachrichten. Gibt es eine Funktion auf der Roadmap, die bereits in allen Rich-Editoren vorhanden ist? Textfarbe? Da Markdown keine farbigen Text unterstützt, kann dies mithilfe von CSS-Add-ons erreicht werden. Alternativ gibt es möglicherweise andere Optionen, die uns nicht bekannt sind.

3 „Gefällt mir“

Gibt es danach eine Einstellung, welcher Editor der Standard ist? Danke.

4 „Gefällt mir“

Noch nicht, aber wir planen, eine hinzuzufügen.

12 „Gefällt mir“

Wenn Sie auf die Schaltfläche „Textgröße“ klicken (die auf dieser Website nicht vorhanden zu sein scheint, aber auf meiner vorhanden ist), erhalten Sie diesen Fehler

Ich sehe auch nicht die „Bild-Benutzeroberfläche“ in dem Beitrag?

Ich habe sehnsüchtig auf die Bildskalierungsoption gewartet und liebe die Einfachheit davon!

8 „Gefällt mir“

ist eine Anpassung, die aktualisiert werden müsste, um mit dem neuen Editor kompatibel zu sein. Vielleicht verwenden Sie eine Theme-Komponente wie Composer Button Bonanza? (Es gibt wahrscheinlich auch andere)

Haben Sie Discourse kürzlich aktualisiert? Wenn ja, müssen Sie auf das Bild im Composer klicken, um es zu sehen.

3 „Gefällt mir“

Ich glaube, das ist das offizielle bbcode-Plugin. Ich erinnere mich, dass es alle möglichen Funktionen enthielt, wie Farbunterstützung und Größenanpassung.

4 „Gefällt mir“

Meine Vorschläge:

  1. Ich schreibe gerne mit Markdown (vielleicht habe ich mich einfach daran gewöhnt?), aber wenn ich die Markdown-Version benutze, mag ich die neue Monospace-Schriftart nicht. Daher macht es für mich keinen Sinn, den Rich-Editor in meiner Community einzubinden (da ich wahrscheinlich derjenige sein werde, der am meisten schreibt). Das gesagt, könnte dies eine Einstellung sein, die ein Benutzer aktivieren/deaktivieren kann. Wenn ich es zum Beispiel deaktiviere, erhalte ich immer nur die Markdown-Version, behalte also die „normale“ Schriftart (nicht die Monospace). Wenn ich es aktiviere, erhalte ich das, was implementiert wurde. Als Administrator kann ich es für die Community aktivieren, aber jeder Benutzer könnte es aktivieren/deaktivieren. Entweder das, oder jeder Benutzer könnte entscheiden, welche Schriftart er in der Markdown-Version verwenden möchte.
  2. Ich finde es etwas störend, dass sich der gesamte Composer verkleinert und verschiebt, wenn der Rich-Editor aktiviert ist. Besonders wenn ich beide Versionen austauschbar verwenden werde (ich weiß, dass ich es tun werde), ist es für mich ablenkend, wenn sich das Fenster jedes Mal verkleinert, wenn ich auf den Schalter klicke. Ich verstehe, dass wir mit dem Rich-Editor die zusätzliche rechte Vorschau-Scheibe nicht benötigen, aber trotzdem… vielleicht könnte dieser Platz für etwas anderes genutzt werden?
  3. Das ist nur ein kleines Detail, aber wenn die Größenänderung bestehen bleibt, fühlt es sich seltsam an, dass der Composer in der Mitte der Seite ausgerichtet ist, aber im Vergleich zum Bereich des Themas nicht ausgerichtet ist und sich daher für meine Augen seltsam anfühlt:

Ich bin ehrlich gesagt immer noch nicht überzeugt, dass ich diese Funktion nutzen werde. Ich kann sehen, wie sie irgendwann nützlich sein kann, aber im Moment habe ich immer dieses „kribbelnde“ Gefühl, wenn ich daran denke, sie zu benutzen.

4 „Gefällt mir“

Ein Benutzer hat einige HTML-Codes ausprobiert und diese wurden im WYSIWYG-Modus nicht gerendert – alles, was geschah, war, dass der HTML-Text in eine Box gesetzt wurde. Wenn Sie zurück zu Markdown wechseln, sehen Sie das korrekte Ergebnis im Vorschaufenster. Sollen die Ergebnisse des HTML angezeigt werden oder müssen Sie für eine Vorschau zu Markdown wechseln?

Wiki-Artikel im Aufbau

Bitte erlauben Sie dem Ersteller, daran zu arbeiten, wenn er dazu in der Lage ist. Sie können gerne Hilfe oder Ratschläge anbieten, indem Sie antworten, aber bitte bearbeiten Sie ihn nicht ohne Erlaubnis.

`

2 „Gefällt mir“

Das ist beabsichtigt, komplexe HTML-Unterstützung erfolgt nur über den “passthrough”-HTML-Block, wie Sie gesehen haben.


<hr>
<h2 style="color:red;">Wiki-Artikel im Aufbau</h2>
<p> Bitte erlauben Sie dem Ersteller, daran zu arbeiten, wenn er dazu in der Lage ist. Sie können gerne Hilfe oder Ratschläge anbieten, indem Sie antworten, aber bitte bearbeiten Sie ihn nicht ohne Erlaubnis.</p>
<hr>

In Anbetracht dessen, dass der style vom Sanitäter entfernt wird, warum schreiben Sie das nicht einfach?

---
## Wiki-Artikel im Aufbau

Bitte erlauben Sie dem Ersteller, daran zu arbeiten, wenn er dazu in der Lage ist. Sie können gerne Hilfe oder Ratschläge anbieten, indem Sie antworten, aber bitte bearbeiten Sie ihn nicht ohne Erlaubnis.
---
2 „Gefällt mir“

Habe den neuen Composer in unserem Forum getestet und finde ihn wirklich gut, aber beim Testen ist mir ein seltsames Verhalten aufgefallen, bei dem ich nicht weiß, ob es beabsichtigt ist oder nicht.

Wenn man jemanden mit dem alten Editor zitiert, ist das Layout in Ordnung und der Cursor erscheint unter dem Zitat:

Wenn man jedoch entweder standardmäßig den neuen Editor verwendet oder ihn während des Verfassens einer Antwort ändert, springt der Cursor automatisch ans Ende des zitierten Textes:

Wenn man etwas tippt, wird es dem Zitat zugerechnet, und wenn man versucht zu antworten, erscheint die Fehlermeldung des Beitrags:

Wenn dies standardmäßig so ist, können wir unsere Benutzer informieren. Ich wollte nur sichergehen, ob es sich um das neue Verhalten beim Zitieren von Benutzern mit dem neuen Editor handelt.

Danke.

1 „Gefällt mir“

Das ist nicht beabsichtigt, wir haben eine interne Aufgabe, dieses Verhalten insbesondere zu verbessern.

3 „Gefällt mir“

Hallo :waving_hand: Danke, das ist ziemlich cool :heart_eyes:

Ich habe bemerkt, dass es die Markierung [wrap]Hallo[/wrap] noch nicht unterstützt und ich habe diese Nachricht erhalten, als ich versucht habe, sie zu verwenden.

Token-Typ wrap_open wird vom Markdown-Parser nicht unterstützt

2 „Gefällt mir“

Ich glaube nicht, dass es einen Plan zur Unterstützung eines generischen „Wrap“-Knotens gibt. Wie würde das aussehen? Nur ein Div?

Oder gibt es ein [wrap=etwas], das Sie mit dem neuen Composer verwenden möchten?

2 „Gefällt mir“

Wo hast du diese Nachricht gesehen? Meine Instanz verwirft einfach die BBcodes

[wrap]Hallo[/wrap]

wird zu

Hallo

Wir verwenden einige Theme-Komponenten wie Discourse Icon und Discourse Stickers.

Ich denke, ich kann die Sticker-Komponente ohne Umbruch erstellen, da sie nur für das Ziel gedacht ist und dem Sticker einige Stile hinzufügt.

Füge sie auf der Seite des Rich-Text-Editors ein oder wechsle von der Markdown-Seite, wenn du sie dort eingefügt hast.

2 „Gefällt mir“

Ich bekomme den Fehler nicht, aber der BBCode bleibt bestehen. Es gibt keine Vorschau auf dem Desktop, wenn der Rich-Text-Editor ausgewählt ist.



Das war auf dem Discourse Commit Hash latest-release +269

und

BBcode Commit Hash 1fbff6b1

Dies funktioniert wie vorgesehen, getippter BBCode wird absichtlich escaped (= als Text angezeigt), wenn er nicht erkannt/implementiert ist, was hier der Fall ist.

Würde das für Sie funktionieren:

.d-editor-container .d-editor-textarea-wrapper textarea.d-editor-input {
    font-family: var(--font-family);
}

3 „Gefällt mir“