Foros del Web » Programando para Internet » Jquery »

Jquery y CKeditor

Estas en el tema de Jquery y CKeditor en el foro de Jquery en Foros del Web. Hola. Estoy tratando de enviar por AJAX la respuesta de un formulario que contiene un DIV con un editor CKeditor. El caso es que tengo ...
  #1 (permalink)  
Antiguo 18/07/2010, 03:44
 
Fecha de Ingreso: abril-2005
Mensajes: 64
Antigüedad: 19 años, 7 meses
Puntos: 0
Pregunta Jquery y CKeditor

Hola.

Estoy tratando de enviar por AJAX la respuesta de un formulario que contiene un DIV con un editor CKeditor.

El caso es que tengo todo funcionando, pero lo que me manda no es el fuente del CKeditor sino solo el texto.

Como puedo hacer para que me mande el texto fuente del CKeditor ?

Os pongo el codigo:

Código PHP:
<!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>Prueba CKEDITOR</title>
    <
meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <
script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form id="formulario1" action="editor_show.php" method="post">
    <div id="txtarea1" name="txtarea1" class="ckeditor" cols="80" rows="10"><p>
    <span style="font-size: 72px;">HOLA</span> CAR<span style="background-color: rgb(255, 215, 0);">ACOLA</span></p></div>
            <script type="text/javascript">
            var editor;
                editor = CKEDITOR.replace( 'txtarea1',
                    {
                        skin : 'office2003'
                    });
            </script>
    <input type="text" id="txtiarea1" name="txtiarea1">
<button id="benviar" type="submit">Enviar</button>
</form>
    <button id="bmostrar">Mostrar</button>
    <button id="bocultar">Ocultar TODO</button>
    <button id="bocultaredit">Ocultar EDITOR</button>
    <button id="bmostraredit">Mostrar EDITOR</button>
<div id="result"></div>
<script type="text/javascript">
$("#bocultar").click(function () {
  
  $("#cke_txtarea1").hide(1000);
});
$("#bmostrar").click(function () {
  
  $("#cke_txtarea1").show(1000);
});
$("#bocultaredit").click(function () {
    editor.destroy();
});
$("#bmostraredit").click(function () {
                editor = CKEDITOR.replace( 'txtarea1',
                    {
                        skin : 'office2003'
                    });
});
$("#benviar").click(function () {
    $("#txtiarea1").val($("#txtarea1").html());
});

$('#formulario1').submit(function()  {
  // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                $('#result').html(data);
            }
        })        
        return false;
    }); 
</script>
</body>
</html> 
y el otro fichero de momento:

Código PHP:
<?
echo "texto:<br>";
if(isset(
$_POST['txtiarea1'])){ 
echo 
$_POST["txtiarea1"];
}else{
    echo 
"no ha llegado el texto";
}
?>
Como puedo hacer para poder guardar el fuente html del ckeditor ???
  #2 (permalink)  
Antiguo 18/07/2010, 09:01
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 9 meses
Puntos: 101
Respuesta: Jquery y CKeditor

Estás seguro de que vos tenes que declarar un evento submit para obtener el contenido del editor? No lo hace el editor por si mismo?

Y para que hacés esto?:
Cita:
$("#benviar").click(function () {
$("#txtiarea1").val($("#txtarea1").html());
});
Seguramente el editor se encargue del envío por si mismo. En todo caso hacé un print_r($_POST); en lado sesrvidor sin manipular la data por vos mismo en js para ver que devuelve. O visitá la pagina del autor ;o)
  #3 (permalink)  
Antiguo 18/07/2010, 09:16
 
Fecha de Ingreso: abril-2005
Mensajes: 64
Antigüedad: 19 años, 7 meses
Puntos: 0
Respuesta: Jquery y CKeditor

Cita:
Iniciado por mayid Ver Mensaje
Estás seguro de que vos tenes que declarar un evento submit para obtener el contenido del editor? No lo hace el editor por si mismo?

Y para que hacés esto?:


