Configurazione di base

TinyMCE offre una gamma di opzioni di configurazione che ti consentono di integrarlo nella tua applicazione.

Questa introduzione a TinyMCE descrive in dettaglio le opzioni utilizzate nei tradizionali layout basati su moduli, informazioni utili per creare esperienze utente semplificate ed esempi di utilizzo di TinyMCE come editor inline.

Le quattro opzioni di configurazione più comuni per TinyMCE sono:

1. (Obbligatorio) La configurazione del Selettore
2. La configurazione del plugin
3. La configurazione della barra degli strumenti
4. La configurazione del menu e della barra dei menu

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugin: 'a_tinymce_plugin',
  a_plugin_option: true,
  a_configuration_option: 400
});

Gli snippet includono l' selectoropzione, descritta di seguito. Modificare il valore del blocco di codice funzionante in base all'HTML.

Inserisci lo snippet in un documento HTML tra i <script>tag e aggiorna il selettore come descritto di seguito.

Configurazione del selettore

La configurazione del selettore è necessaria per l'integrazione di TinyMCE. La configurazione del selettore utilizza la sintassi CSSselector per determinare quali elementi della pagina sono modificabili tramite TinyMCE.

TinyMCE sostituisce visivamente l'elemento selezionato con un iframe(l'area del contenuto modificabile) e gli elementi dell'interfaccia utente (come barra degli strumenti, barra dei menu e barra di stato).

L'esempio seguente sostituisce tutti textareagli elementi della pagina con le istanze TinyMCE:

Una nota sugli esempi di frammenti di codice

I frammenti di codice vengono forniti come implementazioni di esempio nella documentazione di TinyMCE.

Esempio di frammento di codice:

tinymce.init({
  selector: 'textarea'
});

TinyMCE può anche abbinare un idattributo.

L'esempio seguente sostituisce un textareaelemento con il id "default"nella pagina:

tinymce.init({
  selector: 'textarea#default'
});

Fornire un editor TinyMCE con la configurazione predefinita, come ad esempio:

Il selettore può indirizzare la maggior parte degli elementi di blocco quando l'editor viene utilizzato in modalità di modifica in linea . La modalità in linea modifica il contenuto in posizione, invece di sostituire l'elemento con un file iframe.

L'esempio seguente usa la selectormodalità di modifica in linea su un divelemento con id 'editable':

tinymce.init({
  selector: 'div#editable',
  inline: true
});

Per informazioni sulle differenze tra le modalità di modifica classica e in linea, vedere: Impostazione della modalità di modifica in linea .

Configurazione plug-in

La funzionalità di TinyMCE viene estesa utilizzando i plug-in, che vengono abilitati tramite l' pluginsopzione.

L'esempio seguente abilita i plug-in elenchi ( lists), Elenchi avanzati ( advlist), Link ( link) e Immagine ( image).

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'advlist link image lists'
});

Per un elenco completo dei plug-in e delle relative opzioni, vedere: Aggiungi plug-in a TinyMCE .

Configurazione della barra degli strumenti

TinyMCE fornisce un set predefinito di controlli della barra degli strumenti, che possono essere sovrascritti utilizzando l' toolbaropzione.

Controlli della barra degli strumenti predefiniti

La barra degli strumenti predefinita di TinyMCE contiene i seguenti pulsanti:

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent'
});

L' toolbaropzione definisce la presenza, l'ordine e il raggruppamento dei pulsanti della barra degli strumenti.

Usa un elenco separato da spazi per specificare i pulsanti della barra degli strumenti per TinyMCE. Crea gruppi di barre degli strumenti utilizzando il |carattere pipe " " tra i nomi dei pulsanti.

Informazioni aggiuntive

• Per ulteriori opzioni della barra degli strumenti, inclusa la disabilitazione della barra degli strumenti e l'aggiunta di più barre degli strumenti, vedere: Opzioni dell'interfaccia utente - barra degli strumenti .
• Per un elenco di tutti gli elementi della barra degli strumenti disponibili, vedere: Pulsanti della barra degli strumenti disponibili per TinyMCE .

