使用 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 => :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”事件并将新行转换为<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.
【讨论】:
我发现 .html_safe 在内容 (v) 为 nil 时会抛出错误,因此我对其进行了测试:display_with => 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
替换为<br>
并且用户选择进行更多修改,则用户将仅在一行中看到所有文本,从而难以阅读和编辑。
根据上面的答案,我提出了这个解决方案,成功后会删除任何\r
。
$('.best_in_place').bind('ajax:success', function()
if ($(this).attr('data-type') == 'textarea')
this.innerHTML = this.innerHTML.replace(/\r/g, '')
);
这样可以确保不显示多余的行。此方案的优点是,如果用户选择再次编辑该字段,一切都会像以前一样显示。
【讨论】:
【参考方案4】:我认为这里的答案都有效。这只是另一种选择。您可以在 <pre>
标记之间添加 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 上编辑后新行丢失的主要内容,如果未能解决你的问题,请参考以下文章