Barra degli strumenti di formattazione

Personalizzazione Plugin
148

Non credo che sarei in grado di fare una cosa del genere. Quando ho creato il plugin, non eravamo ancora su FontAwesome5 e non ho trovato un’icona adatta per l’indentazione a destra. Se hai un

Ma se vuoi modificare il pulsante predefinito, hai due soluzioni:

Nascondi il pulsante float left con questo CSS

/* PULSANTE FLOAT LEFT */
.d-editor-button-bar .floatl_ui_button {
    display: none;
}

E importa un componente tema che aggiungerà un pulsante floatr.

Puoi scaricare questo: discourse-floatr.zip (1,2 KB)

È un componente tema che ho appena creato su Discourse Theme per aggiungere un pulsante floatr con la stessa icona del precedente floatl.

https://theme-creator.discourse.org/theme/Steven/floatr

1 Mi Piace
149

Steven! Sei un genio! Grazie mille per il lavoro extra su questo :folded_hands:

Ho scelto l’opzione 2 perché non ho idea di come fare un fork e modificare un plugin!

Tutto ha funzionato perfettamente e ora quel pulsante fa esattamente quello che vogliamo!

1 Mi Piace
150

Un’ultima domanda: esiste un modo semplice per spostare pulsanti specifici dalla barra principale e nasconderli nel menu dell’icona a ingranaggio?

Ad esempio,

image
image956×417 105 KB

Adoro tutti questi strumenti di questo plugin, ma penso che la maggior parte dei nostri utenti probabilmente non utilizzerà le opzioni di formattazione avanzata, quindi vorrei semplificarle per loro. Non mi dispiace avere un clic in più quando scrivo i post, se questo rende l’esperienza più pulita e semplice per i nostri utenti.

151

Facile, no. Servirebbe una modifica simile a quella del pulsante floatr.

O fare un fork e modificare il plugin, oppure nasconderli e ricrearli nell’opzione del menu a comparsa della barra degli strumenti.

Potresti usare il mio componente tema come esempio per vedere come aggiungere alcune opzioni in questo menu. Oppure potrei modificare il componente floatr che ho creato per aggiungere questo pulsante nelle opzioni del menu a comparsa, e tu potrai facilmente completare il lavoro dopo.

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

152

Innanzitutto, GRAZIE ancora per quell’aggiornamento sul pulsante floatr. L’ho già usato una mezza dozzina di volte e adoro non dover passare da floatl a floatr! Grazie mille!!!

Prima o poi vorrei imparare di più e essere in grado di sapere come modificare e creare plugin. Mi piacerebbe ricambiare e contribuire ai grandi sviluppi di persone come te, in questa comunità.

Sarebbe fantastico se potessi aggiungere quei pulsanti extra all’icona dell’ingranaggio nel “menu a comparsa”, in modo che ci siano meno opzioni visibili per gli utenti medi. Sono competente in CSS e nell’ispezione degli elementi del browser per scoprire quali classi/ID modificare. Potrei fare lo stesso con il tuo “componente” in modo da poter esaminare la sintassi del codice e decidere facilmente quali pulsanti inserire nel menu e/o rimuovere dal menu per rimetterli sulla barra? O è un po’ più complesso di così?

153

È più complesso perché non utilizza lo stesso JavaScript.

Ho creato un esempio rapido: se vuoi un pulsante per il testo barrato nell’editor, devi usare questo JavaScript

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "strike_button",
        group: "fontStyles",
        icon: "strikethrough",
	perform: e => e.applySurround('<s>', '</s>', 'strike_text')
    });
});

Ma per le opzioni del menu della barra degli strumenti, è completamente diverso

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "strike",
    icon: "strikethrough",
    label: "strike_button"
  };
});

api.modifyClass("controller:composer", {
  actions: {
    strike() {
      this.get("toolbarEvent").applySurround("<s>", "</s>", "strike_prompt");
    },
  }
});

Non ho aggiunto le traduzioni necessarie per le opzioni della barra degli strumenti, ecc. Ma hai capito il concetto.

Non ho le conoscenze per aggiungere una scelta tra la barra degli strumenti e le opzioni del menu e adattare il JavaScript. Il mio tentativo di aggiungere un’opzione per attivare/disattivare alcuni pulsanti ha funzionato per un po’, ma recentemente si è rotto e non so davvero come risolverlo. Quindi ho dovuto fare una scelta per la maggior parte degli utenti.

Comunque, se vuoi mantenere il BBCode ma spostare i pulsanti nelle opzioni del menu, penso che il modo migliore sia mantenere il plugin, nascondere i pulsanti tramite CSS e utilizzare un componente del tema per aggiungere pulsanti alle opzioni del menu. È assolutamente fattibile, dato che abbiamo sostanzialmente fatto qualcosa di simile per il pulsante fluttuante. Richiede un po’ di tempo, ma se sei in difficoltà su questo argomento posso aiutarti.

Per i componenti del tema, è meglio utilizzare Discourse Theme, dove puoi aggiungere impostazioni al tuo componente, traduzioni e il codice, e visualizzarne l’anteprima. È uno strumento davvero utile per i creatori.

2 Mi Piace
154

Sei incredibile, @Steven! Grazie per questa risposta esaustiva. Penso di vedere come la comunità gestirà la presenza di tutte le opzioni e, se sentirò che crea confusione, adotterò il tuo secondo approccio qui, relativo ai componenti del tema. Quella strategia mi sembra molto chiara.

