Ich glaube nicht, dass ich so etwas bewerkstelligen könnte. Als ich das Plugin erstellt habe, waren wir noch nicht bei FontAwesome5, und ich habe keine passende Icon für „Einzug nach rechts
1 „Gefällt mir“
Steven! Du bist ein Genie! Vielen Dank für die zusätzliche Arbeit daran 
Ich habe mich für Option 2 entschieden, weil ich keine Ahnung habe, wie man ein Plugin forkt und modifiziert!
Alles hat perfekt funktioniert, und jetzt macht dieser Button genau das, was wir wollen!
1 „Gefällt mir“
Noch eine Frage: Gibt es eine einfache Möglichkeit, bestimmte Buttons aus der Hauptleiste zu verschieben und im Menü mit dem Zahnrad-Symbol auszublenden?
z. B.
Ich mag alle diese Tools aus diesem Plugin, aber ich denke, die meisten unserer Nutzer werden wahrscheinlich nicht die umfangreichen Formatierungsoptionen nutzen. Daher möchte ich es für sie vereinfachen. Eine zusätzliche Klickaktion beim Verfassen von Beiträgen stört mich nicht, wenn es unseren Nutzern ein saubereres und einfacheres Erlebnis bietet.
Einfach geht es leider nicht. Es wären einige Änderungen nötig, ähnlich wie beim Floatr-Button.
Entweder durch Forken und Bearbeiten des Plugins oder durch Ausblenden und erneutes Erstellen im Popup-Menü der Werkzeugleiste.
Du kannst meine Theme-Komponente als Beispiel nehmen, um zu sehen, wie man Optionen in dieses Menü hinzufügt. Oder ich kann die von mir erstellte Floatr-Komponente so anpassen, dass dieser Button in den Popup-Menü-Optionen erscheint, und du kannst den Rest danach leicht fertigstellen.
Zunächst einmal: DANKE nochmals für die Anpassung des floatr-Buttons. Ich habe ihn bereits ein halbes Dutzend Mal verwendet und liebe es, nicht mehr zwischen floatl und floatr wechseln zu müssen! Vielen Dank!!!
Irgendwann würde ich gerne mehr lernen und in der Lage sein, Plugins zu bearbeiten und zu erstellen. Ich würde gerne etwas zurückgeben und zu den großartigen Entwicklungen von Leuten wie dir in dieser Community beitragen.
Es wäre großartig, wenn du diese zusätzlichen Buttons zum Popup-Menü des Zahnradsymbols hinzufügen könntest, damit weniger Optionen für durchschnittliche Benutzer sichtbar sind. Ich bin mit CSS vertraut und untersuche Browser-Elemente, um herauszufinden, welche Klassen/IDs ich ändern möchte. Könnte ich dasselbe mit deiner „Komponente
Es ist komplexer, da nicht dasselbe JavaScript verwendet wird.
Ich habe ein schnelles Beispiel erstellt: Wenn Sie einen Durchstreichen-Button im Editor haben möchten, müssen Sie dieses JavaScript verwenden:
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: "strike_button",
group: "fontStyles",
icon: "strikethrough",
perform: e => e.applySurround('<s>', '</s>', 'strike_text')
});
});
Für die Menüoptionen der Symbolleiste sieht das jedoch völlig anders aus:
api.addToolbarPopupMenuOptionsCallback(() => {
return {
action: "strike",
icon: "strikethrough",
label: "strike_button"
};
});
api.modifyClass("controller:composer", {
actions: {
strike() {
this.get("toolbarEvent").applySurround("<s>", "</s>", "strike_prompt");
},
}
});
Ich habe die benötigten Übersetzungen für die Symbolleistenoptionen usw. nicht hinzugefügt. Aber Sie haben die Grundidee.
Ich verfüge nicht über das Wissen, um eine Auswahl zwischen der Symbolleiste und den Menüoptionen zu treffen und das JavaScript anzupassen. Mein Versuch, Optionen zum Aktivieren/Deaktivieren bestimmter Buttons hinzuzufügen, hat eine Weile funktioniert, ist aber kürzlich kaputtgegangen, und ich weiß nicht wirklich, wie ich es reparieren soll. Also musste ich eine Entscheidung für die meisten Benutzer treffen.
Wie auch immer: Wenn Sie das BBCode beibehalten, aber die Buttons in die Menüoptionen verschieben möchten, ist meiner Meinung nach der beste Weg, das Plugin zu behalten, die Buttons über CSS auszublenden und eine Theme-Komponente zu verwenden, um Buttons in den Menüoptionen hinzuzufügen. Das ist absolut machbar, da wir im Grunde etwas Ähnliches für den schwebenden Button umgesetzt haben. Es erfordert zwar etwas Zeit, aber wenn Sie sich in diesem Thema nicht auskennen, kann ich Ihnen gerne helfen.
Für Theme-Komponenten ist es am besten, Discourse Theme zu verwenden. Damit können Sie Einstellungen, Übersetzungen und Code zu Ihrer Komponente hinzufügen und diese im Vorschau-Modus betrachten. Es ist ein wirklich tolles Werkzeug für Entwickler.
2 „Gefällt mir“
Du bist unglaublich, @Steven! Vielen Dank für diese ausführliche Antwort. Ich denke, ich werde erst einmal beobachten, wie die Community mit all den Optionen zurechtkommt. Falls ich höre, dass es verwirrend ist, werde ich deinen zweiten Ansatz hier mit den Theme-Komponenten verfolgen. Dieser Ansatz kommt mir sehr klar vor.
Nochmals vielen Dank für deine Hilfe und dafür, dass du dieses fantastische Plugin unterstützt. Übrigens… ich kann nicht oft genug danke sagen, dass du mir geholfen hast, den Standard-Schwebeknopf auf “rechts” umzustellen. Das war großartig!
Kurze Frage: Was müssen wir in diesem Code api.onToolbarCreate in unserem Theme ändern, um eine andere Button-Aktion im Editor zu erhalten?
Im Grunde möchten wir einen neuen Editor-Button hinzufügen, der dieses MD um einen mehrzeiligen Codeblock herum platziert:
```text
```
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: "code_button",
group: "fontStyles",
icon: "code",
perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text')
});
});
Damit das Ergebnis um einen mehrzeiligen Codeblock herum platziert wird, anstatt unsere neue Aktion für jede einzelne Zeile auszuführen?
Vor der Button-Aktion:
Nach der Button-Aktion:
Ich gehe davon aus, dass es eine andere Methode als e.applySurround gibt, die auf einen mehrzeiligen Textblock angewendet wird? Doch eine Suche auf der Website und bei Google hat nichts ergeben. Nach 30 Minuten Suchen habe ich mich daher entschieden, eine Frage zu stellen.
Außerdem habe ich https://docs.discourse.org/ mit verschiedenen Stichworten durchsucht, aber leider ohne Erfolg.
Danke,
Ich habe die Methode / den Parameter multiline: false mit etwas mehr Google-Suche gefunden…
perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )
});
api.onToolbarCreate(toolbar => {
toolbar.addButton({
id: "code_button",
group: "fontStyles",
icon: "code",
perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )
});
});
Also, ich bin fertig. Danke.
Korrektur mich, wenn ich falsch liege, aber das offizielle Diskurs-BBCode ist bereits in der neuesten Version von Discourse enthalten. Wenn ich dieses Plugin installiere, wird es dann zu Konflikten kommen? Der Hauptgrund, warum ich diese Formatierungsleiste möchte, ist die Möglichkeit, die Textfarbe über einen Button zu ändern.
Es gibt überhaupt keinen Konflikt.
Das Discourse BBCode-Plugin scheint immer noch ein externes Plugin zu sein und ist nicht im Core enthalten.
Du hast zwei Möglichkeiten:
- Dieses Plugin, das die BB-Codes in die Engine integriert und einige Buttons in die Symbolleiste hinzufügt
- Das offizielle BBCode-Plugin + Composer-Extras (eine optionale Theme-Komponente, die zusätzliche Buttons in die Symbolleiste einfügt).
Die zweite Option ist die beste, wenn du das offizielle Plugin bevorzugst. Die Theme-Komponente kann bei Bedarf einfach deaktiviert werden, falls Updates erforderlich sind.
Die Formatierungssymbolleiste sollte nicht beschädigt werden oder einen Konflikt mit dem Discourse-Core verursachen.
1 „Gefällt mir“
Ich habe zuvor das md composer theme component mit dem offiziellen BBCode-Plugin verwendet. Allerdings gibt es keine Schaltfläche zum Ändern der Textfarbe, die dieses Plugin bietet. Idealerweise wäre ein Farbwähler schön, aber ich glaube nicht, dass das möglich ist.
Ah, ich verstehe. Die Komponente verwendet nur Elemente, die im Core verfügbar sind, und für das Farb-BBCode ist, wie du weißt, ein Plugin erforderlich. Es ist nicht allzu schwierig, einen Button in der Komponente zu bearbeiten (oder eine Fork auf GitHub zu erstellen), aber in deinem Fall hast du recht: Dieses Plugin ist die beste Wahl.
Du kannst dieses Plugin installieren, aber ich empfehle dir, gleichzeitig das offizielle BBCode-Plugin zu deinstallieren, um Konflikte in der Markdown-Engine zu vermeiden.
Bezüglich des Farbwählers: Ehrlich gesagt bin ich kein guter Programmierer. Ich habe lediglich einige verfügbare Tools genutzt, um sie mit der Community zu teilen. Ich nehme gerne einen Pull Request entgegen, um dieses Plugin zu verbessern.
1 „Gefällt mir“
Ich werde wahrscheinlich lernen, wie man dem Editor Schaltflächen hinzufügt, da ich mein eigenes Plugin entwickeln möchte. Allerdings bin ich mir nicht sicher, ob ich der Richtige bin, um einen Pull Request für einen Farbauswahl-Button einzureichen, da ich Discourse erst seit Kurzem kennenlerne.
Und ja, ich habe das offizielle bbcode-Plugin deinstalliert. Es gibt auch das großartige bbcode-Plugin mit Autovervollständigung. Aufgrund des Farbknotens denke ich jedoch, dass dies für durchschnittliche Benutzer besser geeignet ist, die neu bei Discourse sind und mit bbcode nicht vertraut sind.
Mir ist aufgefallen, dass dieses Plugin einen weiteren „Bild einfügen“-Button enthält. Ist das wirklich notwendig, da der ursprüngliche Button bereits Anhänge oder URL-Links erlaubt? Die Formatierungsschaltflächen sind ansonsten gut. Ich frage mich nur, weil es seltsam aussieht, zwei Bild-Icons im Editor zu haben. Wenn er nicht entfernt werden kann, werde ich wieder auf den md-Editor plus offizielle BBCode zurückgreifen müssen.
1 „Gefällt mir“
Sie können mit CSS ganz einfach jeden Button oder jedes Element in der Editor-Toolbar ausblenden, das Sie verstecken möchten.
Oder eine andere Alternative:
Sie können das Plugin ganz einfach so anpassen, dass alle Buttons entfernt werden, die Sie in der Editor-Toolbar nicht anzeigen möchten.
Es wurde hauptsächlich für die Verwendung mit der schwebenden Schaltfläche oder der Ausrichtung für Foren hinzugefügt, die stark auf externe Links angewiesen sind. Wenn Sie hauptsächlich hochgeladene interne Bilder verwenden, können Sie es ausblenden.
Wenn ich die Zeilen auskommentiere, reicht das aus, um den Button zu entfernen?
Es ist am besten, etwas CSS in dein Theme aufzunehmen
/* IMAGE BUTTON */
.d-editor-button-bar .addimg_ui_button {
display: none;
}
1 „Gefällt mir“