TinyMCE: manca la formattazione!?
Programmazione Monday 31 March 2008 alle 18:52
Mi ha contattato Stefano nello scorso post su TinyMCE Guida all’uso, chiedendomi come risolvere il problema della visualizzazione di colori e giustificazioni (come anche la scelta dei font) del testo passato da un form che utilizza questo editor WYSIWYG alla pagina seguente che ne fa il retrieve.
Problema
Per pigrizia ho chiesto allo stesso Stefano di mandarmi il suo script pronto, così da provarlo e capire cosa non andasse. Le due pagine di test ricevute erano:
- pagina con editor di testo ad uso dell’amministratore del sito
- pagina di retrieve (recupero) dei dati inviati per visualizzazione anteprima
Area amministrativa con editor WYSIWYG
<html>
<head>
<title>Prova News</title>
<script language="javascript" type="text/javascript" src="<?php $basedir ?>/script/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "safari,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",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
apply_source_formatting : true
});
</script>
</head>
<body>
<form method="post" action="<?php $basedir ?>/vediNews.php">
<textarea name="content" cols="50" rows="15">Scrivi News.</textarea>
<input type="submit" value="Salva" />
</form>
</body>
</html>Visualizzazione della news inviata
<html>
<head>
<title>Visualizzazione News</title>
</head>
<body>
<?=$_POST['content'] ?>
</body>
</html>Il problema, dopo aver inviato il contenuto dell’editor di testo, riportando la frase del ragazzo che mi ha contattato, è che
[...] viene rispettata solo la formattazione quale grassetto, corsivo, sottolineato, mentre ignorati i cambi di colore, carattere ecc ecc… [...]
Soluzione
Analizzando il codice di output ho notato, stupido che non ci ho pensato prima, a come le variabili passate da un FORM e recuperate attraverso gli operatori $_GET e $_POST di PHP, aggiungono automaticamente slash ( \ ) prima degli apici singoli ( ‘ ) e doppi ( ” ) per evitare di interpretare le stesse all’interno del codice PHP, evitando così problemi ancora maggiori, come la “rottura” di query che crea problemi di sicurezza.
Per risolvere così il “problema”, basta allora utilizzare la funzione PHP stripslashes, che restituisce il risultato privo di slash ( \ ), mostrando così il contenuto del FORM pulito e correttamente interpretabile da tutti i browser.
<?=stripslashes($_POST['testo'])?>
Buon 2012 anche a te carissimo Puffas
Un abbraccio
Honz
31 March 2008 alle 20:53
Problema risolto!!
Non posso che ringraziarti e farti i miei migliori complimenti!
Alla prossima
7 April 2008 alle 16:15
Ciao, scusa la mia ignoranza, ho installato il tinymce su un oscommerce, ora avrei bisogno di fare in modo di creare uno stile di modo da avere sempre formattata allo stesso modo la descrizione dei prodotti (in pratica sul sito, che ha uno sfondo verde, mi servirebbe di impostare di default un carattere, la dimensione e il colore bianco, senza doverlo far fare a mano a chi inserira’…. gia’ è una lotta spiegargli come accedere al pannello….). Ho provato indiversi modi ma senza risultati.
Il sito in questione e’ http://www.mctwist.it
Grazie
7 April 2008 alle 18:17
Ciao Francesco,
non stare a impazzire per questo, ma usa una soluzione più semplice.
Quando fai il retrive dei dati nelle pagine dei prodotti, fai in modo da caricare tutti i dati all’interno di un unico DIV, e utilizza poi i fogli di stile CSS per personalizzare l’aspetto delle informazioni che carichi. Eviti così di sporcare il codice HTML con tag che risulterebbero inutili.
Se invece hai anche bisogno di mostrare diversamente l’aspetto dell’area TinyMCE, modifica l’apposito CSS come avevo spiegato a Pino.
Fammi sapere se hai altri problemi!
8 April 2008 alle 0:44
Innanzitutto grazie per la pronta risposta, ti andrebbe di spiegarmi in che modo posso farlo? grazie
8 April 2008 alle 1:00
Sei un grande, sono diventato stupido per 5 giorni…. e con una soluzione semplice e pulita come la tua in 5 minuti ho risolto. Grazie davvero
8 May 2008 alle 23:13
Ciao..
Scusami ma sto impazzendo..
Devo fare un sito per un esame all’uni..ma pochissima dimestichezza con php e javascript..
Ti spiego il mio problema..
Ho un form con un textarea fatta con questo programma, che inserisce i valori all’interno di un database. Il problema è che nella pagina php di inserimento, mi restituisce errore ogni qual volta incontra un apice (‘) usato in realtà come apostropo..
Inoltre anche quando non uso apici e inserisco correttamente l’articolo, quando interrogo il db con un echo, mi restituisce il testo formattato correttamente, ma le lettere accentate e gli apici mi vengono visualizzati con un punto interrogativo (?)..
Mi hanno detto di usare la funzione htmlentities per avere gli accenti..In effetti fnziona, ma mi annulla completamente la formattazione!!
Hai qualche idea..grazie mille!
Se hai bisogno ti posto il codice..
9 May 2008 alle 1:18
Ciao Andrea! Il mio suggerimento per te è semplicemente quello di impostare il codepage della pagina in UTF-8. Dovresti così riuscire a vedere correttamente tutti i caratteri accentati anche senza l’utilizzo della funzione htmlentities.
Per quanto riguarda invece il fastidioso problema degli apici, il mio suggerimento è quello di provare ad utilizzare la funzione addslashes, funzione che aggiunge uno slash prima degli apici, dei doppi apici (virgolette) ed altri caratteri che all’interno di un database potrebbero creare problemi.
Fammi sapere,
Simone…
9 May 2008 alle 14:42
Non mi funziona in alcun modo..
La pagina e la richiesta al db è settata in utf-8, ma devo in ogni caso aggiungere la funzione htmlentities altrimenti non va..
Sono arrivato ad un punto morto:
Allora con la funzione htmlentities riconosco i tag del form, poi con la funzione str_replace sostituisco agli ‘ il valore del tag html “&prime”..
Perfetto il database non mi da’ errori di query, ma essendo che la variabile è in get una volta passata all’altra pagina non mi da alcuna corrispondenza perchè nel url mi modifica il carattere con %26%238242%3B!!!
Aiuto…
26 May 2008 alle 14:57
Buongiorno, son capitato qui seguendo Google e io avrei il problema opposto. Ovvero desidererei che, se faccio copia/incolla di un testo magari da Word, al momento dell’incollaggio (scusate il gergo) questo risulti neutro, SENZA formattazione, in modo da poterlo modificare poi come si vuole. E’ possibile?
26 May 2008 alle 15:20
Ciao Roberto,
puoi usare la funzione RemoveFormat, che ha proprio lo scopo di eliminare comletamente la formattazione del testo incollato. Ora non so dirti come dare la possibilità di richiamare direttamente la funzione di removeformat on paste, anche se penso sia possibile in modi abbastanza semplici.
Fammi sapere.
15 July 2008 alle 9:29
ciao…volevo chiederti se m puoi dare una mano con un problema di formatazzione di cc per my space…in pratica su firefox si vede alla perfezione, ma su safari e internet explorer, si accavallano gli object e spariscono dei table…ti ringrazio del aiuto.
15 July 2008 alle 10:14
Detto così, perdonami, ma non riesco a darti una mano…
Prova a spiegare meglio il tuo problema.
1 September 2008 alle 17:58
Ciao simone volevo chiederti essendo inesperto se c’è un istruzione java per formattare un testo preso in input da una textarea e rimetterlo in outup in un altra textarea in grassetto senza usare tag dell’html (<b>)
1 September 2008 alle 18:39
Ciao Fabio,
non pensi sia un po’ difficile? Come è possibile fare un grassetto senza HTML?
2 September 2008 alle 15:20
non saprei appunto cercavo maggiori informazioni, ti spiego, ho un esame all’univ che mi richiede di costruire ‘una finestra principale in cui sarà possibile per l’utente scrivere del testo e delle finestre secondarie che:
- Una finestra che replichi il testo inserito nella finestra principale formattandolo in grassetto.
- Una finestra che replichi il testo inserito nella finestra principale modifichi il proprio colore di sfondo al colore selezionato nella finestra principale.
ora ho facilmente costruito 2 JTextField per prelevare l’imput e riprodurre l’output il problema ora è nel primo caso la formattazione in grassetto e nel secondo il cambio dello sfondo…Tu hai qualche idea??
2 September 2008 alle 16:36
Scusami, ma con che linguaggio stai sviluppando il programma? TinyMCE è per il web, non so quanto sia in grado di lavorare su altri linguaggi di programmazione.
2 September 2008 alle 17:01
OOps…scusa…Il programma lo sto sviluppando solo in java …Ho letto male all’inizio credevo si trattasse solo di problemi di formattazione e non ho letto si trattasse di TinyMCE…scusa ancora se ti ho fatto perdere tempo
15 October 2008 alle 15:55
ciao Simone,
innanzitutto grazie per lo script , io sto usando fckeditor ed avevo lo stesso problema. Ora però dovrei salvare realmente le modifiche che faccio o su db o su un txt, ma non so proprio da dove cominciare, c’è una guida a tal proposito? Potresti aiutarmi?
Valerio
21 October 2008 alle 0:06
Ciao Valerio,
mandami una email a jlgsomvc2 (at) virgilio . it, ti mando uno script fatto con uno dei miei “lettori”.
2 February 2009 alle 11:16
ho utilzzato il tinymce per formattare le textarea nella pagina di amministrazione delle news del mio sito. Sorge un problema: vorrei che il testo salvato nel database fosse testo semplice, ossia che non fosse compreso nel tag . Questo perchè mi crea problemi di visualizzazione in un swf che riporta le scrolling news e anche nella pagina di visualizzazione delle news dove, in pratica si traduce con un doppio invio.. C’è un metodo per risolvere? Ho cercato qualcosa , ma non mi ci oriento ancora molto bene… Insomma mi servirebbe che funzioni un po’ come questa textarea…
inoltre, dove posso trovare un elenco semplice per abilitare i pulsanti? Grazie, complimenti per il servizio e scusatemi se l’argomento dovesse essere stato trattato da qualche altra parte, ma non sono riuscito a trovare nulla
5 July 2011 alle 10:03
Ciao ragazzi, qualcuno sa per caso come eliminare la formattazione con un copia / incolla da word??
Ho trovato in giro questo codice ma non capisco in che file va inserito.
paste_text_sticky: true,
setup: function (ed) {
ed.onInit.add(function (ed) {
ed.pasteAsPlainText = true;
});
}
5 July 2011 alle 10:54
dice di metterlo nella configurazione plug-in di tinyMCE…ma non riesco a capire quale possa essere il file giusto….