Grazie ancora per il tuo aiuto e per il supporto a questo fantastico plugin. A proposito… non riesco a dirti abbastanza grazie per avermi aiutato a cambiare il pulsante fluttuante predefinito su “destra”. È stato fantastico!

155

Domanda rapida: cosa dobbiamo modificare in questo codice api.onToolbarCreate nel nostro tema per un’azione del pulsante diversa nell’editor?

In sostanza, vogliamo aggiungere un nuovo pulsante nell’editor che avvolga un blocco di codice multilinea con questo MD:

```text

```

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text')
    });
});

Così che il risultato avvolga un intero blocco di codice multilinea invece di applicare la nostra nuova azione a ogni singola riga?

Prima dell’azione del pulsante:

Screen Shot 2020-04-08 at 7.02.47 PM
Screen Shot 2020-04-08 at 7.02.47 PM860×209 11.8 KB

Dopo l’azione del pulsante:

Screen Shot 2020-04-08 at 7.02.53 PM
Screen Shot 2020-04-08 at 7.02.53 PM2048×858 130 KB

Immagino esista un metodo diverso da e.applySurround che operi su un blocco di testo multilinea? Ma cercando sul sito e su Google non ho trovato nulla, quindi dopo 30 minuti di ricerca ho deciso di fare una domanda.

Ho anche cercato su https://docs.discourse.org/ con varie parole chiave senza fortuna.

Grazie,

156

Ho trovato il metodo / parametro multiline: false con un po’ di ricerca su Google…

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 } )
    });
});

Quindi, sono pronto. Grazie.

157

Correggetemi se sbaglio, ma il bbcode ufficiale di Discourse è già incluso nell’ultima versione di Discourse. Se installo questo plugin, ci sarà un conflitto? Il motivo principale per cui voglio questa barra di formattazione è avere la possibilità di cambiare il colore del testo tramite un pulsante.

158

Non c’è alcun conflitto.

159

Il plugin BBCode di Discourse sembra ancora essere un plugin esterno, non incluso nel core.

Hai due opzioni:

  • Questo plugin che aggiunge i BBCode al motore + alcuni pulsanti nella barra degli strumenti
  • Il plugin BBCode ufficiale + Composer extras (un componente del tema opzionale che aggiunge alcuni pulsanti nella barra degli strumenti).

La seconda opzione è la migliore se preferisci utilizzare il plugin ufficiale; il componente del tema può essere facilmente disattivato se necessita di aggiornamenti.

La barra degli strumenti di formattazione non dovrebbe essere rotta o creare conflitti con il core di Discourse.

1 Mi Piace
160

Prima utilizzavo il componente del tema md composer con il plugin bbcode ufficiale. Tuttavia, non c’è un pulsante per cambiare il colore del testo, cosa che questo plugin invece prevede. Idealmente, sarebbe bello avere un selettore di colori, ma non credo sia possibile.

161

Ah, capisco: il componente utilizza solo gli elementi disponibili nel core, mentre il bbcode per i colori richiede un plugin, come sai. Non è difficile modificare un pulsante nel componente (o fare un fork su GitHub), ma nel tuo caso hai ragione: questo plugin è la scelta migliore.

Puoi installare questo plugin, ma ti consiglio di disinstallare allo stesso tempo il plugin bbcode ufficiale per evitare conflitti nel motore markdown.

Per quanto riguarda il selettore di colori, onestamente non sono un bravo programmatore: ho solo utilizzato alcuni strumenti disponibili da condividere con la comunità. Accolgo con piacere una pull request per migliorare questo plugin.

1 Mi Piace
162

Probabilmente imparerò a giocare aggiungendo pulsanti al composer, dato che sto creando il mio plugin. Tuttavia, non sono sicuro di essere la persona giusta per inviare una pull request per aggiungere un selettore di colori, visto che ho iniziato a imparare Discourse da poco.

E sì, ho disinstallato il plugin bbcode ufficiale. C’era anche il plugin bbcode awesome che includeva il completamento automatico. Tuttavia, grazie al pulsante per il colore, credo che questa soluzione sia migliore per gli utenti medi che sono nuovi su Discourse e non hanno familiarità con bbcode.

163

image

Ho notato che questo plugin include un altro pulsante “inserisci immagine”. È davvero necessario, dato che quello originale permette già di allegare file o inserire link URL? Mi piacciono gli altri pulsanti di formattazione. Mi chiedevo solo perché sembra strano avere due icone per le immagini nell’editor. Se non può essere rimosso, dovrò tornare a usare l’editor md + il bbcode ufficiale.

1 Mi Piace
164

Puoi facilmente utilizzare CSS per nascondere qualsiasi pulsante o elemento desideri nascondere nella barra degli strumenti dell’editor.

Oppure, un’alternativa:

Puoi facilmente modificare il plugin per rimuovere qualsiasi pulsante che non desideri visualizzare nella barra degli strumenti dell’editor.

165

È stato aggiunto principalmente per essere utilizzato con il pulsante fluttuante o per l’allineamento dei forum, che dipendono molto dai link esterni. Se usi principalmente immagini caricate internamente, puoi nasconderlo.

166

Se commento le righe, sarà sufficiente per rimuovere quel pulsante?

https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6#L18L25

167

È meglio aggiungere un po’ di CSS nel tuo tema

/* PULSANTE IMMAGINE */
.d-editor-button-bar .addimg_ui_button {
    display: none;
}
1 Mi Piace