Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/08/2007, 07:45
Avatar de pzin
pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Pregunta Problemas con bbcode en textarea

Muy buenas.

Antes de nada, decir que tengo conocimientos bastantes limitados de javascript. Por eso he buscado por FDW y por Google algún script ya hecho para usar en un textarea de forma que sea mas fácil para el usuario usar bbcode (como lo hace FDW, pero no el editor visual, el "normal").

Entonces, encontré en este mensaje, este código (lo pongo a continuación):
Código:
function init(){
	incluidos=init.arguments;
	for(i=0;i<incluidos.length;i++){
		cuerpo=document.body.innerHTML;
		html="<table><tr><td valign=\"top\"> <img src=\"bbcode/buttons/bold.gif\" width=\"21\" height=\"20\" onclick=\"instag('b','"+incluidos[i]+"')\" onmouseover=\"this.style.border='solid 1px #000000';\" onMouseOut=\"this.style.border='solid 1px #F7F7F7';\" style=\"border:solid 1px #F7F7F7;\" title=\"Negrita\">&nbsp;<img src=\"bbcode/buttons/underline.gif\" width=\"21\" height=\"20\" onclick=\"instag('u','"+incluidos[i]+"')\" onmouseover=\"this.style.border='solid 1px #000000';\" onmouseout=\"this.style.border='solid 1px #F7F7F7';\" style=\"border:solid 1px #F7F7F7;\" title=\"Subrayado\">&nbsp;<img src=\"bbcode/buttons/italic.gif\" width=\"21\" height=\"20\" onclick=\"instag('i','"+incluidos[i]+"')\" onmouseover=\"this.style.border='solid 1px #000000';\" onmouseout=\"this.style.border='solid 1px #F7F7F7';\" style=\"border:solid 1px #F7F7F7;\" title=\"Cursiva\">&nbsp;<img src=\"bbcode/buttons/link.gif\" width=\"21\" height=\"20\" onclick=\"inslink('"+incluidos[i]+"')\" onmouseover=\"this.style.border='solid 1px #000000';\" onmouseout=\"this.style.border='solid 1px #F7F7F7';\" style=\"border:solid 1px #F7F7F7;\" title=\"Insertar enlace\">&nbsp;<img src=\"bbcode/buttons/insertimage.gif\" width=\"21\" height=\"20\" onclick=\"captura_imag('"+incluidos[i]+"')\" onmouseover=\"this.style.border='solid 1px #000000';\" onmouseout=\"this.style.border='solid 1px #F7F7F7';\" style=\"border:solid 1px #F7F7F7;\" title=\"Insertar imagen\">&nbsp;<img src=\"bbcode/buttons/smile.gif\" width=\"21\" height=\"20\" onclick=\"ventana_emot('"+incluidos[i]+"')\" onmouseover=\"this.style.border='solid 1px #000000';\" onmouseout=\"this.style.border='solid 1px #F7F7F7';\" style=\"border:solid 1px #F7F7F7;\" title=\"Insertar emoticon\">&nbsp;<img src=\"bbcode/buttons/code.gif\" width=\"21\" height=\"20\"  onclick=\"instag('code','"+incluidos[i]+"')\" onmouseover=\"this.style.border='solid 1px #000000';\" onmouseout=\"this.style.border='solid 1px #F7F7F7';\" style=\"border:solid 1px #F7F7F7;\" title=\"C&oacute;digo\">&nbsp;<img src=\"bbcode/buttons/quote.gif\" width=\"21\" height=\"20\" onclick=\"instag('quote','"+incluidos[i]+"')\" onmouseover=\"this.style.border='solid 1px #000000';\" onmouseout=\"this.style.border='solid 1px #F7F7F7';\" style=\"border:solid 1px #F7F7F7;\" title=\"Citar\">&nbsp;<img src=\"bbcode/buttons/bullist.gif\" width=\"20\" height=\"20\" onclick=\"ins_imag('•','"+incluidos[i]+"')\" onmouseover=\"this.style.border='solid 1px #000000';\" onmouseout=\"this.style.border='solid 1px #F7F7F7';\" style=\"border:solid 1px #F7F7F7;\" title=\"Vi&ntilde;eta\" /></td><td valign=\"top\"><table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td><img src=\"bbcode/buttons/resize_0.gif\" width=\"21\" height=\"9\"  onclick=\"quitar('"+incluidos[i]+"')\" onmouseover=\"this.style.border='solid 1px #000000';\" onmouseout=\"this.style.border='solid 1px #F7F7F7';\" style=\"border:solid 1px #F7F7F7;\" title=\"Disminuir tama&ntilde;o\"></td></tr><tr><td><img src=\"bbcode/buttons/resize_1.gif\" width=\"21\" height=\"9\" id=\"quita\"  onclick=\"agregar('"+incluidos[i]+"')\" onmouseover=\"this.style.border='solid 1px #000000';\" onmouseout=\"this.style.border='solid 1px #F7F7F7';\" style=\"border:solid 1px #F7F7F7;\" title=\"Aumentar tama&ntilde;o\"></td></tr></table></td></tr></table><textarea name=\""+incluidos[i]+"\" cols=\"45\" rows=\"5\" id=\""+incluidos[i]+"\">";
		pat="<textarea+[^>]*"+incluidos[i]+"+[^<]+"; 	
		patron =new RegExp(pat,"gi");
		coincidencias=new Array();
		coincidencias=cuerpo.match(patron);
		for(j=0;j<coincidencias.length;j++){
			result=new Array();
			result=coincidencias[j].match(/\s+id=[^>\s]+/g);
			result[0]=result[0].split('"').join(''); 
			result[0]=result[0].split('id=').join(''); 
			result[0]=result[0].split(' ').join(''); 
			if(result[0]==incluidos[i])cuerpo2=cuerpo.split(coincidencias[j]);
		}
		document.body.innerHTML=cuerpo2[0]+html+cuerpo2[1];
	}
}
function instag(tag,campo){
	var input = document.getElementById(campo);
		if(typeof document.selection != 'undefined' && document.selection) {
			var str = document.selection.createRange().text;
			input.focus();
			var sel = document.selection.createRange();
			sel.text = "[" + tag + "]" + str + "[/" +tag+ "]";
			sel.select();
			return;
		}
		else if(typeof input.selectionStart != 'undefined'){
			var start = input.selectionStart;
			var end = input.selectionEnd;
			var insText = input.value.substring(start, end);
			input.value = input.value.substr(0, start) + '['+tag+']' + insText + '[/'+tag+']'+ input.value.substr(end);
			input.focus();
			input.setSelectionRange(start+2+tag.length+insText.length+3+tag.length,start+2+tag.length+insText.length+3+tag.length);
			return;
		}
		else{
			input.value+=' ['+tag+']Reemplace este texto[/'+tag+']';
			return;
		}
}
function inslink(campo){
	var input = document.getElementById(campo);
		if(typeof document.selection != 'undefined' && document.selection) {
			var str = document.selection.createRange().text;
			input.focus();
			var my_link = prompt("Enter URL:","http://");
				if (my_link != null) {
					if(str.length==0){
						str=my_link;
					}
					var sel = document.selection.createRange();
					sel.text = "[a href=\"" + my_link + "\"]" + str + "[/a]";
					sel.select();
					}
			return;
		}else if(typeof input.selectionStart != 'undefined'){
					var start = input.selectionStart;
					var end = input.selectionEnd;
					var insText = input.value.substring(start, end);
					var my_link = prompt("Enter URL:","http://");
						if (my_link != null) {
							if(insText.length==0){
								insText=my_link;
							}
							input.value = input.value.substr(0, start) +"[a href=\"" + my_link +"\"]" + insText  + "[/a]"+ input.value.substr(end);
							input.focus();
							input.setSelectionRange(start+11+my_link.length+insText.length+4,start+11+my_link.length+insText.length+4);
						}
			return;
		}else{
			var my_link = prompt("Ingresar URL:","http://");
			var my_text = prompt("Ingresar el texto del link:","");
			input.value+=" [a href=\"" + my_link +  "\"]" + my_text + "[/a]";
			return;
		}
}
var reng=5;
function agregar(area){
	document.getElementById('quita').disabled=false;
	reng=reng+5;
	document.getElementById(area).rows=reng;
}
function quitar(area){
	reng=reng-5;
		if(reng<6){reng=5;
		}
	document.getElementById(area).rows=reng;
}
function ventana_emot(area){
	coordx=screen.width?(screen.width-300)/2:0;
	coordy=screen.height?(screen.height-150)/2:0;
	window.open("bbcode/emoticons/emoticons.html?campo="+area,"EMOTICONS","width=300,height=150,menubar=no,resizable=yes,left="+coordx+",top="+coordy);
}
function ins_imag(emot,area){
	var input = document.getElementById(area);
		if(typeof document.selection != 'undefined' && document.selection) {
			var str =document.selection.createRange().text;
			input.focus();
			var sel =document.selection.createRange();
			sel.text = str + emot;
			sel.select();
			return;
		}
		else if(typeof input.selectionStart != 'undefined'){
			var start = input.selectionStart;
			var end = input.selectionEnd;
			var insText = input.value.substring(start, end);
			input.value = input.value.substr(0, start) + insText+ emot + input.value.substr(end);
			input.focus();
			input.setSelectionRange(end+emot.length,end+emot.length);
			return;
		}
		else{
			input.value+=emot;
			return;
		}
}
function captura_imag(area){
	var my_link = prompt("Ingresar URL:","http://");
		if (my_link != null) {
			ins_imag('[img src=\"'+my_link+'\"]',area);
		}
}
Tengo dos problemas con el código, una es que por alguna razón extraña no logro que funcione en IE (aunque sé que puede funcionar en IE, eso seguro), ya que me da este error:
Linea: 5
Car.: 3
Error: El objeto no acepta esta propiedad o método
Codigo: 0
URL: ....


