MD Composer Extras

Ist es möglich, die Option ‘Umfrage erstellen’ (auf dem Desktop) aus dem Extra-Menü herauszunehmen und neben die anderen Formatierungsschaltflächen zu verschieben?

Ähnlich wie Ihre Anfrage für Mobilgeräte erfordert dies etwas komplexere Bearbeitungen, die ich in diese Themenkomponente nicht einfügen kann. Es sollte jedoch in einer benutzerdefinierten Komponente für Desktop möglich sein, wobei die von angus und spirobel vorgestellte Logik befolgt wird.

3 „Gefällt mir“

Wie entfernt man die Mitte und richtet die Buttons links und rechts aus?

Übrigens, ich liebe diese Komponente.

Hallo!

Du kannst diese CSS-Zeilen in deinem Theme oder in einer Komponente hinzufügen:

.align_center_button, .align_right_button, .align_justify_button {
    display: none;
}

Ich vermute, du meinst den „Justify“-Button, da der „Align Left“-Button nicht in derselben Komponente hinzugefügt wurde.

1 „Gefällt mir“

Ist es möglich, all diese neuen Schaltflächen in das Menü der Optionsschaltfläche zu verschieben?

Das ist möglich, aber Sie müssten etwas im Code herumschauen.

Unter Desktop > Head finden Sie den gesamten JavaScript-Code. Sie müssen ein paar Zeilen ändern.

Beispiel: Der Code für eine Schaltfläche in der Symbolleiste sieht so aus:

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "underline_button",
        group: "fontStyles",
        icon: "underline",
        perform: e => e.applySurround('[u]', '[/u]', 'underline_text')
    });
});

Sie müssen dies durch Folgendes ersetzen:

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
      action: "underline",
      icon: "underline",
      label: "underline_button"
  };
});

Und fügen Sie die Aktion an dieser Stelle hinzu:

api.modifyClass("controller:composer", {
  actions: {
    underline() {
      this.get("toolbarEvent").applySurround('[u]', '[/u]', "underline_text");
    },
    floatleft() {
      this.get("toolbarEvent").applySurround('[wrap="floatl"]\n', '\n[/wrap]', "float_left_text");
    },
    columns() {
      this.get("toolbarEvent").applySurround('[wrap="columns"]\n', '\n[/wrap]', "columns_text");
    }
  }
});

Die Übersetzung sollte in Ordnung sein.

Sie werden schnell sehen, ob etwas nicht stimmt, da Discourse beim Speichern der Änderungen eine Fehlermeldung ausgibt.

5 „Gefällt mir“

Tolle Komponente, @Steven! Es wäre großartig, wenn wir auch H1, H2 und H3 hätten.

2 „Gefällt mir“

Kann [color] [/color] zu diesem Theme-Component hinzugefügt werden? Wenn ja, wäre das perfekt, da man dann den offiziellen Discourse BBCode+MD-Composer nutzen könnte. Derzeit verwende ich die Formatierungssymbolleiste + mdcomposer. Zwar könnte ich mit CSS die zusätzlichen Buttons ausblenden, aber es gibt Bereiche, in denen CSS nicht verwendet wird, wie im Admin-Bereich oder im Custom Wizard-Plugin von Pavilion. Der Farb-Button wird sehr häufig genutzt.

So sieht es mit CSS aus (was perfekt ist):
image

So sieht es ohne aus:
image

1 „Gefällt mir“

Mein Plan ist es, eine Komponente für diejenigen bereitzustellen, die kein Plugin verwenden möchten. Ich werde jedoch einen Branch mit Farb-BBCode erstellen. Ich werde es in ein paar Stunden ausprobieren, wenn ich Zeit habe. Ich werde euch Bescheid geben, sobald es fertig ist, und wie man es installiert.

Ich werde die Zeit wahrscheinlich nutzen, um die Theme-Komponente neu zu organisieren. Ich bevorzuge standardmäßig eine einfache TC. Ich werde einen Branch mit allen Optionen mit Subskript-Buttons verwenden sowie einen BBCode-Branch für diejenigen, die das offizielle BBCode-Plugin haben.

2 „Gefällt mir“

Danke, die Buttons für Tief- und Hochstellung sind einer der Gründe, warum man den md-Composer weiter verwenden sollte, dem anderen Plugins und Theme-Komponenten fehlen. Der offizielle BBCode enthält viele Funktionen, die im Formatting-Toolbar-Plugin nicht vorhanden sind, wie zum Beispiel [spoiler] [/spoiler]. Um das Beste aus beiden Welten zu vereinen, halte ich es für besser, den Discourse-BBCode beizubehalten und dann die benötigten Buttons über mdcomposer hinzuzufügen.

