使用Rails的寶石「best_in_place」內置編輯 - 錯誤：新行上textarea的

Question

編輯後，我使用best_in_place寶石做的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

我有同樣的問題，並通過結合「AJAX：成功」解決了其作爲best_in_place documentation描述的事件和轉換新的生產線，以<br />的。

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

您也可以選擇使用輕量級標記語言（如紡織品或降價）而不是簡單的換行符。這些Javascript轉換器可以找到here (textile)和here (markdown)。

我與紡織去，因爲我可以只使用textilize方法best_in_place的display_with選項。

更新的javascript：

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

另外，如果你只想在best_in_place文字區域這個行爲，你可以檢查數據類型屬性：

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

它按預期工作。幾乎。
唯一剩下的問題：當你編輯的文本，你從沒有重點textarea的，新線再次丟失了。如果刷新頁面，則會再次正確顯示。

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

針對以下問題，有關更新後丟失行格式的問題。經過一些實驗，我得到了這個工作。這是一個稱爲「註釋」的字段的示例，該字段用作textarea並作爲類型文本存儲在數據庫中。

形式：

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) 
});