4

Estoy realizando una maquetación o diseño del cuerpo de un editor, en vez de utilizar un textarea estoy utilizando un DIV que funciona igual que un textarea.

En el siguiente DIV se inserta código html como contenido simple.

<div id="editor" class="editor"contenteditable></div>

Cómo puedo guardar los datos que contiene ese div a la base de datos.

5
  • Podrias usar Ajax.
    – alanfcm
    el 15 sep. 2018 a las 0:08
  • @alanfcm Es una buena alternativa ya que el resto de input se envían por ajax pero de esta forma no podré validar ese div con PHP como sí lo podía hacer con el textarea, he visto que los plugin de los editores utilizan un textarea por alguna razón todo lo que se escribe en ese div se está escribiendo o se pasa la información en ese textarea tiene alguna idea de cómo lo hacen.
    – Stevin
    el 15 sep. 2018 a las 0:14
  • en tu sistemas estas usando javascript puro o jquery u otro framework o pluging de js? el 15 sep. 2018 a las 1:26
  • @DavidLeonardoMolinaRuizDav Estoy utilizando jQuery nativamente, hasta ahora funciona muy bien, las acciones de los botones del editor. Solo me quedaría pendiente sobre esta información :(
    – Stevin
    el 15 sep. 2018 a las 15:21
  • Debes recibir el contenido del div con jQuery con html ya que .val() no te va a servir. ¿Que quieres pasar directamente solo el texto sin el html? Pide solo el texto: var txt = $('#editor').html().text();//valor del div en texto. Prueba a ver ;)
    – santiakus
    el 16 sep. 2018 a las 1:34

1 respuesta 1

0

Bueno como en tu comentario me estas diciendo que usas Jquery te muestro como podrias obtener su valor:

$("#textarea").on("keyup", (e) => {

  var textDiv = $(e.target).val();
  $("#editor").html("").append(textDiv);

});
.editor{
border:1px solid;
height:150px;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<h3>Tipea para ir mostrandolo en el div</h3>
<textarea id="textarea"></textarea>

<h3>Div editable</h3>
<div id="editor" class="editor" contenteditable></div>

Si te fijas si quieres obtener el texto usas el .text() o si es el contenido html usas .html(), en el evento click que hice es donde tu haces tu ajax pero la idea de obtener los valores alli la tienes, luego tu base de datos dependiendo de cual sea usaria un tipo de dato para que te deje guardar grandes cantidades de texto el html, en oracle por ejemplo el tipo de dato del campo seria BLOB, espero te sirva.

8
  • Gracias @DavidLeonardoMolinaRuizDav disculpa También puedo reemplazar el button por un textarea o no.
    – Stevin
    el 15 sep. 2018 a las 16:51
  • Quieres el textare para sustraer su contenido al div o viceversa? el 15 sep. 2018 a las 17:28
  • cuando no se activan los plugin js no se muestra el editor con sus botones etc solo muestra un simple textarea, ese mismo textarea permanece enmascarado se podría decir porque todo lo que se escribe en ese div, el textarea recibe o guarda esos datos. No sé exactamente como funciona, no sé si me comprendes de que editor habló, es uno similar al que escribes tus preguntas o respuestas aquí solo que yo lo estoy realizando de manera más optimizada y simple sin plugin de terceros.
    – Stevin
    el 15 sep. 2018 a las 20:19
  • Actualice mi respuesta con un textarea, alli el textarea recibe el valor que capture del div, ahora si el flujo es inverso primero captura el valor del textarea y luego lo setas al div. @Stevin el 16 sep. 2018 a las 1:47
  • Se acerca a lo que tenía en mente, pero en el textarea debe recibir todo el código HTML generado en el div editable, se recuerda que es un editor, por lo tanto los datos a ingresar a la base de datos debe insertarse con el código HTML que el editor haya añadido, esa parte lo he solucionado de la siguiente manera jsfiddle.net/02fvzn5b/11 pero no cumple con las funciones deseadas, entiendo que los botones que has agregado es parte de demostración del ejemplo dado, pero yo necesito que esos datos se pases automáticamente al mismo tiempo
    – Stevin
    el 18 sep. 2018 a las 13:04

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.