Ich dachte nicht, dass die Skript-Buttons beliebt sind, ich werde sie also in der Basiskomponente belassen.

Ich werde ein paar Branches erstellen: einen einfachen mit nur einigen grundlegenden Formatierungs-Buttons und einen Farb-Branch, der einen Farb-BBCode hinzufügt.

2 „Gefällt mir“

Hey Leute,

ich wollte euch nur Bescheid geben, dass dem md composer ein neuer color-Branch hinzugefügt wurde. Jetzt könnt ihr das offizielle Discourse-BBCODE-Plugin, den md composer (color-Branch) und das Discourse-Spoiler-Alert-Plugin (Spoiler verschwimmen lassen) kombinieren. Ich glaube, das ist die beste Kombination für Composer-Buttons auf Discourse.

Es gibt auch eine Idee, einen Farbwähler mit dieser kostenlosen Bibliothek hinzuzufügen:

Wenn jemand helfen möchte und weiß, wie man einen Farbwähler hinzufügt, könnt ihr Steven gerne unterstützen!

2 „Gefällt mir“

Wie kann ich einige dieser Schaltflächen vollständig ausblenden oder entfernen? Wir benötigen nur wenige davon, und ich habe festgestellt, dass das Entfernen einer Schaltfläche das dahinterliegende Element nicht aus der Liste entfernt (es bleibt ein leerer Platz ohne sichtbares Symbol).

Der beste Weg ist, einige CSS-Zeilen in Ihr aktuelles Theme einzufügen.

Ich habe diese Beispiele für die Ausrichtungs-Buttons gegeben, falls Sie diese entfernen möchten:

.align_center_button, .align_right_button, .align_justify_button {
    display: none;
}

Ich kann Ihnen auch den CSS-Code für die spezifischen Buttons geben, die Sie ausblenden möchten.

5 „Gefällt mir“

Hallo Steven, tolles Component. Danke fürs Teilen!

Eine kurze Frage: Wäre es möglich, einige Buttons zum Einfügen von geschützten Leerzeichen (z. B. nbsp ; ensp ; emsp) zu implementieren? Was sollte ich anstelle von applySurround verwenden?

Einige Mitglieder meiner Community haben Schwierigkeiten, Beiträge zu formatieren (hauptsächlich Einrückungen), und ich glaube, das wäre für sie hilfreich.

Danke!

Ja, Sie können problemlos eine Schaltfläche hinzufügen und anstelle von applySurround verwende ich addText

Ich habe dieses alte Beispiel, das Sie verwenden können

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "br_button",
        group: "extras",
        icon: "level-down-alt",
        perform: e => e.addText('<br>', 'br_text')
    });
});
3 „Gefällt mir“

Danke! Das wird funktionieren!

Hmm… Du scheinst keinen durchgestrichenen Text in der Discourse Formatting Toolbar zu haben, aber hier schon. Ich bevorzuge die Formatting Toolbar, da sie alles andere und mehr enthält, aber ich hätte gerne die Möglichkeit, durchgestrichenen Text zu verwenden. Was empfehlen Sie angesichts der Kompatibilitätsprobleme zwischen diesen beiden?

Ich könnte einen Durchstreich-Button in der Werkzeugleiste des Plugins hinzufügen, das könnte in Zukunft relevant sein.

Ich werde darüber nachdenken, aber in der Zwischenzeit können Sie das Plugin verwenden und diese Komponente hinzufügen: GitHub - MonDiscourse/discourse-strikethrough: Add a strikethrough button in the composer

Dies fügt einen Durchstreich-Button im Aktions-Popup-Menü hinzu, es ist mit dem Plugin kompatibel.

3 „Gefällt mir“

Ich habe einen PR eingereicht: https://github.com/MonDiscourse/md-composer-extras/pull/10, der, sofern ich kein Komma oder Ähnliches falsch gesetzt habe, beheben sollte

Um Fehler in Tests zu vermeiden, fügen Sie einen `pluginId`-Schlüssel zu Ihrem `modifyClass`-Aufruf hinzu. Dadurch wird sichergestellt, dass die Änderung nur einmal angewendet wird.
2 „Gefällt mir“