Seguramente el editor se encargue del envío por si mismo. En todo caso hacé un print_r($_POST); en lado sesrvidor sin manipular la data por vos mismo en js para ver que devuelve. O visitá la pagina del autor ;o)
Hago eso para poner el contenido del div en un input para enviar el formulario.
O hay otras maneras de hacerlo ?
  #4 (permalink)  
Antiguo 18/07/2010, 17:21
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 9 meses
Puntos: 101
Respuesta: Jquery y CKeditor

Lo vi todo muy rapido. La logica de lo que decís esta bien, si es que querés enviar html. Sino, usa .text()

Igual, pregunto: como llenas el contenido del div? Manualmente o con PHP? Por qué hay necesidad de tomar el valor de ahí para copiarlo a un input?

No se si pueda ayudarte, pero ya que estamos te aconsejo que muevas todo tu codigo javascript ala cabecera, y que lo encapsules en un document.ready. De esa forma la pagina va a quedar más limpia ;o)
  #5 (permalink)  
Antiguo 19/07/2010, 03:18
 
Fecha de Ingreso: abril-2005
Mensajes: 64
Antigüedad: 19 años, 7 meses
Puntos: 0
Respuesta: Jquery y CKeditor

Cita:
Iniciado por mayid Ver Mensaje
Lo vi todo muy rapido. La logica de lo que decís esta bien, si es que querés enviar html. Sino, usa .text()

Igual, pregunto: como llenas el contenido del div? Manualmente o con PHP? Por qué hay necesidad de tomar el valor de ahí para copiarlo a un input?

No se si pueda ayudarte, pero ya que estamos te aconsejo que muevas todo tu codigo javascript ala cabecera, y que lo encapsules en un document.ready. De esa forma la pagina va a quedar más limpia ;o)
Como se puede ver, estoy empezando con esto de ajax y jquery.
El código lo tengo abajo de momento, luego ya lo pondré como bien dices en un document.ready.

La idea es tener una pagina con unos div con información sacada de una base de datos, y que cuando se pinche sobre el div, salga el editor y se pueda modificar y lo que se modifique se guarde en la base de datos con el formato para que al visualizarlo de nuevas u ocultar el editor se vea con el formato correcto editado.

Al ser un DIV donde se muestra, tengo que tener un input oculto (que ahora lo tengo visible para verlo) para poner el contenido del DIV en el input para poder enviar el formulario con todos los datos que se editen.

Seguramente, a lo mejor se pueda hacer directamente sin hacer esto del DIV al input, pero a mi no me ha salido.

Como nota, decir que en el input si que veo bien el código que genera el editor, pero luego a la hora de enviar el formulario lo debe de perder.

Alguna ayudita ?

Gracias.
  #6 (permalink)  
Antiguo 19/07/2010, 10:46
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 9 meses
Puntos: 101
Respuesta: Jquery y CKeditor

Yo tengo exactamente la misma implementación pero con TinyMCE editor. Es decir, imprimo las secciones dinamicamente, y luego al hacer click en un enlace pongo la seccion correspondiente en un textarea. No uso inputs porque es mucha la información que tengo para editar.

Para tu caso, si solo necesitaras un editor simple, te recomiendo algún plugin "inline-editor":

http://www.appelsiini.net/projects/jeditable

http://code.google.com/p/jquery-in-place-editor/

Demos (click sobre algun texto y se convierte en editable!):
http://yelotofu.com/labs/jquery/snip...mo_basics.html

http://jquery-in-place-editor.google...emo/index.html

http://www.appelsiini.net/projects/j...e/default.html
  #7 (permalink)  
Antiguo 15/12/2010, 07:34
 
Fecha de Ingreso: abril-2001
Ubicación: Puerto Montt
Mensajes: 89
Antigüedad: 23 años, 8 meses
Puntos: 1
Respuesta: Jquery y CKeditor

Queria saber si lo pudiste resolver, yo estoy intentando hacer algo similar, y tengo el mismo problema........ Gracias

Etiquetas: ckeditor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:47.