11

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

我的对象的属性之一是 type 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）时，我仍然有同样的问题。

4

6 回答 6

7

我遇到了同样的问题，并通过绑定到 best_in_place 文档中描述的“ajax:success”事件并将新行转换为<br />'s.

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

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

我选择了 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.
于 2012-05-25T06:32:39.370 回答
4

找到了一个半有效的解决方案。

在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

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

于 2012-03-09T11:17:15.233 回答
1

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

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

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

这可确保不显示额外的行。此解决方案的优点是，如果用户选择再次编辑该字段，则所有内容都会像以前一样显示。

于 2012-11-06T20:17:46.527 回答
0

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

于 2017-02-10T11:00:20.657 回答
0

针对以下关于更新后行格式丢失的问题。经过一些实验，我得到了这个工作。这是一个名为“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;
    }
  }
}

咖啡脚本：

# 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
于 2017-08-28T15:58:41.843 回答
0

这对我有用。

  $('.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)
});
于 2017-10-24T15:47:21.997 回答