Ciao Mich_ forse in effetti sono stato poco descrittivo prima e quindi ora ti spiego ....
Allora so facendo un editor per inserimento news per una agenzia di stampa.
Quindi si presuppone che non tutti conoscano il linguaggio html giusto?? bene a me serve anche che il testo venga formattato anche con una certa validazione di codice ed anche in base alle mie preferenze ovviamente!! (se si può sia chiaro)....
Una volta che l'utente invia il suo articolo, esso deve essere formattato secondo il mio modo di vedere e quindi......
IO per fare l'editor mi sono basato sull'articolo che sta su html-pro per costruire appunto un editor in javascript che troviamo qui:
http://pro.html.it/articoli/id_357/i...pag_1/pag.html
ho modificato un pochino la parte javascript includendola in un file esterno, e seppure un pochino sporco te lo posto:
[/code]
var bHtmlMode = false;
var str_iFrameDoc = (document.all)? "document.frames(\"Composition\").document\;": "document.getElementById(\"Composition\").contentD ocument\;";
onload = initialize;
function initialize(){
iFrameDoc = eval(str_iFrameDoc);
iFrameDoc.open();
iFrameDoc.write("<html><body monospace style='color:#000000;font-size:12px;font-family:MS Sans Serif;'></body></html>");
iFrameDoc.close();
iFrameDoc.designMode = "On";
document.getElementById("switchMode").checked = false;
if(!document.all){
document.getElementById("taglia").style.visibility = "hidden";
document.getElementById("copia").style.visibility = "hidden";
document.getElementById("incolla").style.visibilit y = "hidden";
}
}
function validateMode(){
if(! bHtmlMode)
return true;
alert("Deselezionare \" Visualizza HTML\" per utilizzare le barre degli strumenti");
setFocus();
return false;
}
function setFocus(){
if(document.all){
document.frames("Composition").focus();}
else
{document.getElementById('Composition').contentWin dow.focus();}
return;
}
function formatC(what,opt){
if(!validateMode())
return;
iFrameDoc = eval(str_iFrameDoc);
iFrameDoc.execCommand(what,false,opt);
setFocus();
}
function save_as(){
iFrameDoc = eval(str_iFrameDoc);
riquadro = iFrameDoc.body;
codice = (bHtmlMode)?riquadro.innerText:riquadro.innerHTML;
codice = codice.replace(/>/gi,"\;\">");
codice = codice.replace(/<p\;\">/gi,"");
codice = codice.replace(/<\/p\;\">/gi,"");
codice = codice.replace(/<strong\;\">/gi,"[b]");
codice = codice.replace(/<em\;\">/gi,"[i]");
codice = codice.replace(/<u\;\">/gi,"<u>");
codice = codice.replace(/<\/strong\;\">/gi,"<\/strong>");
codice = codice.replace(/<\/em\;\">/gi,"<\/em>");
codice = codice.replace(/<\/u\;\">/gi,"<\/u>");
codice = codice.replace(/[list=1]/gi,"[list=1]");
codice = codice.replace(/<\/OL\;\">/gi,"<\/ol>");
codice = codice.replace(/<UL\;\">/gi,"<ul>");
codice = codice.replace(/<\/UL\;\">/gi,"<\/ul>");
codice = codice.replace(/<LI\;\">/gi,"[*]");
codice = codice.replace(/<\/LI\;\">/gi,"<\/li>");
codice = codice.replace(/<font /gi,"<span ");
codice = codice.replace(/<\/font\;\">/gi,"<\/span>");
//reimpostazioni del codice per il tag -font-
//tipo: font-family
codice = codice.replace(/face=Arial/gi,"style=\'font-family\:Arial\;\'");
codice = codice.replace(/face=\"Comic Sans Ms\"/gi,"style=\'font-family\:\"Comic Sans Ms\"\;\'");
codice = codice.replace(/face=\"Courier New\"/gi,"style=\'font-family\:\"Courier New\"\;\'");
codice = codice.replace(/face=\"Times New Roman\"/gi,"style=\'font-family\:\"Times New Roman\"\;\'");
codice = codice.replace(/face=Tahoma/gi,"style=\'font-family\:Tahoma\;\'");
codice = codice.replace(/face=Verdana/gi,"style=\'font-family\:Verdana\;\'");
//tipo: font-size
codice = codice.replace(/size=1/gi,"style=\'font-size\:10px\;\'");
codice = codice.replace(/size=2/gi,"style=\'font-size\:13px\;\'");
codice = codice.replace(/size=3/gi,"style=\'font-size\:16px\;\'");
codice = codice.replace(/size=4/gi,"style=\'font-size\:18px\;\'");
codice = codice.replace(/size=5/gi,"style=\'font-size\:24px\;\'");
codice = codice.replace(/size=6/gi,"style=\'font-size\:32px\;\'");
//tipo: font-color-text
codice = codice.replace(/color=#000000/gi,"style=\'color\:#000000\;\'");
codice = codice.replace(/color=#FFFFFF/gi,"style=\'color\:#FFFFFF\;\'");
codice = codice.replace(/color=#009900/gi,"style=\'color\:#009900\;\'");
codice = codice.replace(/color=#FFFF00/gi,"style=\'color\:#FFFF00\;\'");
codice = codice.replace(/color=#FF6600/gi,"style=\'color\:#FF6600\;\'");
codice = codice.replace(/color=#FF0000/gi,"style=\'color\:#FF0000\;\'");
codice = codice.replace(/color=#0000FF/gi,"style=\'color\:#0000FF\;\'");
codice = codice.replace(/color=#FFFF00/gi,"style=\'color\:#FFFF00\;\'");
codice = codice.replace(/color=#CCCCCC/gi,"style=\'color\:#CCCCCC\;\'");
//tipo: font-backgroundcolor-text
codice = codice.replace(/style=\"BACKGROUND-COLOR\: #000000\"/gi,"style=\'background-color\:#000000\;\'");
codice = codice.replace(/style=\"BACKGROUND-COLOR\: #FFFFFF\"/gi,"style=\'background-color\:#FFFFFF\;\'");
codice = codice.replace(/style=\"BACKGROUND-COLOR\: #009900\"/gi,"style=\'background-color\:#009900\;\'");
codice = codice.replace(/style=\"BACKGROUND-COLOR\: #FFFF00\"/gi,"style=\'background-color\:#FFFF00\;\'");
codice = codice.replace(/style=\"BACKGROUND-COLOR\: #FF6600\"/gi,"style=\'background-color\:#FF6600\;\'");
codice = codice.replace(/style=\"BACKGROUND-COLOR\: #FF0000\"/gi,"style=\'background-color\:#FF0000\;\'");
codice = codice.replace(/style=\"BACKGROUND-COLOR\: #0000FF\"/gi,"style=\'background-color\:#0000FF\;\'");
codice = codice.replace(/style=\"BACKGROUND-COLOR\: #FFFF00\"/gi,"style=\'background-color\:#FFFF00\;\'");
codice = codice.replace(/style=\"BACKGROUND-COLOR\: #CCCCCC\"/gi,"style=\'background-color\:#CCCCCC\;\'");
//eliminazione del codice ripetitivo : [' style='] che si è creato
codice = codice.replace(/\' style=\'/gi," ");
codice = codice.replace(/<P dir=ltr style=\"MARGIN-RIGHT\: 0px\"\;\">/gi,"");
codice = codice.replace(/<BLOCKQUOTE dir=ltr style=\"MARGIN-RIGHT\: 0px\"\;\">/gi,"<blockquote dir=\'ltr\' style=\'margin-right\:0px\'>");
codice = codice.replace(/<\/BLOCKQUOTE\;\">/gi,"<\/blockquote>");
codice = codice.replace(/<P align=left\;\">/gi,"");
codice = codice.replace(/<P align=center\;\">/gi,"<div >");
codice = codice.replace(/<P align=right\;\">/gi,"<div >");
codice = codice.replace(/\;\">/gi,">");
//codice = codice.replace(/\">/gi,">");
//codice = codice.replace(//gi,"");
document.editor_newsital.save_text_html.value= codice;
}
function setMode(newMode){
var testo;
bHtmlMode = newMode;
iFrameDoc = eval(str_iFrameDoc);
riquadro = iFrameDoc.body;
if(document.all){
if(bHtmlMode){
testo = riquadro.innerHTML;
riquadro.innerText = testo;}
else {
testo = riquadro.innerText;
riquadro.innerHTML = testo;}
}
else
if(document.getElementById && document.createTextNode){
if(bHtmlMode){
testo = document.createTextNode(riquadro.innerHTML);
riquadro.innerHTML = "";
riquadro.appendChild(testo);}
else {
testo = document.createRange()
testo.selectNodeContents(riquadro);
riquadro.innerHTML = testo.toString();}
}
setFocus();
}[/code]
come vedi mi mancherebbe solo da sostituire quella stringa che proprio non so come farlo!!!
in ogni caso ti ho inviato anche un privato per segnalarti un link che attualmente non posso rendere pubblico!! Chiedo scusa agli altri forumisti!!
Poi mi sono sorte anche altre domande e cioè:
ho visto molti editor che ad esempio se posizionano il cursore su una parte di testo già formattata il pulsante o i pulsanti ad esso relativo cambiano come se fossero selezionati (vedi word e simili)
ed infine molti utilizzano o consentono di far utilizzare soltanto un tipo di stile già preformattato .....??!!
mi potresti chiarire questi due argomenti anche se non ti dispiace???