Inserire un editor di testo.

manuelht

Inserire un editor di testo.

Discussione splittata da quì.

Più che altro mi sarebbe stato utile per la formattazione del testo, che diventava più veloce, volendo posso crearmene anchio una sarebbe meno funzionale.

Se per esempio volessi fare in modo che selezionando una parola e cliccando su un bottone per renderla grassetto mi trasformasse la "parola" in "<strong>parola</strong>" devo agire con javascript vero?
Qualcuno sa come potrei fare?

samyorn

Ciao ManuelHT, ho splittato la richiesta dato che stavamo sforando dal thread originario dell'altra discussione, così possiamo concentrarti su quest'altra richiesta nella sezione più idonea.

Per quanto concerne il tuo quesito potresti utilizzare uno degli editor già pronti all'uso come tinymce. Carichi lo script in una cartella e poi, nella pagina dove hai la textarea, lo richiami ed è fatto.

P.S. adesso ho compreso cosa intendevi per pannello di controllo.

manuelht

Perfetto grazie mille...era proprio quello che intendevo, sapevo che c'erano delle lettere strane sulla tipologia di editor (WYSIWYG) ma non mi ricordavo quali erano e mi sono espresso male nello specificare quello che cercavo

Comunque grazie ancora per l'aiuto, lo installo subito e faccio delle prove per vedere se va bene.

samyorn

Se hai dubbi, siam quì.

blackwidow30

[.....]

Interesserebbe anche a me capire come integrare nel mio sito tinymce o un editor simile.
Ma è possibile farlo anche se il mio sito è scritto interamente in xhtml? E come si fa a richiamarlo?

samyorn

Ciao blackwidow30.

Innanzitutto ti scarichi lo script da quì tinymce.moxiecode.com/download.php.

Scompatti lo zip e carichi la cartella principale tinymce nella root del sito.

Nella pagina dove dovrai richiamare lo script, ovvero dove hai la textarea, richiamerai prima lo script principale:
[HTML]<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>[/HTML]
E subito a seguire l'inizializzazione dell'editor con le sue impostazioni.
Per la versione base (simple) ti basta mettere a seguire queste poche righe di codice:
[HTML]<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple",
language : 'it'
});
</script>[/HTML]
Per la versione più avanzata e completa (advanced) invece:
[HTML]<script language="javascript" type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
skin : "o2k7",
skin_variant : "silver",
language : 'it',
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 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,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
content_css : "css/example.css",

// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",

// Replace values for the template plugin
template_replace_values : {
    username : "Some User",
    staffid : "991234"
}

});
</script>[/HTML]
Questo è un esempio di configurazione che utilizzo io.

Puoi benissimo spostare, aggiungere o togliere pulsanti, manipolando le righe theme_advanced_buttonsx. Ogni chiamata è un pulsante "save,newdocument,|,..." sono in ordine il pulsante salva, il pulsante nuovo documento e un separatore.

Spero che ti sia utile.

blackwidow30

Grazie Samyorn!

Ma il testo che viene scritto, una volta cliccato su submit, in che pagina e con che grafica viene visualizzato? Non ho ben capito...

samyorn

Devi trattarlo come un normalissimo form con textarea ed agire di conseguenza, dato che l'editor si "appiccicherà" sulla textarea presente nel form della pagina in cui lo caricherai.

Edit: ovviamente il testo inviato sarà già formattato come visualizzato nell'editor stesso.

rcayla

Salve,
innanzitutto grazie, perchè questo post mi è stato molto utile

Adesso però mi sorge un problema, appena apro la pagina la textarea si vede senza editor ma premendo f5 l'editor appare, come mai?

samyorn

Ciao RCayla.

Dove hai inserito il richiamo allo script?

Io per "pulizia" ho messo lo script su un file .js esterno e richiamo quello, invece di mettere lo script di impostazione nella pagina, e non mi ha mai dato problemi.

rcayla

Prima era nella pagina il codice, adesso l'ho messo in una pagina a se e poi la richiamo, ma niente, si visualizza solo dopo aver premuto f5..

Inoltre su IE non si vede proprio nemmeno con f5

samyorn

Io l'ho inserito nell'head così:
[html]<head>
.........

</head>[/html]

rcayla

io ho messo così:
[html]<head>
......
<script src="tiny_mce/tiny_mce.js" language="javascript" type="text/javascript"></script>
<script src="tiny_mce/tiny_call.js" language="javascript" type="text/javascript"></script>
</head>[/html]
La cosa strana è che adesso, per esempio, non visitavo la pagina da un po', e appena ci sono tornato l'editor si è visto subito.. Poi ho cambiato pagina, sono tornato a quella dell'editor e per vederlo ho dovuto premere f5..

samyorn

Proverei a mettere un pragma no-cache nella pagina intanto. Facci sapere.

rcayla

Sono riuscito a sistemare cancellando la cache del browser, forse si era impallato, il fatto di IE è che stavo visualizzando in modalità compatibilità, perciò con IE 8 funziona, con IE 7 no, grazie ancora!

samyorn