web-dev-qa-db-fra.com

Rails 3: Comment afficher correctement le texte de "textarea"?

Dans mon application Rails 3, j'utilise textarea pour permettre aux utilisateurs d'écrire un nouveau message dans un forum.

Cependant, lorsque le message est affiché, toutes les nouvelles lignes ressemblent à des espaces (il n'y a pas de <br />). Peut-être y a-t-il d'autres exemples de mésappariement, je ne le sais pas encore.

Je me demande quel est le moyen le plus approprié de gérer cela.

Je suppose que le texte stocké dans la base de données est OK (je vois par exemple que < est converti en &lt;), le problème principal est donc la présentation.

Existe-t-il des méthodes d'assistance intégrées dans Rails pour cela?

( simple_format fait quelque chose qui ressemble à ce dont j'ai besoin, mais il ajoute des balises <p> que je ne veux pas voir apparaître.)

36
Misha Moroshko

Puisque simple_format ne fait pas ce que vous voulez , je créerais une méthode d'assistance simple pour convertir les nouvelles lignes en <br>s:

def nl2br(s)
  s.gsub(/\n/, '<br>')
end

Ensuite, dans votre vue, vous pouvez l'utiliser comme ceci:

<%= nl2br(h(@forum_post.message)) %>
27
Mischa

Vous pouvez utiliser style="white-space: pre-wrap;" dans la balise html entourant le texte. Cela respecte les sauts de ligne dans le texte.

34
efatsi

Si quelqu'un est toujours redirigé ici et utilise Rails 4: http://apidock.com/Rails/v4.0.2/ActionView/Helpers/TextHelper/simple_format

Vous pouvez maintenant spécifier la balise dans laquelle elle est enveloppée (par défaut, p) comme suit: 

simple_format(my_text, {}, wrapper_tag: "div")
# => "<div>Here is some basic text...\n<br />...with a line break.</div>"
8
Ayonix

Option CSS uniquement

Je crois que l’une des options les plus simples est d’utiliser css white-space: pre-line;

D'autres réponses ont également mentionné l'utilisation des espaces blancs, mais je pense qu'il faut un peu plus d'informations:

Dans la plupart des cas, vous devriez probablement choisir pre-line au lieu de pre-wrap. Voir la différence ici .

Il est très important de garder à l'esprit à propos de white-space que vous ne devriez pas faire quelque chose comme ceci:

<p style="white-space: pre-line;">
  <%= your.text %>
</p>

Cela produira des espaces supplémentaires et des sauts de ligne dans la sortie. Au lieu de cela, allez avec ceci:

<p style="white-space: pre-line;"><%= your.text %></p>

HTML alternative

Une autre méthode consiste à envelopper votre texte dans les balises <pre>. Et la dernière note sur mon option CSS est également vraie ici:

<p>
  <pre><%= your.text %></pre>
</p>

Ne séparez pas votre texte des balises <pre> avec des espaces ou des sauts de ligne.

Dernières pensées

Après avoir googlé un peu cette question, j’ai le sentiment que l’approche html est considérée comme moins propre que celle css et que nous devrions aller css-way. Cependant, html-way semble être plus compatible avec les navigateurs (supporte les navigateurs archaïques, mais on s'en fiche):

pré tag

espace-blanc

8
mizurnix

L'assistant suivant conserve les nouvelles lignes en tant que sauts de ligne et restitue tout code HTML ou Script (par exemple, Javscript) en texte brut. 

def with_new_lines(string)
   (h(string).gsub(/\n/, '<br/>')).html_safe
end

Utiliser comme tel dans les vues

<%= with_new_lines @object.some_text %>
3
cevaris

Je viens d'utiliser white-space: pre-line. Donc, la ligne suivante (\ n) le rendra.

3
BartSabayton

Vous aurez besoin de convertir le texte brut de textarea en HTML.

Au niveau le plus élémentaire, vous pouvez exécuter un remplacement de chaîne:

 message_content.gsub! /\n/, '<br />'

Vous pouvez également utiliser un format spécial tel que Markdown (bibliothèque Ruby: BlueCloth ) ou Textile (bibliothèque Ruby: RedCloth ).

2
Jon Gauthier

J'utilisais Ace code-editor dans mon application Rails et j'avais un problème: chaque fois que je mets à jour ou que je crée le code, cela ajoute toujours une tabulation supplémentaire sur chaque ligne (sauf la première). Je ne pouvais pas le résoudre avec gsub ou javascript replace .. Mais cela s'est résolu accidentellement lorsque j'ai désactivé la mise en page pour ce modèle. 

Donc, je l'ai résolu avec 

render :layout => false
0
mansim