css - react - in html, onblur and onfocus are:

HTML-Newline char en contenido DIV editable?

Question

Estoy almacenando contenido en la base de datos, por ejemplo:

Hello
This
is 
Text

y cuando paso eso a un área de texto, se queda con los nuevos saltos de línea. Pero si paso ese texto a un div con contenido editable, quedaría así:

Hello This is Text

¿Como puedo solucionar este problema?

Answer 1

Establecer un estilo en el div: white-space: pre o white-space: pre-wrap

Ejemplo: http://jsfiddle.net/fPv6S/

Answer 2

Prueba esto......

var patt2 = new RegExp("<div>","g");
var patt3= new RegExp("</div>","g");
var patt4= new RegExp("<br>","g");
var z=x.replace(patt2,"/n").replace(patt3,"").replace(patt4,"");

Eso lo hará ...

Answer 3

Puede buscar y reemplazar nuevas líneas con <br /> . http://jsfiddle.net/fPv6S/1/

Answer 4

Para agregar alguna información sobre responda correctamente y extraiga información de developer.mozilla.org/en-US/docs/Web/CSS/white-space :

El atributo de white-space CSS está para ayudarlo:

pre:

white-space: pre

Secuencias del espacio en blanco se conservan. Las líneas solo se dividen en caracteres de nueva línea en la fuente y en los elementos.

¡Esto podría provocar barras de desplazamiento horizontales no deseadas como se muestra en el ejemplo!

envoltura previa:

white-space: pre-wrap

Secuencias del espacio en blanco se conservan. Las líneas se rompen en caracteres de nueva línea, en <br> y según sea necesario para llenar recuadros de línea.

Como ceremcem señaló que los saltos de línea al final del recuadro no se transferirán cuando el texto se copie, lo cual tiene sentido ya que estos saltos de línea no son parte del formato del texto sino de la apariencia visual.

prelínea:

white-space: pre-line

Las secuencias de espacios en blanco se colapsaron . Las líneas se rompen en caracteres de nueva línea, en <br> y según sea necesario para llenar recuadros de línea.

div{
  border: 1px solid #000;
    width:200px;
}
.pre {
    white-space: pre;
}
.pre-wrap{
   white-space: pre-wrap;
}
.pre-line{
   white-space: pre-line;
}

.inline-block{
    display:inline-block
}

<h2>
pre
</h2>
<div class="pre" contenteditable=true>Lorem ipsum dolor sit amet doesn''t have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-wrap
</h2>
<div class="pre-wrap" contenteditable=true>Lorem ipsum dolor sit amet doesn''t have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-line
</h2>
<div class="pre-line"  contenteditable=true>Lorem ipsum dolor sit amet doesn''t have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
Chrome FIX
</h2>
<div class="pre-line inline-block"  contenteditable=true>Lorem ipsum dolor sit amet doesn''t have a meaning but here comes 10 white spaces:____          ____</div>

EDITAR 14/08/2018:

En Chrome, es posible que tengas problemas: Al presionar Enter, se generará un nuevo <div> dentro de tu contenido. Para evitar eso, puede presionar Shift + Enter o establecer la display: inline con el <div> contenteditable como se ve en el violín.