使用 Rails gem 'best_in_place' 进行内联编辑 - 错误：在 textarea 上编辑后新行丢失

Question

我正在使用best_in_place gem 在 Rails 应用程序中进行一些内联​​编辑。

我的对象的属性之一是 text 类型，我希望它在文本区域中进行编辑，所以我这样做了：

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

它可以工作，但是当不被编辑时，所有返回 (\n) 都会被删除。

我尝试使用 simple_format，将 :display_with => :simple_format 添加到传递给 best_in_place 的选项中：

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

未编辑时，新行将按预期显示。但是点击进入版本被破坏了，并且在上面添加了一个新的破折号。单击它会显示一个 textarea 框，但它是空的，并且在那里输入的文本不会保存回我的对象​​。

我的属性中保存的内容只是纯文本，不包含任何html。

---

这个问题（和补丁）似乎与我的问题有关：https://github.com/bernat/best_in_place/pull/111
但是，当应用补丁（手动，到文件.../gems/best_in_place-1.0.6/spec/spec_helper.rb）时，我仍然遇到同样的问题。

Answer 1

我遇到了同样的问题，并通过绑定到best_in_place documentation 中描述的“ajax:success”事件并将新行转换为<br /> 来解决它。

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

您还可以选择使用轻量级标记语言，例如 Textile 或 Markdown，而不是简单的换行符。这些 Javascript 转换器可以在 here (textile) 和 here (markdown) 找到。

我选择 Textile，因为我可以在 best_in_place 的 display_with 选项中使用 textilize 方法。

更新的javascript：

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

另外，如果您只想在 best_in_place textareas 上出现这种行为，您可以检查 data-type 属性：

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

最后，匹配服务器端的转换：

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

Answer 2

找到了一个半途而废的解决方案。

在show.html.erb：

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

在myobject.rb:

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

它按预期工作。差不多。
唯一剩下的问题：当您编辑文本时，在您从文本区域中聚焦后，新行再次丢失。如果刷新页面，它会再次正确显示。

Answer 3

如果将\n 替换为<br> 并且用户选择进行更多修改，则用户将仅在一行中看到所有文本，从而难以阅读和编辑。

根据上面的答案，我提出了这个解决方案，成功后会删除任何\r。

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

这样可以确保不显示多余的行。此方案的优点是，如果用户选择再次编辑该字段，一切都会像以前一样显示。

Answer 4

我认为这里的答案都有效。这只是另一种选择。您可以在 <pre> 标记之间添加 best_in_place 字段，它将负责添加行。当然，需要对格式和样式进行一些更改，但这很容易解决手头的问题。

Answer 5

针对以下关于更新后行格式丢失的问题。经过一些实验，我得到了这个工作。这是一个名为“comment”的字段的示例，该字段用作文本区域并作为类型文本存储在数据库中。

形式：

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

在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

这对我有用。

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

或 Jquery

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