Editor de texto en javascript
Publicado por Hernán (3 intervenciones) el 15/12/2009 17:47:45
Hola, consegui un codigo de la web para poder realizar un editor de texto en un textbox de php. Lo que quiero hacer es que el usuario pueda darle forma a sus texto y luego enviarlo a la base de datos.
Estuve tocando un poco el código y funciona bien con la base de datos. Sólo que cuando el usuario escribe directamente sin elegir ninguna opcion (o sea negrita, subrayado, etc) me deja dos lineas entre cada renglón o sea 2 </br> del php. No conozco mucho del código java y necesitaría ver si me ayudan a solucionar este pequeño inconveniente. Aquí les paso el codigo:
if (o(idTa).nodeName=="TEXTAREA"){
o(idTa).style.color='#060';
o(idTa).style.zIndex='2';
} else w('<input type="hidden" id="wzhid_'+idTa+'" name="'+idTa+'" />');
h(idTa);
var frm=o(idTa).parentNode;
while (frm.nodeName != 'FORM') frm=frm.parentNode;//if not form, keep trying
addEvt(frm,"submit",syncTextarea);
w('<style type="text/css">button {vertical-align:middle;padding:0;margin:1px 0} button img{vertical-align:middle;margin:-1px} select{vertical-align:middle;margin:1px} .wzCtrl {background:ButtonFace; border:2px outset ButtonShadow; padding:5px;} #sourceTa{color:#060;font-family:mono;} #whizzyWig {border-width:1px}</style>');
var dsels='formatblock';
if (!navigator.userAgent.match('AppleWebKit')){dsels+=' fontname fontsize'} //Font u/s on Chrome/Safari
var dbuts=' bold italic underline | left center right justify | number bullet indent outdent | undo redo | color hilite rule | link image table | clean html spellcheck ';
btns=dbuts.split(' ');
for (var i=0, pos=0; i < btns.length; i++) {
if(btns[i] && btns[i]!='|') {btn[btns[i]]=btn._w*pos++};
}
var tbuts=' tstart add_row_above add_row_below delete_row | add_column_before add_column_after delete_column | table_in_cell';
var t_end=''; //table controls end, if needed
controls=controls ? controls.toLowerCase() : "all";
if (controls == "all") controls=dsels +' newline '+ buts + dbuts + tbuts;
else controls += tbuts;
w('<div style="width:'+taWidth+'" onmouseover="c(\''+idTa+'\')"><div id="CONTROLS'+idTa+'" class="wzCtrl" unselectable="on">');
gizmos=controls.split(' ');
for (var i=0; i < gizmos.length; i++) {
if (gizmos[i]){ //make buttons and selects for toolbar, in order requested
if (gizmos[i] == 'tstart') {
w('<div id="TABLE_CONTROLS'+idTa+'" style="display:none" unselectable="on">');
t_end='</div>';
}
else if (gizmos[i] == '|') w(' <big style="padding-bottom:2em">|</big> ');
else if (gizmos[i] == 'newline') w('<br>');
else if ((dsels+sels).indexOf(gizmos[i]) != -1) makeSelect(gizmos[i])
else if ((dbuts+buts+tbuts).indexOf(gizmos[i]) != -1) makeButton(gizmos[i]);
}
}
w(t_end) //table controls end
w('<a href="http://www.unverse.net" style="color:buttonface" title="'+whizzywig_version+'">.</a> ');
w(fGo('LINK'));
if (linkBrowse) w('<input type="button" onclick=doWin("'+linkBrowse+'"); value="'+t("Browse")+'"> ');
w(t('Link address (URL)')+': <input type="text" id="lf_url'+idTa+'" size="60"><br><input type="button" value="http://" onclick="o(\'lf_url'+idTa+'\').value=\'http://\'+o(\'lf_url'+idTa+'\').value"> <input type="button" value="mailto:" onclick="o(\'lf_url'+idTa+'\').value=\'mailto:\'+o(\'lf_url'+idTa+'\').value"><input type="checkbox" id="lf_new'+idTa+'">'+t("Open link in new window")+fNo(t("OK"),"insertLink()"));//LINK_FORM end
w(fGo('IMAGE'));
if (imageBrowse) w('<input type="button" onclick=doWin("'+imageBrowse+'"); value="'+t("Browse")+'"> ');
w(t('Image address (URL)')+': <input type="text" id="if_url'+idTa+'" size="50"> <label title='+t("to display if image unavailable")+'><br>'+t("Alternate text")+':<input id="if_alt'+idTa+'" type="text" size="50"></label><br>'+t("Align")+':<select id="if_side'+idTa+'"><option value="none">_♥_ '+t("normal")+'</option><option value="left">♥= '+t("left")+'</option><option value="right">=♥ '+t("right")+'</option></select> '+t("Border")+':<input type="text" id="if_border'+idTa+'" size="20" value="0" title="'+t("number or CSS e.g. 3px maroon outset")+'"> '+t("Margin")+':<input type="text" id="if_margin'+idTa+'" size="20" value="0" title="'+t("number or CSS e.g. 5px 1em")+'">'+fNo(t("Insert Image"),"insertImage()"));//IMAGE_FORM end
w(fGo('TABLE')+t("Rows")+':<input type="text" id="tf_rows'+idTa+'" size="2" value="3"> <select id="tf_head'+idTa+'"><option value="0">'+t("No header row")+'</option><option value="1">'+t("Include header row")+'</option></select> '+t("Columns")+':<input type="text" id="tf_cols'+idTa+'" size="2" value="3"> '+t("Border width")+':<input type="text" id="tf_border'+idTa+'" size="2" value="1"> '+fNo(t("Insert Table"),"makeTable()"));//TABLE_FORM end
function tagButs() {
w('<input type="button" onclick=\'doTag("<h1>")\' value="H1" title="<H1>"><input type="button" onclick=\'doTag("<h2>")\' value="H2" title="<H2>"><input type="button" onclick=\'doTag("<h3>")\' value="H3" title="<H3>"><input type="button" onclick=\'doTag("<h4>")\' value="H4" title="<H4>"><input type="button" onclick=\'doTag("<p>")\' value="P" title="<P>"><input type="button" onclick=\'doTag("<strong>")\' value="S" title="<STRONG>" style="font-weight:bold"><input type="button" onclick=\'doTag("<em>")\' value="E" title="<EM>" style="font-style:italic;"><input type="button" onclick=\'doTag("<li>")\' value="•—" title="<LI>"><input type="button" onclick=\'doTag("<a>")\' value="@" title="<A HREF= >"><input type="button" onclick=\'doTag("<img>")\' value="[♥]" title="<IMG SRC= >"><input type="button" onclick=\'doTag("<br />")\' value="←" title="<BR />">');
}
ih=d.body.innerHTML;
ih=ih.replace(/(<\/?)FONT([^>]*)/gi,"$1span$2")
.replace(/(<\/?)[Bb](\s+[^>]*)?>/g, "$1strong$2>")
.replace(/(<\/?)[Ii](\s+[^>]*)?>/g, "$1em$2>")
.replace(/<\/?(COL|XML|ST1|SHAPE|V:|O:|F:|F |PATH|LOCK|IMAGEDATA|STROKE|FORMULAS)[^>]*>/gi, "")
.replace(/\bCLASS="?(MSOw*|Apple-style-span)"?/gi,"")
.replace(/<[^>]+=[^>]+>/g,qa) //quote all atts
.replace(/[–]/g,'-') //long –
.replace(/[‘’]/g, "'") //single smartquotes ‘’
.replace(/[“”]/g, '"') //double smartquotes “”
.replace(/<(TABLE|TD|TH|COL)(.*)(WIDTH|HEIGHT)=["'0-9A-Z]*/gi, "<$1$2") //no fixed size tables (%OK) [^A-Za-z>]
.replace(/<([^>]+)>\s*<\/\1>/gi, "") //empty tag
.replace(/>(<\/?[C-Z])/gi,">\n$1") //newline adjacent tags
.replace(/(<BR ?\/?>)([^\r\n])/gi,"$1\n$2") //newline on BR
.replace(/([^\n])<(P|DIV|TABLE|FORM)/gi,"$1\n\n<$2") //add white space
.replace(/\n<(LI|OPTION|TR|INPUT)/gi,"\n <$1") //indent..
.replace(/\n<(TD|TH)/gi,"\n <$1") //..more
.replace(location.href+'#','#') //IE anchor bug
.replace(/<(IMG|INPUT|BR|HR|LINK|META)([^>]*)>/gi,"<$1$2 />") //self-close tags
.replace(/(<\/?[A-Z]*)/g,lc) //lowercase tags...
.replace(/style="[^"]*"/gi,sa) //and style atts
return ih;
}
if (cmd) {
makeSo(cmd, prm);
e.preventDefault(); // stop the event bubble
e.stopPropagation();
}
}
function doTag(html) { // insert HTML into text area
var url;
if (!html) html=prompt("Enter some HTML or text to insert:", "");
o(idTa).focus();
if (html == '<a>') {
url=prompt("Link address:","http://");
html='<a href="'+url+'">';
}
if (html == '<img>') {
url=prompt("Address of image:","http://");
var alt=prompt("Description of image");
html ='<img src="'+url+'" alt="'+alt+'">';
}
var close='';
if (html.indexOf('<') == 0 && html.indexOf('br') != 1 && html.indexOf('img') != 1)
close=html.replace(/<([a-z0-6]+).*/,"<\/$1>");
if (html != '<strong>' && html != '<em>') close += '\n';
if (document.selection) {
sel=document.selection.createRange();
sel.text=html+sel.text+close;
} else {
before=o(idTa).value.slice(0,o(idTa).selectionStart);
sel=o(idTa).value.slice(o(idTa).selectionStart,o(idTa).selectionEnd);
after=o(idTa).value.slice(o(idTa).selectionEnd);
o(idTa).value =before+html+sel+close+after;
}
o(idTa).focus();
}
function insHTML(html) { //insert HTML at current selection
if (!html) html=prompt(t("Enter some HTML or text to insert:"), "");
if (html.indexOf('js:') == 0) {
try{eval(html.replace(/^js:/,''))} catch(e){}; return;
}
try {if (sel.type && sel.type!="Text") sel=""; xC("inserthtml",html+sel);}
catch (e) {if (document.selection) {
if (papa && papa.nodeName == 'IMG') {papa.outerHTML=html;}
else if(rng) {rng.select(); rng.pasteHTML(html+rng.htmlText);}
} }
whereAmI();
}
Estuve tocando un poco el código y funciona bien con la base de datos. Sólo que cuando el usuario escribe directamente sin elegir ninguna opcion (o sea negrita, subrayado, etc) me deja dos lineas entre cada renglón o sea 2 </br> del php. No conozco mucho del código java y necesitaría ver si me ayudan a solucionar este pequeño inconveniente. Aquí les paso el codigo:
if (o(idTa).nodeName=="TEXTAREA"){
o(idTa).style.color='#060';
o(idTa).style.zIndex='2';
} else w('<input type="hidden" id="wzhid_'+idTa+'" name="'+idTa+'" />');
h(idTa);
var frm=o(idTa).parentNode;
while (frm.nodeName != 'FORM') frm=frm.parentNode;//if not form, keep trying
addEvt(frm,"submit",syncTextarea);
w('<style type="text/css">button {vertical-align:middle;padding:0;margin:1px 0} button img{vertical-align:middle;margin:-1px} select{vertical-align:middle;margin:1px} .wzCtrl {background:ButtonFace; border:2px outset ButtonShadow; padding:5px;} #sourceTa{color:#060;font-family:mono;} #whizzyWig {border-width:1px}</style>');
var dsels='formatblock';
if (!navigator.userAgent.match('AppleWebKit')){dsels+=' fontname fontsize'} //Font u/s on Chrome/Safari
var dbuts=' bold italic underline | left center right justify | number bullet indent outdent | undo redo | color hilite rule | link image table | clean html spellcheck ';
btns=dbuts.split(' ');
for (var i=0, pos=0; i < btns.length; i++) {
if(btns[i] && btns[i]!='|') {btn[btns[i]]=btn._w*pos++};
}
var tbuts=' tstart add_row_above add_row_below delete_row | add_column_before add_column_after delete_column | table_in_cell';
var t_end=''; //table controls end, if needed
controls=controls ? controls.toLowerCase() : "all";
if (controls == "all") controls=dsels +' newline '+ buts + dbuts + tbuts;
else controls += tbuts;
w('<div style="width:'+taWidth+'" onmouseover="c(\''+idTa+'\')"><div id="CONTROLS'+idTa+'" class="wzCtrl" unselectable="on">');
gizmos=controls.split(' ');
for (var i=0; i < gizmos.length; i++) {
if (gizmos[i]){ //make buttons and selects for toolbar, in order requested
if (gizmos[i] == 'tstart') {
w('<div id="TABLE_CONTROLS'+idTa+'" style="display:none" unselectable="on">');
t_end='</div>';
}
else if (gizmos[i] == '|') w(' <big style="padding-bottom:2em">|</big> ');
else if (gizmos[i] == 'newline') w('<br>');
else if ((dsels+sels).indexOf(gizmos[i]) != -1) makeSelect(gizmos[i])
else if ((dbuts+buts+tbuts).indexOf(gizmos[i]) != -1) makeButton(gizmos[i]);
}
}
w(t_end) //table controls end
w('<a href="http://www.unverse.net" style="color:buttonface" title="'+whizzywig_version+'">.</a> ');
w(fGo('LINK'));
if (linkBrowse) w('<input type="button" onclick=doWin("'+linkBrowse+'"); value="'+t("Browse")+'"> ');
w(t('Link address (URL)')+': <input type="text" id="lf_url'+idTa+'" size="60"><br><input type="button" value="http://" onclick="o(\'lf_url'+idTa+'\').value=\'http://\'+o(\'lf_url'+idTa+'\').value"> <input type="button" value="mailto:" onclick="o(\'lf_url'+idTa+'\').value=\'mailto:\'+o(\'lf_url'+idTa+'\').value"><input type="checkbox" id="lf_new'+idTa+'">'+t("Open link in new window")+fNo(t("OK"),"insertLink()"));//LINK_FORM end
w(fGo('IMAGE'));
if (imageBrowse) w('<input type="button" onclick=doWin("'+imageBrowse+'"); value="'+t("Browse")+'"> ');
w(t('Image address (URL)')+': <input type="text" id="if_url'+idTa+'" size="50"> <label title='+t("to display if image unavailable")+'><br>'+t("Alternate text")+':<input id="if_alt'+idTa+'" type="text" size="50"></label><br>'+t("Align")+':<select id="if_side'+idTa+'"><option value="none">_♥_ '+t("normal")+'</option><option value="left">♥= '+t("left")+'</option><option value="right">=♥ '+t("right")+'</option></select> '+t("Border")+':<input type="text" id="if_border'+idTa+'" size="20" value="0" title="'+t("number or CSS e.g. 3px maroon outset")+'"> '+t("Margin")+':<input type="text" id="if_margin'+idTa+'" size="20" value="0" title="'+t("number or CSS e.g. 5px 1em")+'">'+fNo(t("Insert Image"),"insertImage()"));//IMAGE_FORM end
w(fGo('TABLE')+t("Rows")+':<input type="text" id="tf_rows'+idTa+'" size="2" value="3"> <select id="tf_head'+idTa+'"><option value="0">'+t("No header row")+'</option><option value="1">'+t("Include header row")+'</option></select> '+t("Columns")+':<input type="text" id="tf_cols'+idTa+'" size="2" value="3"> '+t("Border width")+':<input type="text" id="tf_border'+idTa+'" size="2" value="1"> '+fNo(t("Insert Table"),"makeTable()"));//TABLE_FORM end
function tagButs() {
w('<input type="button" onclick=\'doTag("<h1>")\' value="H1" title="<H1>"><input type="button" onclick=\'doTag("<h2>")\' value="H2" title="<H2>"><input type="button" onclick=\'doTag("<h3>")\' value="H3" title="<H3>"><input type="button" onclick=\'doTag("<h4>")\' value="H4" title="<H4>"><input type="button" onclick=\'doTag("<p>")\' value="P" title="<P>"><input type="button" onclick=\'doTag("<strong>")\' value="S" title="<STRONG>" style="font-weight:bold"><input type="button" onclick=\'doTag("<em>")\' value="E" title="<EM>" style="font-style:italic;"><input type="button" onclick=\'doTag("<li>")\' value="•—" title="<LI>"><input type="button" onclick=\'doTag("<a>")\' value="@" title="<A HREF= >"><input type="button" onclick=\'doTag("<img>")\' value="[♥]" title="<IMG SRC= >"><input type="button" onclick=\'doTag("<br />")\' value="←" title="<BR />">');
}
ih=d.body.innerHTML;
ih=ih.replace(/(<\/?)FONT([^>]*)/gi,"$1span$2")
.replace(/(<\/?)[Bb](\s+[^>]*)?>/g, "$1strong$2>")
.replace(/(<\/?)[Ii](\s+[^>]*)?>/g, "$1em$2>")
.replace(/<\/?(COL|XML|ST1|SHAPE|V:|O:|F:|F |PATH|LOCK|IMAGEDATA|STROKE|FORMULAS)[^>]*>/gi, "")
.replace(/\bCLASS="?(MSOw*|Apple-style-span)"?/gi,"")
.replace(/<[^>]+=[^>]+>/g,qa) //quote all atts
.replace(/[–]/g,'-') //long –
.replace(/[‘’]/g, "'") //single smartquotes ‘’
.replace(/[“”]/g, '"') //double smartquotes “”
.replace(/<(TABLE|TD|TH|COL)(.*)(WIDTH|HEIGHT)=["'0-9A-Z]*/gi, "<$1$2") //no fixed size tables (%OK) [^A-Za-z>]
.replace(/<([^>]+)>\s*<\/\1>/gi, "") //empty tag
.replace(/>(<\/?[C-Z])/gi,">\n$1") //newline adjacent tags
.replace(/(<BR ?\/?>)([^\r\n])/gi,"$1\n$2") //newline on BR
.replace(/([^\n])<(P|DIV|TABLE|FORM)/gi,"$1\n\n<$2") //add white space
.replace(/\n<(LI|OPTION|TR|INPUT)/gi,"\n <$1") //indent..
.replace(/\n<(TD|TH)/gi,"\n <$1") //..more
.replace(location.href+'#','#') //IE anchor bug
.replace(/<(IMG|INPUT|BR|HR|LINK|META)([^>]*)>/gi,"<$1$2 />") //self-close tags
.replace(/(<\/?[A-Z]*)/g,lc) //lowercase tags...
.replace(/style="[^"]*"/gi,sa) //and style atts
return ih;
}
if (cmd) {
makeSo(cmd, prm);
e.preventDefault(); // stop the event bubble
e.stopPropagation();
}
}
function doTag(html) { // insert HTML into text area
var url;
if (!html) html=prompt("Enter some HTML or text to insert:", "");
o(idTa).focus();
if (html == '<a>') {
url=prompt("Link address:","http://");
html='<a href="'+url+'">';
}
if (html == '<img>') {
url=prompt("Address of image:","http://");
var alt=prompt("Description of image");
html ='<img src="'+url+'" alt="'+alt+'">';
}
var close='';
if (html.indexOf('<') == 0 && html.indexOf('br') != 1 && html.indexOf('img') != 1)
close=html.replace(/<([a-z0-6]+).*/,"<\/$1>");
if (html != '<strong>' && html != '<em>') close += '\n';
if (document.selection) {
sel=document.selection.createRange();
sel.text=html+sel.text+close;
} else {
before=o(idTa).value.slice(0,o(idTa).selectionStart);
sel=o(idTa).value.slice(o(idTa).selectionStart,o(idTa).selectionEnd);
after=o(idTa).value.slice(o(idTa).selectionEnd);
o(idTa).value =before+html+sel+close+after;
}
o(idTa).focus();
}
function insHTML(html) { //insert HTML at current selection
if (!html) html=prompt(t("Enter some HTML or text to insert:"), "");
if (html.indexOf('js:') == 0) {
try{eval(html.replace(/^js:/,''))} catch(e){}; return;
}
try {if (sel.type && sel.type!="Text") sel=""; xC("inserthtml",html+sel);}
catch (e) {if (document.selection) {
if (papa && papa.nodeName == 'IMG') {papa.outerHTML=html;}
else if(rng) {rng.select(); rng.pasteHTML(html+rng.htmlText);}
} }
whereAmI();
}
Valora esta pregunta
0