Este error, que he buscado por Internet, lo he intentado solucionar (en FDW, me parece que en un mensaje de Tunait, decía que pudiera ser que fueran dos funciones que se llamaran igual, en un foro inglés, no recuerdo la posibilidad que daban a este error, pero recuerdo haberlo intentado también) pero sin éxito.

Otro error, o mas bien, la forma en que funciona este código me crea un problema.
Me parece, que el código crea un textarea (no estoy seguro) y reemplaza al otro, entonces, si yo hago esto:
Código HTML:
<textarea...>Hola mundo</textarea> 
No me sale en el textarea la cadena "Hola mundo", y esto me supone un problema, por un lado porque si el mensaje tiene algún error, el usuario debe volver a escribir el mensaje y, al querer editar el mensaje, pues como no hay mensaje en el textarea, no hay nada que editar.

Los dos errores o problemas que tengo, son igual de graves, así que ahora mismo es casi mejor no usar este bbcode, pero me gustaría poder solucionarlo ya que es una gran ventaja para el usuario.

Tal vez sea demasaido complejo intentar arreglar esto y es mas sencillo usar otro código, en ese caso, si alguien sabe de alguno (que no sea visual, y tenga, aparte de negrita, itálica y subrayado, url e img) y me pudiera facilitar la URL o el código, también se lo agradecería.

Muchas gracias, un saludo y perdón por la parrafada.