Configurazione del menu e della barra dei menu

Sono disponibili due opzioni di menu: menubare menu. menubarviene utilizzato per definire la presenza e l'ordine dei menu , come File , Modifica e Visualizza . menuviene utilizzato per definire la presenza e l'ordine delle voci di menu , come Nuovo documento , Seleziona tutto e Codice sorgente .

Esempi di configurazione dei menu e delle barre dei menu

Per visualizzare i menu File , Modifica e Visualizza :

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menubar: 'file edit view'
});

Per creare un Editmenu che contenga solo gli elementi Annulla , Ripeti e Seleziona tutti .

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    edit: {title: 'Edit', items: 'undo, redo, selectall'}
  }
});

Per creare un menu intitolato "Happy", fornire un identificatore per il menu e un oggetto con titlee itemsper il menu.

Per esempio:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    happy: {title: 'Happy', items: 'code'}
  },
  plugins: 'code',  // required by the code menu item
  menubar: 'happy'  // adds happy to the menu bar
});

Controlli di menu predefiniti

I menu predefiniti sono i seguenti:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
    edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
    view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
    insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat' },
    tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
    table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
    help: { title: 'Help', items: 'help' }
  }
});

Nota : alcune voci di menu richiedono un plug-in, come il tablemenu e le voci richiedono il tableplug-in.

Informazioni aggiuntive

• Per informazioni menusull'impostazione, vedere: Opzioni interfaccia utente - menu .
• Per informazioni menubarsull'impostazione, vedere: Opzioni dell'interfaccia utente - barra dei menu .
• Per un elenco di tutte le voci di menu disponibili, vedere: voci di menu disponibili per TinyMCE .

Esempio di configurazione di base

L'esempio seguente è una configurazione TinyMCE di base.

<!DOCTYPE html>
<html>
<head>
  <script
    type="text/javascript"
    src='https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js'
    referrerpolicy="origin">
  </script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myTextarea',
    width: 600,
    height: 300,
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'table emoticons template paste help'
    ],
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
      'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
      'forecolor backcolor emoticons | help',
    menu: {
      favs: {title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons'}
    },
    menubar: 'favs file edit view insert format tools table help',
    content_css: 'css/content.css'
  });
  </script>
</head>

<body>
  <textarea id="myTextarea"></textarea>
</body>
</html>

Scomposizione dell'esempio di configurazione di base

La sezione seguente illustra in dettaglio le opzioni utilizzate nell'esempio di configurazione di base.

Seleziona il textareacon l'id myTextareache deve essere sostituito dall'editor.

selector: '#myTextarea',

Imposta la larghezza e l'altezza dell'area modificabile in pixel come valori numerici.

width: 600,
height: 300,

Seleziona i plugin da includere al caricamento.

plugins: [
  'advlist autolink link image lists charmap print preview hr anchor pagebreak',
  'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
  'table emoticons template paste help'
],

Seleziona i pulsanti della barra degli strumenti visualizzati dall'utente. Usa una virgola o uno spazio come separatore.

toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons',

Aggiunge un menu aggiuntivo denominato "I miei preferiti" con menu, quindi lo aggiunge alla barra dei menu utilizzando menubar.

