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

Eines unserer Hauptprojekte in diesem Jahr war die Entwicklung eines neuen Rich-Text-Bearbeitungsmodus 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 an dem Punkt angelangt, an dem wir das experimental-Label ablegen und Ihre Community zum Ausprobieren einladen können!

In diesem Thema werden wir mehr über den Composer, seine Funktionsweise und wie Sie ihn mit nur wenigen Klicks in Ihrer Community verfügbar machen können, erzählen.

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

Der neue Rich-Text-Editor vereinfacht die Schreiberfahrung für Discourse-Benutzer, insbesondere für diejenigen, die weniger technikaffin sind oder mit dem Schreiben in Markdown nicht vertraut oder nicht damit einverstanden sind. Der Rich-Text-Editor unterstützt Markdown sowie andere gängige Tastenkombinationen und Formatierungsanpassungen in der Symbolleiste, aber die Formatierung wird sofort gerendert, um eine WYSIWYG-Erfahrung (“What You See Is What You Get”) zu ermöglichen, ähnlich wie bei vertrauten Tools wie Google Docs und Notion.

:thought_balloon: Die Zukunft von Markdown

Wir wissen, dass viele Discourse-Benutzer den aktuellen Markdown-Composer lieben und seine vorhersehbare, unkomplizierte Schreiberfahrung genießen. Der neue Editor ist ein Composer-Modus, der neben dem bestehenden Markdown-Modus existiert, sodass Sie und Ihre Mitglieder den Schreibstil wählen können, der für Sie am besten geeignet ist.

Die meisten Dinge, die Sie im klassischen Markdown-Composer getan haben, werden jetzt im Rich-Text-Editor unterstützt, darunter:

  • Alle grundlegenden Formatierungen, unterstützt in Markdown (**fett**), mit gängigen Tastenkombinationen ( Befehl + B ) und über Symbolleistenschaltflächen.

  • Unterstützung für erweiterte Funktionen wie das Erstellen von Tabellen, das Erstellen von Umfragen, das Einfügen von Datum/Uhrzeit, das Hinzufügen von Abschnitten mit ausgeblendeten Details, das Hinzufügen von verschwommenen Spoiler-Abschnitten, das Hochladen von Dateien/Bildern/Videos, das Rendern von Links als Oneboxen, das Stylen von Kategorie-/Tag-/Benutzernennungen, das Zitieren von Inhalten und das Einfügen von Fußnoten.

  • Dedizierte Link-UI zum Besuchen, Bearbeiten, Kopieren, Benennen oder Entfernen von Links

  • Dedizierte Bild-UI zum Ändern der Größe, Hinzufügen von Bildunterschriften oder Löschen von Bildern

Es gibt jedoch einige Bereiche, an denen wir noch arbeiten, z. B. die einfachere Bearbeitung von Tabellen und Umfragen. Wir werden weiterhin auf Funktionsparität zwischen den Composer-Modi hinarbeiten und Sie ermutigen, #feature-Anfragen zu teilen, welche Funktionen und Möglichkeiten für Sie am wichtigsten sind, damit wir unsere Arbeit priorisieren können. In der Zwischenzeit können Sie jederzeit zum Markdown-Modus zurückkehren, um fortgeschrittene Anforderungen zu erfüllen.

:hammer: Wie wir es gebaut haben

Unsere Implementierung baut auf dem ausgezeichneten ProseMirror und seinem nicht-kernigen Markdown-Modul auf und verwendet die Schema-, Parsing- und Serialisierungsdefinitionen des Moduls als Basis für weitere Discourse-spezifische Funktionen.

:gear: Den neuen Composer aktivieren

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

CleanShot 2025-06-11 at 15.45.35


Update: Wenn Sie möchten, dass Ihren Mitgliedern standardmäßig der Markdown-Composer angezeigt wird:

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“