0

Tengo el siguiente problema... estoy agregando tinymce editor en mi sitio web para permitir al usuario que escriba con estilos en ciertas partes y esto lo guardo en mi BD, al principio esto no me estaba resultando ya que el formulario yo lo pasaba por serialize y lo que me mostraba era un espacio en blanco, quiete esto y ya funcionó, entendiendo un poco mas de esto de la serializació, según entiendo, este proceso quita todos los caracteres o codigo HTML, si eso es correcto.... hay alguna forma de pasar código html por la serialización sin que este borre el código ?

Para explicarlo un poco mas... mi textarea tengo

Hola Mundo

pero cuando lo paso por el serialize lo devuelve vacio.

Muhcas gracias por la ayuda

Este es el código que utilizo para enviar la información serializada al archivo php. Gracias

function enviar(){    
var datos = $("#formulario").serialize(); //toma los datos "name" y los lleva a un arreglo.
$('#content-wait').html('<spam class="loading"><img src="images/loader.gif"/><br/></spam>');


$.ajax({
    type: "post",
    url:"formulario2.php",
    data: datos,
    success: function(texto){
        if(texto==="exito"){
            correcto();
        }else{
            phperror(texto);
        }
    }
})

}

ACTUALIZACIÓN

La configuración de Tinymce la hago con el siguiente código

<script type="text/javascript">
tinymce.init({
    selector: 'textarea',
    entity_encoding : "raw",
    language_url : 'langs/es.js',
    language: 'es',
    branding: false,
    menubar: false,
plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | table | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat ',    

});
</script>

El formulario es este

<form method="post" action="formulario3.php">
            <div class="form-row">
                <div class="form-group col-md-7">                     
                  <input type="text" name="nombre" value="" id="nombre" class="form-control" placeholder=" Digite su nombre" required>
                </div>
                <div class="form-group col-md-5 d-flex justify-content-end ">
                    <spam id="content-wait"> </spam>
                    <button type="submit" class="btn btn-primary mb-2 ml-5">Guardar Información</button>
                </div>

             </div> 
             <div class="form-group">
                <label for="exampleFormControlTextarea1">Example textarea</label>
                <textarea id="contenido" class="form-control" name="contenido" rows="3"></textarea>
              </div>  
            </form> 

Y lo guardo en la base de datos de la forma normal... y de esta forma se guarda de la forma correcto y con la sintaxis de html, por ejemplo (sin el pre)

<pre><p style="text-align: center;"><em><strong>Ejemplo de Texto</strong></em></p></pre>

y cuando lo muestro en el HTML sale en negrita y centrado... osea... se nuestra como debería de mostrarse y se guarda bien.... en otras palabras todo funciona.. pero cuando lo pongo con serializae ahí es donde esta el problema porque pone el textarea en blanco

Este es el codigo que me enviaste @Riven que probé pero igual borra el contenido de textarea.

function urlToJSON(urlEnc) {

  const urlEncoded = decodeURI(urlEnc);
  const fullObjects = urlEncoded.split("&");
  const keys = fullObjects.map(el => el.split("=")[0]);
  const values = fullObjects.map(el => el.split("=")[1]);
  const resObj = {};

  for (let i = 0; i < fullObjects.length; i++) {
    resObj[keys[i]] = values[i];
  }

  return resObj;
}

function enviar(ev) {
  ev.preventDefault();
  var datos = urlToJSON($("#formulario1").serialize());
  console.log(datos);
}

1 respuesta 1

0

