JOOMLA!
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:
- (Obbligatorio) La configurazione del Selettore
- La configurazione del plugin
- La configurazione della barra degli strumenti
- 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 iltableplug-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 .
--------------------------------------------
