Edición en línea con la gema de Rails 'best_in_place' - error: se pierden nuevas líneas después de la edición en textarea

Question

Estoy usando best_in_place gema para hacer algunas modificaciones en línea en una aplicación de Rails.

Una de las propiedades de mi objeto es de tipo text, y yo quiero que sea editado en un área de texto, por lo que hizo esto:

<%= best_in_place @myobject, :description, :type => :textarea %> 

Funciona, pero cuando no se está editando, todo las devoluciones (\ n) se eliminan.

He intentado utilizar simple_format, añadiendo :display_with => :simple_format a las opciones introducidas a best_in_place:

<%= best_in_place @myobject, :description, :type => :textarea, :display_with => :simple_format %> 

Cuando no se está editando, las nuevas líneas se muestran como se esperaba. Pero el clic para entrar en la edición está roto, y un nuevo guión se agrega arriba. Al hacer clic en él, aparece un cuadro de texto, pero está vacío y el texto ingresado allí no se guarda en mi objeto.

El contenido guardado en mi propiedad es simplemente texto, no contiene ningún html.

---

Esta cuestión (y el parche) parecía relacionado con mi problema: https://github.com/bernat/best_in_place/pull/111
Sin embargo, al aplicar el parche (de forma manual, en el fichero de .../gems/best_in_place-1.0.6/spec/spec_helper.rb), todavía tengo el mismo problema.

Answer 1

Tuve el mismo problema y lo resolví vinculándolo al evento "ajax: success" como se describe en el best_in_place documentation y convirtiendo las nuevas líneas en <br />.

$('.best_in_place').bind('ajax:success', function(){ this.innerHTML = this.innerHTML.replace(/\n/g, '<br />') }); 

También puede optar por utilizar un lenguaje de marcado ligero como el textil o de reducción del precio en lugar de saltos de línea simples. Se pueden encontrar los convertidores de Javascript para estos here (textile) y here (markdown).

Fui con Textil ya que podía usar el método textilize en la opción display_with de best_in_place.

El javascript actualización:

$('.best_in_place').bind('ajax:success', function(){ $(this).JQtextile('textile', this.innerHTML) }); 

Además, si sólo se desea este comportamiento en las áreas de texto best_in_place puede comprobar si el atributo de tipo de datos:

$('.best_in_place').bind('ajax:success', function(){ 
    if ($(this).attr('data-type') == 'textarea') 
     $(this).JQtextile('textile', this.innerHTML) 
}); 

Por último, haga coincidir la conversión en el lado del servidor:

:display_with => lambda { |v| textilize(v).html_safe } // the RedCloth gem may be required. 

Answer 2

Encontré una solución que funcionaba a medias.

En show.html.erb:

<%= best_in_place @myobject, :description, :type => :textarea, :display_as => 'description_format' %> 

y en myobject.rb:

def description_format 
    self.description.gsub(/\n/, "<br>") 
end 

funciona como se esperaba. Casi.
El único problema restante: cuando edita el texto, después de desenfocarlo del área de texto, las líneas nuevas se pierden nuevamente. Si actualiza la página, se muestra correctamente de nuevo.

Answer 3

Si \n se reemplaza con <br> y el usuario elige hacer más modificaciones, el usuario verá todo el texto en una sola línea, por lo que es más difícil de leer y editar.

Basado en las respuestas anteriores, tomé esta solución, que elimina cualquier \r en caso de éxito.

$('.best_in_place').bind('ajax:success', function(){ 
    if ($(this).attr('data-type') == 'textarea') { 
     this.innerHTML = this.innerHTML.replace(/\r/g, '') 
    } 
}); 

Esto asegura que no se muestran líneas adicionales. La ventaja de esta solución es que si el usuario elige editar el campo nuevamente, todo se muestra como antes.

Answer 4

Creo que las respuestas aquí funcionan. Esta es solo otra alternativa. Puede agregar el campo best_in_place entre una etiqueta <pre> y se encargará de agregar las líneas. Por supuesto, se requerirán algunos cambios de formato y estilo, pero resuelve fácilmente el problema.

Answer 5

En respuesta a la pregunta siguiente sobre el formato de línea que se pierde después de una actualización. Después de un poco de experimentación, conseguí que esto funcione. Este es un ejemplo de un campo llamado "comentario" que se usa como área de texto y se almacena como texto tipo en la Base de datos.

En la forma:

div class: "single-spacing", id: "comment_div" do 
    best_in_place coursedate, :comment, as: :textarea, url: [:admin,coursedate], ok_button: "Uppdatera", cancel_button: "Cancel", class: "editable", 
    :display_with => lambda { |c| simple_format(c.gsub("<br />", ""), {}, sanitize: false) } 
end 

En el css:

.single-spacing { 
    ul br { 
    display: none; 
} 
    ol br { 
    display: none; 
} 
    div br { 
    display: none; 
    } 
h3 { 
    border-bottom: 1px dotted #e8e8e8; 
    padding-bottom: 15px; 
} 
blockquote { 
    border-color: #a7c2d9; 
    p { 
     font-size: 14px; 
     color: #777777; 
     line-height: 1.5; 
    } 
    } 
} 

CoffeeScript:

# refresh textarea bip on coursedate when edited to reload line breaks after update 
    $('#comment_div').bind 'ajax:success', -> 
    $('#comment_div').load(document.URL + ' #comment_div'); 
    return 

Answer 6

Esto hizo el truco para mí.

$('.best_in_place').bind 'ajax:success', -> 
    content = $(this).text().replace(/\n/g, "<br>") 
    $(this).html(content) 

o Jquery

$('.best_in_place').bind('ajax:success', function(){ 
    content = $(this).text().replace(/\n/g, "<br>") 
    $(this).html(content) 
});