function enviar(ev){
  
    ev.preventDefault();
    var datos = $("#formulario").serialize(); //toma los datos "name" y los lleva a un arreglo.
    $('#content-wait').html('<spam class="loading"><img src="images/loader.gif"/><br/></spam>');
    console.log(datos);
    
    /*$.ajax({
        type: "post",
        url:"formulario2.php",
        data: datos,
        success: function(texto){
            if(texto==="exito"){
                correcto();
            }else{
                phperror(texto);
            }
        }
    });*/
    
}
textarea, button{
  display: block;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id = "formulario">
  
  <textarea rows = "5" cols = "60" placeholder = "digita información..."
  name = "contenido_usuario"></textarea>
  <button type = "submit" onclick = "enviar(event)">enviar!</button>
  
</form>

<div id = "content-wait"></div>

He comentando la parte de ajax porque aqui en stackoverflow no tendria sentido hacer que se ejecute, tambien decir que faltaba informacion que no proporcionaste en el codigo, pense en colocar mi propio HTML que simulara lo que esperas.

Una de las cosas importantes a tener en cuenta es que si la funcion enviar la ejecuta un formulario, deberás prevenir que el formulario se envié con un preventDefault en el codigo JS, por lo que primero le damos el evento al boton que se encarga del form (si es que tienes un formulario y un boton que envia el formulario), de no ser asi esta parte no necesitas colocarla:

<button type = "submit" onclick = "enviar(event)">enviar!</button>

Como vemos a la funcion enviar le pasamos el evento.

Acto seguido recibimos el evento en la funcion enviar y prevenimos el comportamiento del botón para que no se envie el formulario y ajax pueda ser llamado:

function enviar(ev){
    ev.preventDefault();
    ...
    ...
    ...
}

Una cosa mas a tener en cuenta, tienes que tener cuidado con los campos que añades, en tu caso para extraer la informacion que te interesa de tu textarea tienes que tener en cuenta que tu textarea tiene que tener vinculado un name, puesto que el campo name es el que se encarga de decirle a jQuery o al formulario que ese valor debe ser tomado en cuenta para extaer sus datos.

por este motivo es importante que al textarea le coloques un atributo name, el cual debería ser único para cada input que tengas:

<textarea rows = "5" cols = "60" placeholder = "digita información..."
  name = "contenido_usuario"></textarea>

En este caso al campo name le he puesto como valor contenido_usuario, por lo que en PHP lo recibiras con la llave contenido_usuario en $_POST.

Sabiendo esto, debo decirte que estas equivocado, estas equivocado con respecto a decir que:

.serialize();

Te devolvera un array, esto no es cierto, esto lo que te devolvera es siempre un URL encoded string, los cuales son parametros que usa la peticion GET de manera nativa.

Es decir que serialize() seria bueno es para usarlo con peticiones GET, mas NO para peticiones POST si quieres usar parametros GET en peticiones POST comprometerias la seguridad de una peticion POST.

La explicacion de porque usar parametros GET para hacer consultas POST compromete la seguridad de POST es porque las consultas hechas con GET fueron pensadas para pasar información mediante la URL, por lo tanto se trata de información que no comprometa al usuario o que sea casi irrelevante.

por ejemplo, para cambiar de pagina libremente se podria usar una URL estilo GET:

http://pagina.com/?pagina=1

Esto lo puede modificar y ver el usuario a voluntad, incluso si cambia los parametros la consulta debe funcionar sin problemas, el hecho de cambiar de una pagina a otra usando parametros GET no pone en peligro informacion sensible o importante del usuario, por lo que para este propósito esta perfecta una petición GET.

Para el caso de las peticiones POST estas contienen un mayor rango de seguridad, siendo que estas pasan "por debajo" de las URL, lo que las hace mas seguras, puesto que no puedes ver los parametros que envias en una peticion POST.

Sin embargo hay una solucion muy sencilla en jQuery si deseas usar serialize() de manera directa y sin complicarte mucho, y esta es setear el contentType de jQuery como "x-form-www-urlencoded", de esta manera aunque uses una peticion POST, jQuery sabra como tratar la data para enviarla aunque se esten pasando parametros GET a una peticion POST:

$.ajax({
    type: "post",
    url:"formulario2.php",
    contentType: "x-form-www-urlencoded",
    data: datos,
    success: function(texto){
        if(texto==="exito"){
            correcto();
        }else{
            phperror(texto);
        }
    }
});

Pero recuerda, esto NO es aconsejable, por que compromete la seguridad de una peticion POST, para no realizar algo asi te aconsejo que a lo que sea que te de como resultado serialize() lo conviertas a un json, puesto que en data de jQuery se supone que por defecto envias es un json y no un x-form-www-urlencoded.

Por lo tanto, el codigo final quedaria de la siguiente manera:

function urlToJSON(urlEnc){
  
  const urlEncoded = decodeURIComponent(urlEnc);
  const fullObjects = urlEncoded.split("&");
  const keys = fullObjects.map(el => el.split("=")[0]);
  const values = fullObjects.map(el => el.split("=")[1]);
  const resObj = {};

  for(let i = 0; i < fullObjects.length; i++){
    resObj[keys[i]] = values[i];
  }
  
  return resObj;
}

function enviar(ev){
  
    ev.preventDefault();
    var datos = urlToJSON($("#formulario").serialize());
    $('#content-wait').html('<spam class="loading"><img src="images/loader.gif"/><br/></spam>');
    console.log(datos);
    
    /*$.ajax({
        type: "post",
        url:"formulario2.php",
        data: datos,
        success: function(texto){
            if(texto==="exito"){
                correcto();
            }else{
                phperror(texto);
            }
        }
    });*/
    
}
textarea, button{
  display: block;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id = "formulario">
  
  <textarea rows = "5" cols = "60" placeholder = "digita información..."
  name = "contenido_usuario"></textarea>
  <button type = "submit" onclick = "enviar(event)">enviar!</button>
  
</form>

<div id = "content-wait"></div>

La funcion urlToJSON se encargaria entonces de a el resultado de $("#formulario").serialize() lo cual es un urlEncodedString pasarlo a un objeto JSON, al cual ahora si se lo podrias pasar directamente a ajax sin necesidad de declarar un contentType diferente en ajax.

Una cosa mas, ignora los caracteres especiales que te pone .serialize(), estos son necesarios para que la URL sea correctamente formateada y los datos puedan ser leidos, pero cuando envies la informacion esos caracteres extra no aparecerán y seran recibidos correctamente en PHP (si usas directamente .serialize()), en caso de usar la conversion a JSON directamente no aparecerán esos caracteres.

2
  • te quiero dar las gracias por haberte tomado el tiempo de contestar mi pregunta... realmente me has sorprendido... eres la primera persona que explica las cosas y ayuda... sigue asi compañero. Te cuento que entre las cosas que mencionaste hay unas que si las habia tomado en cuenta pero no las puse, probé lo que me pusiste y en textarea normal si me funciona sin problemas, pero cuando lo pruebo con el textarea en donde tengo el tinymce asociado ahi no logro obtener nada porque lo limpia. osea lo pone en blanco aunque tenga por ejemplo <p> Hola Mundo </p> que se que hacer, gracias
    – Joe
    el 10 jun. 2020 a las 18:55
  • Creo que te borra el html porque debes pasarselo a tinymc de una manera en especial, seguro lo estaras pasando como texto, seria buena idea que pusieras el codigo que usas para ejecutar tinymc y donde le pasas a tinymc el contenido de la serializacion del textarea.
    – Layer
    el 10 jun. 2020 a las 19:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.