Rails에서 text_area에 입력한 문장을 줄 바꾸기로 표시하는 방법
입문
Ruby on Rails에서 투고 기능이 있는 어플리케이션을 만들었습니다.
투고 화면에서 Rails의 도우미로 사용되는form_with 방법으로 표를 실현합니다.이때, text_area에서는 여러 줄을 입력할 수 있는 입력란을 만들었기 때문에 줄 바꾸기를 포함하는 문장을 입력하고, 표시하려고 할 때 줄 바꾸기가 없는 문장을 표시합니다.
이번에 그 문제를 해결하는 방법을 조사해서 기사에 남겼어요.
환경
macOS Catalina 버전 10.15.7
Ruby 2.6.5
Ruby on Rails 6.0.3.4
전제로 삼다
표의 코드는 다음과 같다.
app/views/shared/_form.html.erb<%= form_with(model: word, local: true) do |f| %>
<%= f.text_area :remarks, placeholder: "備考", rows: "7" %>
<%= f.submit "Register" %>
<% end %>
신중을 기하기 위해서, 우리는 Rails의 디버그 도구인 pry-rails를 사용하여 이 폼에서 보낸 데이터에 줄 바꿈이 포함되어 있는지 확인했습니다.
우선, 표로 다음과 같은 줄 바꾸기를 포함하는 글을 보냈다.おはよう
こんにちは
여기, 컨트롤러에 binding을 기술합니다.pry에서 잠시 처리를 멈추기 때문에 컨트롤러에서 파라미터를 실행하고 보내는 파라미터를 확인한 후
이와 같이 줄 바꿈 섹션에는 데이터로 전송되는 줄 바꿈 코드 "\r\n"이 포함되어 있습니다.
그리고 전송된 데이터를 표시하는 코드는 다음과 같습니다.
app/views/show.html.erb<%= @word.remarks %>
이렇게 하면 줄 바꾸기가 포함되지 않습니다. 아래와 같이 표시됩니다.おはよう こんにちは
이 문제를 해결하는 방법은 다음과 같은 두 가지를 총결하였다.
①simple_포맷 방법
아래 사이트를 참고했습니다.
macOS Catalina 버전 10.15.7
Ruby 2.6.5
Ruby on Rails 6.0.3.4
전제로 삼다
표의 코드는 다음과 같다.
app/views/shared/_form.html.erb<%= form_with(model: word, local: true) do |f| %>
<%= f.text_area :remarks, placeholder: "備考", rows: "7" %>
<%= f.submit "Register" %>
<% end %>
신중을 기하기 위해서, 우리는 Rails의 디버그 도구인 pry-rails를 사용하여 이 폼에서 보낸 데이터에 줄 바꿈이 포함되어 있는지 확인했습니다.
우선, 표로 다음과 같은 줄 바꾸기를 포함하는 글을 보냈다.おはよう
こんにちは
여기, 컨트롤러에 binding을 기술합니다.pry에서 잠시 처리를 멈추기 때문에 컨트롤러에서 파라미터를 실행하고 보내는 파라미터를 확인한 후
이와 같이 줄 바꿈 섹션에는 데이터로 전송되는 줄 바꿈 코드 "\r\n"이 포함되어 있습니다.
그리고 전송된 데이터를 표시하는 코드는 다음과 같습니다.
app/views/show.html.erb<%= @word.remarks %>
이렇게 하면 줄 바꾸기가 포함되지 않습니다. 아래와 같이 표시됩니다.おはよう こんにちは
이 문제를 해결하는 방법은 다음과 같은 두 가지를 총결하였다.
①simple_포맷 방법
아래 사이트를 참고했습니다.
<%= form_with(model: word, local: true) do |f| %>
<%= f.text_area :remarks, placeholder: "備考", rows: "7" %>
<%= f.submit "Register" %>
<% end %>
おはよう
こんにちは
<%= @word.remarks %>
おはよう こんにちは
아래 사이트를 참고했습니다.
로 묶습니다
app/views/show.html.erb
<%= simple_format(@word.remarks) %>
그리고 브라우저를 업데이트해서 다시 확인하면おはよう
こんにちは
이렇게 줄을 바꿨더니 떴어!Chrome 개발자 도구의 요소 패널 보기
확실히, 문자열은 p 표시에 묶여 있고, 줄 바꾸기는 Br 표시를 부여받았다.
그래서 우리는 다음과 같은 몇 가지 연속적인 줄 바꿈 상황을 조사해 보았다.
おはよう
こんにちは
단, 표시 확인 후おはよう
こんにちは
따라서 연속 줄 바꿈은 실제 입력한 대로 표시되지 않습니다.참고로 Elements 패널을 확인한 후 다음과 같이 p 태그가 부여되었습니다.
따라서 이 경우 줄을 바꾸는 것이 아니라'좋은 아침'과'안녕하세요'를 각각 한 단락으로 표시한다.
②safe_조인 방법
아래 사이트를 참고했습니다.
simple_format과 달리 p 표시로 묶는 것이 아니라 연속적인 줄 바꾸기 문자를 표시할 수 있습니다.
우선, 방금의 서술을 다음과 같이 개작한다.
app/views/show.html.erb
<%= safe_join(@word.remarks.split("\n"),tag(:br)) %>
※ split은 문자열을 분할하는 방법입니다.매개변수에 구분자를 지정하여 구분자에서 문자열을 구분합니다.그리고 연속적으로 줄을 바꾸는 문장을 여러 개 입력해 보세요
おはよう
こんにちは
제대로 입력한 그런 표시가 됐다!!요소 패널을 확인한 후
Br 표시는 줄을 바꾼다는 것을 나타낸다.
마지막
각종 조사에서 HTML, 라벨, 전의적 처리 등의 보도를 보았다.이러한 이해를 깊이 있게 하는 동시에 모르는 지식을 접할 기회도 많기 때문에 저는 더욱 파생되고 지식을 깊이 있게 하고 싶습니다.
잘못된 점이 있으면 지적해 주세요.
Reference
이 문제에 관하여(Rails에서 text_area에 입력한 문장을 줄 바꾸기로 표시하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/zooootech/items/d0b05713e1bef490325f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Rails에서 text_area에 입력한 문장을 줄 바꾸기로 표시하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/zooootech/items/d0b05713e1bef490325f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)