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

Posted

技术标签:

【中文标题】使用 Rails gem \'best_in_place\' 进行内联编辑 - 错误:在 textarea 上编辑后新行丢失【英文标题】:Inline editing with Rails gem 'best_in_place' - bug: new lines are lost after edit on textarea使用 Rails gem 'best_in_place' 进行内联编辑 - 错误:在 textarea 上编辑后新行丢失 【发布时间】:2012-03-26 01:38:28 【问题描述】:

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

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

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

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

我尝试使用 simple_format,将 :display_with =&gt; :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)时,我仍然遇到同样的问题。

【问题讨论】:

【参考方案1】:

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

$('.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.

【讨论】:

我发现 .html_safe 在内容 (v) 为 nil 时会抛出错误,因此我对其进行了测试 :display_with =&gt; lambda |v| v.nil? ? '' : textilize(v).html_safe 【参考方案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

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

【讨论】:

【参考方案3】:

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

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

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

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

【讨论】:

【参考方案4】:

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

【讨论】:

【参考方案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

【讨论】:

【参考方案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)
);

【讨论】:

以上是关于使用 Rails gem 'best_in_place' 进行内联编辑 - 错误:在 textarea 上编辑后新行丢失的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Rails 视图助手提取到 gem 中?

在 Rails 中使用短语 gem 时内容未更新

Rails,使用 Role Model gem 检查角色

Rails 5:不推荐使用 `Gem.paths=` 参数中的数组值

使用Apartment gem的Rails多租户

Rails - 使用最合适的 gem 创建记录