Extra per MD Composer

[Steven]

Questo componente del tema aggiunge alcune opzioni di formattazione nell’editor: sottolineatura, allineamento al centro, allineamento a destra, giustificazione e barratura. È possibile personalizzare il testo di ciascun pulsante nelle impostazioni, rendendolo compatibile con tutte le lingue. Esiste una versione RTL (che cambia l’allineamento a destra in allineamento a sinistra).

Compatibilità

Questo componente del tema è un’alternativa alla Barra degli strumenti di formattazione di Discourse, non si consiglia di utilizzare entrambi.

Consiglio il plugin, ma se non si desidera (o non si può) installare un plugin, questo componente del tema potrebbe aggiungere opzioni sufficienti nell’editor.

Inoltre, per adattare il componente ai dispositivi mobili, ho nascosto alcuni pulsanti: elenco puntato, elenco e giustificazione. Sembravano i meno utili su questi dispositivi.

Per i forum con lingue RTL, ecco la versione RTL: GitHub - MonDiscourse/md-composer-extras-rtl: Add some formatting option in your discourse composer (rtl version) · GitHub

Fatemelo sapere se ci sono problemi!

	Anteprima	md-composer-extras - Anteprima
	Repository	md-composer-extras
	Guida all’installazione	Come installare un tema o un componente del tema
	Nuovo ai temi di Discourse?	Guida per principianti all’uso dei temi di Discourse

[Anatolia]

It becomes like this if I use alignin together with underline.

[Steven]

That’s a limitation of the div align code, you need to add a line between the div align and your text

<div align="center">

[u]underline[/u]
</div>

That’s why I used a bbcode in my formatting toolbar, but I could only use the div in this theme component.

I’ll probably add an extra line by default and a little explanation

[Steven]

I upgraded the component to add those extra lines by default, now, when you use a align button and the underline button, you’ll have something like this

[tophee (Christoph)]

@Steven

I recommend the plugin

What are the disadvantages of using the theme-component?

[Steven]

The plugin is easier to customize, we can choose which buttons will appear or not, and there are some additional options like color or a float button that can do something like this with the image

[jtbayly]

Davvero incredibile ciò che si può fare con i componenti del tema! Ben fatto.

[verilog15 (verilog)]

Ben fatto
Pensi sia possibile in qualche modo convertire i tag HTML in un tag predefinito come [Center] e che qualcosa nel backend li riconverta (per motivi di interfaccia)?

[Steven]

All’epoca, non era possibile creare facilmente alcuni bbcode con i componenti del tema; non so se ora sia possibile.

Per il momento, se desideri avere il bbcode per il centrato e un pulsante nell’editor, il metodo migliore è utilizzare il plugin: Formatting toolbar

[Johani (Joe)]

Un tag come [center] richiederà comunque un plugin, ma hai ragione @Steven

Al momento della creazione di questo componente, dovevi usare i tag HTML <div>. Tuttavia, ora puoi usare [wrap="foo"][/wrap] nei temi o nei componenti.

Puoi leggere ulteriori informazioni qui:

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

Ecco un esempio semplice:

[wrap="center"] 
Testo centrato 
[/wrap]

genererà questo markup quando il post viene elaborato:

<div class="d-wrap" data-wrap="center">
  <p>Testo centrato</p>
</div>

che puoi poi selezionare con un selettore CSS per attributi in questo modo:

[data-wrap="center"] {
  text-align: center;
}

e otterrai qualcosa del genere sia nell’anteprima del compositore che nel post renderizzato:

oppure:

[wrap="right"] 
Testo allineato a destra 
[/wrap]

che genererà questo markup elaborato:

<div class="d-wrap" data-wrap="right">
  <p>Testo allineato a destra</p>
</div>

A questo punto puoi aggiungere questo CSS:

[data-wrap="right"] {
  text-align: right;
}

per ottenere questo risultato:

Poiché il componente utilizza attualmente l’attributo HTML align, questa modifica dovrebbe essere completamente compatibile con le versioni precedenti.

Provalo quando hai tempo e non esitare a inviarmi un messaggio privato se hai domande a riguardo.

[thwright]

Ho appena inviato le pull request per i componenti wrap.

https://github.com/iunctis/md-composer-extras/pull/1
https://github.com/iunctis/md-composer-extras/pull/2
https://github.com/iunctis/md-composer-extras/pull/3

[thwright]

Ho aggiunto ulteriori pull request per float a sinistra, con un’opzione CSS per float a destra, spostando il pulsante barrato insieme ai pulsanti grassetto, corsivo e sottolineato, e ho creato un pulsante base per le colonne. Quest’ultimo potrebbe essere meglio come componente separato o spostato nel menu a comparsa.

Ho rimosso la pull request; richiede ulteriori modifiche. Sto anche valutando di aggiungere i pulsanti per apice e pedice, ma una volta aggiunti eventi del calendario, slick e riquadri, ci sono troppi pulsanti nel composer mobile nella versione verticale. Non dovrebbe essere un problema in orizzontale, ma se tutti i pulsanti devono essere accessibili da entrambi i menu, allora dovrebbero essere spostati nel menu a comparsa.

Hai qualche idea, @Steven, su come vuoi gestire la situazione?

Dividerò semplicemente il file JS principale in due file e lavorerò su alcuni CSS responsivi.

Idealmente, dovremmo anche aggiungere impostazioni per disabilitare/nascondere i pulsanti come desiderato.

---

EDIT: Ho implementato le modifiche menzionate (ma gli elementi non hanno un’opzione per essere nascosti al di fuori del CSS) e devo solo testare le modifiche prima di inviare una PR.

[thwright]

Quella PR dovrebbe essere ora a posto, @Steven.

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

Questa PR implementa la responsività, i float, le colonne, gli apici e i pedici. Consulta il README per sapere come funzionano le colonne.

[ondrej]

Ciao,
Non ho idea del perché stia succedendo. L’ho caricato l’altro giorno. Sono sull’ultima versione, almeno è quello che mi dice.
Grazie

[Steven]

Ho appena aggiornato, ma dovrebbe funzionare correttamente: l’ho appena testato su un sito sia da desktop che da mobile.

Puoi provare a eliminare il componente e reinstallarlo? Sembra che sul tuo forum ci sia un problema.

Oppure usi anche il plugin della barra degli strumenti di formattazione? Potrebbe creare doppie icone.

[ondrej]

Ok, grazie! Controllerò e farò come dici. Buon compleanno anche a te!

[zuker (Matías)]

È possibile nascondere alcune icone?

[Steven]

Quali vuoi nascondere? Ti aiuto a farlo.

[zuker (Matías)]

Strike, sub, sup Grazie!

[Steven]

Il modo più semplice è aggiungere queste righe CSS al tuo tema, in Comune > CSS

.d-editor-button-bar .strikethrough_button, .d-editor-button-bar .superscript_button, .d-editor-button-bar .subscript_button {
    display: none;
}