Personalizzare il TinyMCE
Di Patrick // 20, gennaio 2010 // Pubblicato in HTML/HTML5, Risorse // Letto 1119 CommentaQuanti di noi utilizzano un editor WYSWYG per scrivere Post in un Blog o magari nel proprio CMS? Noi dello studio Beat Fly, da parecchio tempo ci affidiamo al prodotto TinyMCE oggi giunto alla versione 3.27 e sia le performance che il risultato sono davvero soddisfacenti.
Utilizzando questo strumento di scrittura possiamo aggiungere TAg HTML alla pagina, inserire immagini, video e molto altro proprio come se utilizzassimo un IDE di sviluppo. In questo Post vedremo come sia possibile personalizzare l’editor TinyMCE al fine di inserire solo alcune funzionalità desiderate, scavalcando così le impostazioni di default chiamate “simple“, “office” oppure “advanced” stabilite.
Mi preme ricordare come in questa nuova release sia stato inserito uno specifico Plugin per jQuery che velocizza il caricamento dell’editor eliminando alcune funzionalità ricorsive tipiche dell’importazione standard dello stesso prodotto. La personalizzazione che oggi vedremo è stata ottimamente creata dal mio amico Rempox ed è stato preparato un file .ZIP pronto al Download. Una volta scompattato il pacchetto, dovrete munirvi del tinymce e importarlo nella cartella del tutorial.
Tengo a precisare che le nostre personalizzazione non sono esaustive delle molteplici esigenze possibili, ma coprono sicuramente la maggior parte delle situazioni reali, magari gestite da un Cliente che ha poca dimestichezza con questo tipo di strumenti.
Il Tutorial ha inoltre lo scopo principale di evidenziare un’annoso problema visualizzando l’editor con Internet Explorer (all version), dove quando si personalizza lo strumento dichiarando via js i componenti ci si deve ricordare di eliminare l’ultima virgola per l’ultimo elemento dichiarato. Per molti di noi il consiglio è magari scontato, ma se leggete bene la documentazione riportata proprio nel sito proprietario del tinymce vedrete come sia stata omessa questa particolarità; sicuramente si tratta di un refuso, ma vi garantisco che la rete e i forum sono pieni di persone che cercano la soluzione a questo problema!
Il mio collega Rempox ha preparato tre Textarea con differenti personalizzazioni, elencando per ognuna le peculiarità, una attenta descrizione e il codice da utilizzare per ottenere il risultato.
Configurazione semplice
1 2 3 4 5 6 7 8 9 10 | tinyMCE.init({ mode : "textareas", theme : "advanced", editor_selector : "SIMPLE", theme_advanced_buttons1 : "undo, redo, separator, bold, italic, underline, strikethrough, separator, link, unlink, separator", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "bottom", theme_advanced_toolbar_align : "left" }); |
Configurazione generale
1 2 3 4 5 6 7 8 9 10 | tinyMCE.init({ mode : "textareas", theme : "advanced", editor_selector : "GENERAL", theme_advanced_buttons1 : "cut, copy, paste, separator,undo,redo,separator,bold,italic,underline,strikethrough,separator,link,unlink,separator", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "bottom", theme_advanced_toolbar_align : "left" }); |
Configurazione avanzata
1 2 3 4 5 6 7 8 9 10 11 12 13 | tinyMCE.init({ mode : "textareas", theme : "advanced", editor_selector : "ADVANCED", plugins : "safari, spellchecker, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template, imagemanager, filemanager", theme_advanced_buttons1 : "cut, copy, paste, pastetext,pasteword,separator,search, replace,,separator,undo,redo,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright, justifyfull,separator,outdent,indent,hr,separator,bullist,numlist,separator,link,unlink", theme_advanced_buttons2 : "charmap,image,media,codespellchecker", theme_advanced_buttons3 : "cleanup", theme_advanced_toolbar_location : "bottom", theme_advanced_toolbar_align : "left", spellchecker_languages : "English=en,+Italiano=it", apply_source_formatting : true }); |
2, febbraio 2010 alle 13:29
grazie a voi ho risolto il problema dell’editor su explorer; la cosa che non capisco è come sulla loro documentazione ufficiale non abbiano ancora tolto l’ultima virgola; incredibile. Grazie!!