Como capturar VALUE del TEXTAREA del FCKEDITOR

mesoriginal · #1 (**permalink**) 03/06/2012, 08:21

Hola!

Estoy en que cuando intento capturar el value del fckeditor solo me captura el valor por defecto. Si modifico el contenido sigue apareciendo el valor por defecto.

$('#id').val();

Alguien sabe como capturar el "current value" del textarea de FCKEDTIOR? (en formato html).

Muchas gracias.

maycolalvarez · #2 (**permalink**) 03/06/2012, 11:02

Los textarea NO manejan su contenido con value, use innerHTML, lo que para jQuery es .html(), consulte un manual de formularios en HTML

emprear · #3 (**permalink**) 03/06/2012, 13:27

Cita:

Iniciado por maycolalvarez

Los textarea NO manejan su contenido con value, use innerHTML, lo que para jQuery es .html(), consulte un manual de formularios en HTML

Permitime discrepar @maycolAlvarez

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
/* script */
function valor_tarea(){
var elemento = document.forms[0].elements["texto"];
var t = elemento.value;
alert('valor con name: \n' + t);
var valor = document.getElementById('texto');
alert('valor con id: \n' + valor.value)
// innerHTML
alert('valor con innerHTML: \n' + valor.innerHTML)
}
//]]>
</script>
</head>
<body>
<form action="#" onsubmit="return valor_tarea();" method="post">
<textarea name="texto" id="texto" rows="3" cols="25">
párrafo en textarea
otra linea
</textarea>
<br />
<input type="button" value="con jQuery" id="eltxt" /><br />
<input type="submit" value="con Jscript" />
</form>
 
 
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){ 
$('#eltxt').click(function(){
var tx = $("#texto").val();
alert('Con jquery + val(): ' + tx);
var tx2 = $("#texto").text();
alert('Con jquery + text(): ' + tx2);
var tx3 = $("#texto").html();
alert('Con jquery + html(): ' + tx3);
}); 
}); 
//]]>
</script>
</body>
</html>

Como se ve, el val(), o value es recogido siempre.
Ahora en particular, para este caso, no habría que usar html() ó text() de jQuery ó innerHTML de javascript, porque en Firefox/Chrome, por ejemplo, siempre obtendríamos el contenido por defecto (no así en IE). Si el usuario modifica contenido solo se afecta el val() ó value, que en todos los navegadores se comportará igual
con respecto al problema de @mesoriginal, sin ver toda la script, asumo que esta definiendo
var tx = $("#texto").val();
fuera del evento click

Saludos

Saludos

IsaBelM · #4 (**permalink**) 03/06/2012, 14:01

un error bastante común ya que estamos acostumbrados a que si a un elemento, textarea, no tienes atributo value, no se puede acceder a su valor usando dicho atributo

a mí me paso lo mismo

emprear · #5 (**permalink**) 03/06/2012, 14:09

Cita:

Iniciado por IsaBelM

un error bastante común ya que estamos acostumbrados a que si a un elemento, textarea, no tienes atributo value, no se puede acceder a su valor usando dicho atributo

a mí me paso lo mismo

Como se vé en el ejemplo de mis post anterior, el textarea no tiene el atributo value definido, será necesario el name , el id, u ambos según como querramos identificar el elemento. Y para evitar problemas de compatibilidad, usar siempre val() ó value.
De hecho el atributo value en un textarea para xhtml
Error: there is no attribute "value"

Saludos

IsaBelM · #6 (**permalink**) 03/06/2012, 14:19

Cita:

Iniciado por emprear

Como se vé en el ejemplo de mis post anterior, el textarea no tiene el atributo value definido, será necesario el name , el id, u ambos según como querramos identificar el elemento. Y para evitar problemas de compatibilidad, usar siempre val() ó value.
De hecho el atributo value en un textarea para xhtml
Error: there is no attribute "value"

Saludos

creo que no has interpretado bien mis palabras. estamos diciendo lo mismo. no se le puede asignar el atributo value

Cita:

<textarea>este es el valor</textarea>

y se accede a él, usando innerHTML o value. y el pensar que no se puede acceder a su valor usando value, es el error común del que hablaba.

con respecto a la compatibilidad, todos los navegadores aceptan innerHTML y value para leer el valor de un textarea. lo otro ya es jquery y ahí no entro

masterpuppet · #7 (**permalink**) 03/06/2012, 14:23

El API tiene métodos para obtener el contenido, los has probado ?

emprear · #8 (**permalink**) 03/06/2012, 14:54

Cita:

Iniciado por IsaBelM

con respecto a la compatibilidad, todos los navegadores aceptan innerHTML y value

Si comprendo, a lo que me refiero concretamente (y usando javascript puro exclusivamente) es que si por defecto en el textarea, supongamos tenemos lo siguiente

<textarea name="texto" id="texto" rows="3" cols="25">
párrafo en textarea
otra linea
</textarea>

y, durante la edición por parte del usuario se agrega esto

párrafo en textarea
otra linea
Tercera linea escrita por cliente

innerHTML en Firefox, chrome, opera y Safari, nos seguirá devolviendo
párrafo en textarea
otra linea

Solo IE iguala el texto del innerHTML al value, de ahi que yo señalé que para evitar problemas de compatibilidad se debe se usar value, que en todos los casos será siempre
párrafo en textarea
otra linea
Tercera linea escrita por cliente

SAludos

IsaBelM · #9 (**permalink**) 03/06/2012, 15:15

que interesante!! si se escribe una nueva línea, el valor que obtenemos no incluye esa nueva línea. por el contrario si añadimos, con javascript, una nueva línea, sí se incluye

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function fnc(){
alert(document.getElementById("texto").innerHTML);
}

function fnc2(){
document.getElementById("texto").innerHTML += '\r\ntercera línea';
}
</script>
</head>
<body>

<textarea name="texto" id="texto" rows="3" cols="25">
párrafo en textarea
otra linea
</textarea>

<input type="button" onclick="fnc()" value="ver valor" />
<input type="button" onclick="fnc2()" value="agregar" />

</body>
</html>

pero ie no respeta el salto de línea

emprear · #10 (**permalink**) 03/06/2012, 15:35

Cita:

Iniciado por IsaBelM

que interesante!! si se escribe una nueva línea, el valor que obtenemos no incluye esa nueva línea. por el contrario si añadimos, con javascript, una nueva línea, sí se incluye

pero ie no respeta el salto de línea

más interesante todavía, habrá que tener cuidado con lo que se hace y lo que se pretende

Saludos

mesoriginal · #11 (**permalink**) 07/06/2012, 14:46

Hola a todos,

muchas gracias por sus respuestas el codigo en cuestion es este:

Código:

function saveContent(){
	var titleVar = $('#addTitle').val();
	var introVar = $('#addIntro').val();
	var htmlVar =  $('#editor_kama').attr('value');


	$.post('/ajax/functions.php',{action: "save", title: titleVar, intro: introVar, html: htmlVar}, function(data) {
  		  
		//location.reload();
	
	});

}

function submitAddContent(){
	$('#desaipublica').click(function(){
		saveContent();
	});

}

Por lo cual como dicre @emprear siempre obtendríamos el contenido por defecto. Al ejecutar el evento .click() abro un modal donde hay un formulario con 2 inputs i 1 textarea (el de fckeditor) luego al pulsar otro evento .click() este manda los parametros mediante $.post() en JSON.

Lo que hace que reciba SIEMPRE el texto por defecto por mucho que este se canvie.

Muchas gracias a todos,

Saludos!