JOOMLA!
uando crei la prossima generazione di prodotti software trasformazionali, desideri fornire la migliore esperienza utente possibile.
TinyMCE rich text editor viene fornito con un set predefinito di funzionalità e opzioni di formattazione, ma puoi personalizzarlo per fornire praticamente qualsiasi UI/UX: controlla 9 prodotti che puoi creare con TinyMCE .
In questo articolo, discuteremo come configurare l'editor con caratteri personalizzati tra i quali gli utenti possono scegliere, oltre a come impostare un carattere personalizzato come carattere predefinito dell'editor, se necessario.
Supponiamo che tu abbia già un'istanza di TinyMCE attiva e funzionante e che tu sappia già come configurare l'editor modificando lo script di inizializzazione.
Aggiungi una famiglia di caratteri personalizzata al menu
TinyMCE viene fornito con 17 opzioni di carattere per impostazione predefinita. A seconda della configurazione dell'editor, gli utenti possono selezionare un carattere da menubaro da toolbar(tramite il menu a fontselectdiscesa).
fontselectmenu della barra degli strumenti.NOTA: se il fontselectmenu a discesa non è già sulla barra degli strumenti, puoi aggiungerlo all'elenco dei controlli della barra degli strumenti nella tua configurazione; per esempio:
tinymce.init({
/* ... */
toolbar:
"undo redo | styleselect | fontselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent",
});
Per aggiungere una famiglia di caratteri personalizzata all'elenco delle opzioni di carattere visualizzato, dovrai:
1. Aggiungi il carattere come opzione di menu
Modifica l'elenco delle opzioni di carattere disponibili utilizzando font_formats- in modo che gli utenti abbiano il carattere desiderato come opzione tra cui scegliere.
L'elenco predefinito delle opzioni dei caratteri è
tinymce.init({ /* ... */ font_formats: "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats", });
Modifica le opzioni dei caratteri disponibili sovrascrivendo l'elenco predefinito, aggiungendolo o creando un elenco completamente nuovo.
Ad esempio, se si desidera aggiungere il carattere Oswald, è possibile aggiungerlo all'elenco predefinito come segue (l'ordine alfabetico è consigliato ma non necessario):
tinymce.init({
/* ... */
font_formats:
"Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Oswald=oswald; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats",
});
2. Importa il carattere in TinyMCE
Importa il carattere nel CSS TinyMCE usando content_csso content_style- così qualsiasi testo scritto all'interno dell'editor in quello stile verrà visualizzato correttamente.
Continuando con lo stesso esempio, importeresti il font Oswald come segue:
tinymce.init({
/* ... */
content_style:
"@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');",
});Per ulteriori informazioni sull'uso di content_csse content_style, dai un'occhiata al nostro post sul blog su come modificare il carattere predefinito .
3. Importa il carattere nella pagina
Importa il carattere nella pagina in cui è incorporato TinyMCE, in modo che venga visualizzato correttamente quando visualizzato nei menu di TinyMCE.
Per esempio:
<style>
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
</style>4. Importa il carattere in tutte le pagine pubblicate
Sebbene i passaggi precedenti aggiungeranno il carattere personalizzato all'editor TinyMCE, dovrai anche assicurarti che sia importato in tutte le pagine in cui è pubblicato quel contenuto.
Imposta il carattere predefinito
Se vuoi anche impostare il carattere predefinito sul carattere personalizzato, puoi impostare la famiglia di caratteri nell'editor CSS. Per esempio:
tinymce.init({
/* ... */
content_style:
"@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap'); body { font-family: Oswald; }",
});
Ancora una volta, dovrai assicurarti che lo stesso stile sia applicato a tutte le pagine pubblicate per vederlo renderizzato lì.
Esempio completo
Dopo aver apportato queste modifiche, la famiglia di caratteri sarà disponibile per gli utenti tra cui scegliere. Guarda l'esempio completo su CodePen:
-------------------------------