menu: {
  favs: {title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons'}
},
menubar: 'favs file edit view insert format tools table help',

Imposta lo stile dell'area modificabile utilizzando content_css.

content_css: 'css/content.css',

Informazioni aggiuntive

• Per un elenco completo delle opzioni di configurazione, vedere: il Riferimento alle opzioni di configurazione .
• Per un elenco completo dei plug-in e delle relative opzioni, vedere: Aggiungi plug-in a TinyMCE .
• Per informazioni sugli elementi dell'interfaccia utente, vedere: Componenti dell'interfaccia utente .
• Per informazioni sul CSS richiesto per eseguire il rendering di alcuni elementi TinyMCE al di fuori dell'editor, vedere: CSS del contenuto Boilerplate .

--------------------------------------------

https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/?_ga=2.83130002.505957963.1663256263-1320207735.1663256263

https://www-tiny-cloud.translate.goog/docs/general-configuration-guide/basic-setup/?_ga=2.83130002.505957963.1663256263-1320207735.1663256263&_x_tr_sl=en&_x_tr_tl=it&_x_tr_hl=it

Come aggiungere font personalizzati su Cassiopeia

Situazione esistente

Il template Cassiopeia fornito con Joomla 4 permette di configurare vari aspetti grafici e funzionalità tra cui l ascelta del carattere che si vuole utilizzarlo come predefinito sul sito.
Per accedere alle opzioni di configurazione di Cassiopeia si deve andare in :
Sistema > Stili Template Sito > "Cassiopeia - Default"

Qui, nella scheda "Avanzate" abbiamo un campo chiamato "Schema Caratteri" che ci permette di selezionare al-volo il carattere desiderato.
Dobbiamo fare una distinzione tra "Caratteri dalla cartella" (local) e "Caratteri dal Web" (web).

"Caratteri dalla cartella" significa che i font sono caricati fisicamente sul proprio server, invece i "Caratteri dal Web" sono i font richiamati da fonti esterne.

Come "Caratteri dalla cartella" abbiamo Roboto, un font molto carino e leggibile e in teoria dovrebbe andar bene nella maggior parte dei siti.
Come "Caratteri dal Web" possiamo scegliere tra Fira Sans e la combinazione di Roboto + Noto Sans.

Passaggio preliminare

Creare una nuova cartella chiamata "fonts" nella root del template Cassiopeia.
Creare un file user.css nella cartella "css" del template (se questo non c'è già).

Caso 1 - Caricamento di un font da fonti esterne
Prendiamo in considerazione come esempio pratico Titillium Web, il font conosciuto e utilizzato soprattutto nei siti web della Pubblica Amministrazione.

• Andare su Google Fonts
• Inserire nella casella di ricerca Titillium per avviare la ricerca;
• Scegliere i stili del font desiderati cliccando su "Select this style";
• Nel riquadro "Use on the web" Selezionare la casella @import
• Copiare il codice presente tra i tag <style> e </style>
• Aprire il file user.css e inserire il codice all'inizio

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600&;;display=swap');

Specificare dove si desidera utilizzare il font, in questo caso vogliamo utilizzarlo dappertutto quindi aggiungiamo in user.css anche:

:root{
--cassiopeia-font-family-body: "Titillium Web", sans-serif;}

Clicca su Salva.
Per utilizzarlo anche nei titoli, Il codice completto dovrebbe essere così:

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600&;;display=swap');
:root { 
 --cassiopeia-font-family-body: "Titillium Web", sans-serif; 
 --cassiopeia-font-family-headings: "Titillium Web", sans-serif; 
 --cassiopeia-font-weight-headings: 600; 
 --cassiopeia-font-weight-normal: 400; 
}

Caso 2 - Caricamento di un font da una cartella locale

Nel secondo caso prendiamo in considerazione di utilizzare un'altro font, tipo "Lato".

• Andare su Google Webfonts Helper (opens in a new tab)
• Inserire nella casella di ricerca Lato e scegliere il font;
• Scegliere i stili del font desiderati;
• Nella casella "Customize folder prefix (optional)" inserire il nome della cartella dove caricare i file. Per questo esempio inserire ../fonts/.
• Copiare il codice e inserirlo nel file user.css:

/* lato-regular - latin */
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: url('../cartella/lato-v20-latin-regular.eot'); /* IE9 Compat Modes */
 src: local(''),
 url('../cartella/lato-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('../cartella/lato-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
 url('../cartella/lato-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
 url('../cartella/lato-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
 url('../cartella/lato-v20-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

• Scarica il font cliccando su "download"
• Scompatta tutti i file scaricati nella cartella "fonts" del template.
• Aggiungere nel file user.css il seguente codice:

:root{
 --cassiopeia-font-family-body: 'Lato', sans-serif;
}

-------------------------------

https://www.tanase.it/come-aggiungere-font-personalizzati-su-cassiopeia

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).

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:

-------------------------------

https://www-tiny-cloud.translate.goog/blog/tinymce-custom-font-family/?_x_tr_sl=en&_x_tr_tl=it&_x_tr_hl=it&_x_tr_pto=sc

Come inserire uno script in Joomla su Cassiopeia

Possono essere dei casi in cui si desidera inserire un codice javascript in Joomla 4.1. Anche se in pratica queste istruzioni sono per Cassiopeia, in teoria si può addattare su qualsiasi altro template abilitato ai Child Template (opens in a new tab). Come si può fare ?

In questa mini-guida spieghero passaggi principali da fare per realizzare questo obiettivo.

Passo 1
Andare in amministrazione di Joomla! > Sistema > Template del Sito > Cassiopeia Dettagli e File.
Clicca su "Create Child Template", inserire il nome desiderato, ad esempio "demoJS" e poi "Create Child Template".

Passo 2
Fai una copia del file index.php del template padre Cassiopeia all'interno del nuovo Child Template demoJS.

Passo 3
Inserisci un campo del tipo textarea all'interno del file templateDetails.xml del Child Template demoJS, chiamato ad esempio myJS.

Passo 4 Aprire il file index.php del Child Template e inserisci in head, dopo la riga 129 circa, il seguente codice:

Passo 5 A questo punto abbiamo creato un nuovo campo nel pannello di amministrazione del Child Template demoJS, campo dove potete inserire il vostro codice javascript, ovviamente senza i tag di apertura .

--------------------------------------------

https://www.tanase.it/come-inserire-uno-script-in-joomla-su-cassiopeia

Introduzione sui Child Templates in Joomla

• Come si può modificare un template Joomla in totale sicurezza e non perdere le modifiche al prossimo aggiornamento?
• Come si fa a creare più override diversi della stessa vista?

Per rispondere a queste domande, in Joomla è stata introdotta una nuova funzionalità chiamata Child Templates.

Child Templates. Questa funzionalità significa che Joomla supporterà i template con la possibilità di creare template figli. In altre parole, un Child Template è un template che eredita le funzionalità e le caratteristiche del template padre.

Un Child Template funziona esattamente come qualsiasi altro template tranne che usa tutto il codice, php, css e javascript, del suo template padre. Al suo livello più elementare contiene solo un singolo file, templateDetails.xml. In questo file esiste un campo che fa riferimento al template padre, tipo: <parent>cassiopeia</parent>. La parte MVC di Joomla è già consapevole di come gestire i Child Templates e funziona in base all'ereditarietà.
Per esempio, se index.php non esiste nel Child Template, allora verrà usato quello del template padre. Questo schema è applicato ai punti di ingresso diretti del template e anche agli override dei file statici.

Ora con un Child Template si può personalizzare un override o un css e mantenere il template padre pulito come il giorno in cui è stato installato. Non c'è limite al numero di Child Templates che si possono creare, quindi ognuno potrebbe avere diversi layout e stili.

Tutti i template possono avere Child Templates ?

No, questa e una caratteristica opzionale, quindi un template per essere abilitato per i Child Templates dovrebbe avere, nel file manifest templateDetails.xml, un nome di campo ereditabile con un valore 1.

<inheritable>1</inheritable>

Un'altra novità, a partire dalla versione di Joomla 4.1, e che le risorse statiche sono memorizzate nella cartella media piuttosto che nella cartella template. Con risorse statiche si intende i file che sono ragiunti dal browser web, i file css e javascript, le immagini, in pratica le cartelle CSS, SCSS, JS e IMAGES. Questo vale per Cassiopeia e per tutti altri template che sono compatibili con Child Templates.

-------------------------------

https://www.tanase.it/introduzione-sui-child-templates-in-joomla