2

El textarea guarda el texto correctamente excepto que el output de este texto:

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.

Nuevo párrafo. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500.Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.

Me lo guarda así:

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Nuevo párrafo. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500.Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.

Me gustaría que se guarden los párrafos al hacer $_POST y también implementar función para poner el texto en negrita, incluir los hiperenlaces.

<form method="POST" action="" enctype="multipart/form-data">
     <div class="form-group">
         <input name="user_id" type="hidden" class="form-control" id="user_id" aria-describedby="user_id" value="<?php echo $user_id; ?>" required>
     </div>
     <div class="form-group">
                        <input name="title" type="title" class="form-control" id="title" aria-describedby="title" placeholder="The title..." required>
     </div>
     <div class="form-group">
         <textarea placeholder="Question content..." name="body" class="form-control" id="Body" rows="10" required></textarea>
     </div>
     <div class="form-group">
           <button type="submit" id="Qasked" name="Qasked" class="btn btn-primary">Publish</button>
     </div>
 </form>

Mi código de inserción en Mysql base de datos:

<?php
if(isset($_POST['Qasked'])){
     $form = $_POST;
     $user_id = test_input($form['user_id']);
     $title = test_input($form['title']);
     $body = test_input($form['body']);
     $product_asks = '0';

     $pdo->beginTransaction();

     try{
            $sql = "INSERT INTO `products` (`user_id`, `product_name`, `product_description`, `product_asks`)
            VALUES (?, ?, ?, ?)";
            $stmt = $pdo->prepare($sql);
            $stmt->execute(array(
                  $user_id,
                  $title,
                  $body,
            $product_asks,
          )
       );
            $pdo->commit();
            } 
            catch(Exception $e){
            echo $e->getMessage();
            $pdo->rollBack();
         }
?>

He intentado poner en el texto <br/> y <b>Texto</b>, pero tampoco funciona, me lo guarda todo como texto. Aplico una clase de test input, a lo mejor eso da el problema:

function test_input($data) {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
    return $data;
    }
1
  • ¿Por qué tienes esto en tu form: enctype="multipart/form-data"? ¿Subes un archivo al form o escribes el texto directamente? Si escribes el texto directamente y quieres guardarlo con formato HTML no tienes que hacer nada más que escribir tu texto con las etiquetas correspondientes: <p>...</p>. Yo guardo contenido así en MySQL y no me da ningún problema. O el enctype o el test_input que haces es lo que te está dando problemas.
    – A. Cedano
    el 28 mar. 2017 a las 11:56

2 respuestas 2

3

Dentro de un textarea no se puede renderizar HTML ni para negrita ni para enlaces. lo que te sugiero es usar un div con el attributo contenteditable a true.

  • Con el codigo jQuery que añado es para poder hacer click en los vinculos dentro del div. (en el snippet no te direccionará a las paginas, quedará en blanco)

  • Para sacar el texto del div (con etiquetas y demás), puedes usar:

    document.getElementById("divEditable").innerHTML
    
  • Para pasar el valor por _POST puedes usar un input text campo oculto que mantenga el valor de innerHTML y es el que envias con:

    $body = test_input($form['bodyOculto']);
    

    y puedes hacerlo poniendo un metodo antes del submit

    $('#miForm').submit(function() {
        alert("moviendo el contenido del div al bodyOculto");
        document.getElementById("bodyOculto").value = document.getElementById("divEditable").innerHTML;
        return true; 
    });
    

Codigo:

$('#divEditable').on('click', function(event) {
  if (event.target != this) {
    if (event.target.tagName == 'A') {
      window.location = event.target.href;
      alert("abriendo " + event.target.href);
    }
  }
});


function sacarTexto() {

  alert(document.getElementById("divEditable").innerHTML);
}

  $('#miForm').submit(function() {
        alert("moviendo el contenido del div al bodyOculto");
        document.getElementById("bodyOculto").value = document.getElementById("divEditable").innerHTML;
        return true; 
    });
div.editable {
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  padding: 5px;
  overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="miForm">
<div contenteditable="true" class="editable" id="divEditable" >
  <a href='https://www.google.es/'>Google</a>
  <br><a href='http://stackoverflow.com/'>SOeng</a>
  <br><b>Texto en Negrita</b>
  <br>Texto sin negrita</div>

<input type="button" value="Texto del div" onclick="sacarTexto();">

<input type="text" value="" id="bodyOculto" hidden>
<input type="submit" value="enviar">

</form>

1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – user227
    el 28 mar. 2017 a las 22:53
2

Yo uso en mi página web un formulario desde el cual inserto texto con etiquetas html en la base de datos MySQL sin ningún problema. Hago esto casi todos los días.

  1. Se recoge el contenido del textarea en un archivo, llamado aquí inicio.php
  2. Al hacer clic en el botón insertar de inicio.php se lanza un jQuery que envía todo el contenido del formulario a un archivo auxiliar llamado aquí form-action.php. Se indica a jQuery que envíe los datos como html (dataType: "html")
  3. En form-action.php se recupera el contenido del formulario enviado por jQuery y se inserta en la base de datos.

Todo se hace de forma transparente para el usuario, sin tener que refrescar la página ni ocultar o escapar contenido.

El uso básicamente sería así:

inicio.php

El archivo donde está el textarea

<form action="/form-action.php" id="frm_datos" method="post">
    <textarea name="datos" rows="8" cols="170"></textarea>
    <button id="btn_insertar">Insertar Bíblica</button>
</form>


jQuery en inicio.php

Código jQuery en inicio.php, sin olvidar de agregar la librería jQuery

$(document).ready(function() 
{

    $( "#btn_insertar" ).click(function(e) 
    {
        e.preventDefault(); 
        var data = $(this).closest('form').serializeArray();
        /*
          *Este data.push suplementario es para sectorizar las inserciones
          *en el archivo form-action, ya que en mi caso
          *es un formulario grande con diferentes botones de inserción
          *por eso en form-action.php haré un isset($_POST['insertar_datos']) 
          * y a partir de ahí insertaré sólo lo que me interese.
         */
        data.push({ name: this.name, value: this.value, name: "insertar_datos", value:"insertar_datos" });
        post_data(data) ;
        console.log(data);
    });


    function post_data(data) 
    {
        var frm=$( "#frm_datos" );
        var request = $.ajax
            ({
                url: frm.attr("action"),
                method: frm.attr('method'),
                data: data,
                dataType: "html"
            });

            request.done(function( msg ) 
            {
                $( "#results" ).html( msg );
                return msg;
                console.log(msg);
                alert (msg);

            });

            request.fail(function( jqXHR, textStatus ) 
            {
                alert( "Request failed: " + textStatus );
            });

    }
});

Nota: El jQuery, para mayor claridad de código, lo puedes tener en un archivo aparte e incluirlo en el header de inicio.php, algo así:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Título</title>
<script   src="http://code.jquery.com/jquery-3.1.1.min.js"</script>
<script type="text/javascript" src="../js/mijQuery.js"></script>
</head>

form-action.php

El archivo php que será invocado desde Ajax en el método post de forma transparente. Aquí deberás conectar a la bd e insertar Nótese que este archivo php debe tener el mismo nombre indicado en la etiqueta action del formulario y la ruta completa, si ambos archivos no están en el mismo directorio, debe ser especificada.

    if(isset($_POST['insertar_datos']))
    {

        $datos=$_POST['datos']);
        //Insertar $datos en la bd, contendrá el texto con las etiquetas html
    }

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.