jquery - son - Tratar con saltos de línea en el contenido. Editable DIV

en html, onblur y onfocus son:

Question

Tengo un problema con saltos de línea contenteditable en SAFARI / CHROME. Cuando presiono "regresar" en un contenido editable <div> , en lugar de crear un <br> (como Firefox), crean un nuevo <div> :

<div>Something</div>
<div>Something</div>

Eso parece (en el contentEditable DIV):

Something
Something

Pero después del saneamiento (eliminando <div> ), obtengo esto:

SomethingSomething

En Firefox, el contenteditable es:

Something
<br>
Something

Y que después del saneamiento se ve igual:

Something
Something

¿Hay alguna solución para "normalizar" esto en todos los navegadores?

He encontrado este código en Crear un archivo en lugar de <div> </div> al presionar Intro en un modificable.

$(function(){

  $("#editable")

  // make sure br is always the lastChild of contenteditable
  .live("keyup mouseup", function(){
    if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
      this.appendChild(document.createChild("br"));
     }
  })

  // use br instead of div div
  .live("keypress", function(e){
    if (e.which == 13) {
      if (window.getSelection) {
        var selection = window.getSelection(),
          range = selection.getRangeAt(0),
          br = document.createElement("br");
        range.deleteContents();
        range.insertNode(br);
        range.setStartAfter(br);
        range.setEndAfter(br);
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);
        return false;
      }
    }
  });
});

Esto funciona, pero (en SAFARI y CHROME) tengo que presionar dos veces la tecla "regresar" para obtener una nueva línea ...

¿Alguna idea?

Edición : con el código que encontré (en la parte inferior de esta pregunta) funciona bien, excepto la función que "hace que un elemento <br> sea ​​siempre el últimoChild ... ¿Alguna idea de cómo solucionarlo?

Edición 2: Recibo este error en la consola: No se Uncaught TypeError: Object #<HTMLDocument> has no method ''createChild'' el error de tipo Uncaught TypeError: Object #<HTMLDocument> has no method ''createChild''

Edición 3: Ok, cambié el document.createChild("br"); to document.createElement("br"); y creo que lo conseguí trabajando en FF / Safari / Chrome ... Todo devuelto <br> para nuevas líneas ...

El problema ahora es que cuando estoy dentro de una lista ordenada o desordenada, necesito obtener una nueva línea sin ...

Edición 4: si alguien está interesado en la solución de la última edición: evite la función createElement si está dentro de un elemento <LI> (contentEditable)

Answer 1

Es posible que desee revisar la propiedad de white-space css. Configuración del estilo en white-space: pre-wrap en white-space: pre-wrap el ajuste white-space: pre-wrap permite deshacerse de todo ese javascript, ya que cambia el comportamiento de los espacios en blanco para mostrar en lugar de colapsar.

Y vea esta respuesta: HTML - Newline char en contenido DIV editable?

Answer 2

Escuchar pulsaciones de teclas parece ser mucho trabajo. Sería algo tan simple como esto factible:

var html = $(''.content'').html().replace(/<div>/gi,''<br>'').replace(/<//div>/gi,'''');

Demostración de JSFiddle here .

Además, parece que github.com/gbirke/Sanitize.js permite una configuración personalizada. ¿Has intentado añadir div como un elemento permitido?

Permitir HTML / CSS es peligroso, así que asegúrate de ser extremadamente cauteloso.

EDITAR: Se eliminaron los comentarios del lado del servidor. La desinfección se produce en el momento del uso; si el cliente desea omitir esto localmente, puede hacerlo bajo su propio riesgo. Gracias Vincent McNabb por señalar esto.

Answer 3

Esta técnica parece evitar el error de Chrome que muestra BRs la primera vez (con el código que mencionaste necesitas presionar dos veces la tecla Enter).

No es un hack perfecto, pero funciona: agrega un espacio en blanco después de tu BR para que se muestre correctamente. Sin embargo, verá que agregar solo un espacio en blanco "" NO cambiará nada, funciona con otras letras. El navegador no lo mostrará, probablemente porque es como un espacio en blanco dentro de una página html, simplemente no significa nada. Para deshacerme de ese error, creé un div con jQuery que incluye un   etiqueta, y tomo la propiedad text() para ponerla en el nodo de texto, de lo contrario no funciona.

$editables = $(''[contenteditable=true]'');

$editables.filter("p,span").on(''keypress'',function(e){
 if(e.keyCode==13){ //enter && shift

  e.preventDefault(); //Prevent default browser behavior
  if (window.getSelection) {
      var selection = window.getSelection(),
          range = selection.getRangeAt(0),
          br = document.createElement("br"),
          textNode = document.createTextNode("/u00a0"); //Passing " " directly will not end up being shown correctly
      range.deleteContents();//required or not?
      range.insertNode(br);
      range.collapse(false);
      range.insertNode(textNode);
      range.selectNodeContents(textNode);

      selection.removeAllRanges();
      selection.addRange(range);
      return false;
  }

   }
});

Answer 4

Los Webkits no generarán un solo br si es el último hijo (no vacío) de un contenedor. Para Safari, la combinación de teclas nativa para insertar un salto de línea es Ctrl + Return. Si observas detenidamente, observas que Safari en realidad inserta dos br s mientras que solo muestra una; sin embargo, insertará un solo br si hay un texto al final, o se eliminará el doble de br s una vez que ingrese un poco (si hubiera dobles).

Aparentemente, parece que una solución para Webkits es insertar dobles brechas como ellos mismos, y dejar que se encarguen del resto.

Answer 5

Simplemente puede usar el siguiente comando document.execCommand(''insertHTML'',false,''<br>'');

Este comando evitará el comportamiento predeterminado y agregará la etiqueta que desee. Eso es todo, 1 línea de código

Y aún más fácil enfoque.

CSS SOLAMENTE.

A su elemento contenteditable aplique display:inline-block rule y esto agregará solo br s

Answer 6

ver este Fiddle

O este post

Cómo analizar el texto editable del DIV con la compatibilidad del navegador