I am building a simple Rails blog, using a text field to write posts like this:
<p>
<%= f.label :content %>
<%= f.text_field :content, :size=>"50" %>
</p>
How can I style/format the output from this? When i submit a post and look at the developer tools in Chrome, the text is not added to a paragraph element so I don't know how to style it..
After submitting the form, the rails default is to load the model's show.html.erb template. Edit that template to change it structurally or apply CSS to the elements therein.
Related
I have a list of commentable models in my Rails view, represented by cards that each have their own comment form. The forms are identical (from the same partial), and have a rich_text_area for the commentable's body (defined as has_rich_text :body on the model, per the docs). It is close to the following (simplified) example:
<% #assignables.each do |assignables| %>
<!-- omitted code displaying the assignable object -->
<!-- ADD COMMENT FORM -->
<%= form_with model: Comment.new do |form| %>
<div class="">
<%= form.hidden_field :commentable_id, value: assignable.id %>
<%= form.hidden_field :commentable_type, value: assignable.class.name %>
<%= form.rich_text_area :body, data: { controller: "mentions" } %>
<%= form.submit "Submit", class: "button button-primary" %>
</div>
<% end %>
<% end %>
Only the first form on the page (in DOM order) actually submits a body parameter. Network requests from any other form shows a blank comment[body] parameter. Additionally, if I add text to the 2nd form's input, then go back and submit the first form without touching it, the submission includes the input I entered into the 2nd form.
From this, I understand I need to override some attribute which is supposed to be unique. I've scoured the Rails docs and the Trix docs, but I haven't found anything which indicates how to make Rails do this override such that Trix accepts it.
What attribute do I override, and how?
Turns out, the answer is simple: override the id attribute of the rich text area to include a unique value like a primary key, and Rails handles the rest.
E.g.:
<%= form.rich_text_area :body, data: { controller: "mentions" },
id: "commentable_#{commentable.id}_comment" %>
Translates to:
<form …>
<input id="commentable_1_comment" value="Editor content goes here" type="hidden" name="content">
<trix-editor input="commentable_1_comment"></trix-editor>
</form>
Now every instance of the text area has a unique ID (rather than the generic new_comment) and the hidden inputs all submit their values correctly.
For reference: The Trix documentation show what the HTML is supposed to look like at the after ERB is done with it, but the Rails rich_text_area docs don't indicate anything about attributes you might want to override.
I'm using Rails 3.2.22 and simple_form 2.1.3
Some of our fields have duplicate checking and the error includes a link to the duplicated record (so the user can check if it's just the name that's duplicated, or if they don't need to create the record).
However, we've recently switched from a customised form builder to Simple Form, and now these error messages are escaped, displaying the escaped error.
I reproduced this issue in a minimal app:
In the Doohickey model:
validate :unique_name_validation
def unique_name_validation
other_doohickey = Doohickey.find_by_name(name)
if other_doohickey
errors.add(
:name,
"This name is already taken by <a href='/doohickey/#{other_doohickey.id}'>#{other_doohickey.name}</a>"
)
end
end
In the UI:
<%= simple_form_for #doohickey do |form| %>
<%= form.input :name %>
<%= form.button :submit %>
<% end %>
The UI shows the HTML on the page itself...
There's also some configuration in /config/initializers.rb, but I haven't found a way there to turn off this escaping.
How can I display links from errors using Simple Form?
Bearing in mind the content won't never be nil, then you can use html_safe, like:
"This name is already taken by <a href='/doohickey/#{other_doohickey.id}'>#{other_doohickey.name}</a>".html_safe
I'm a new to Formtastic here. How do I go about styling Formtastic elements? By default, the labels beside my form elements are colored white. Is this normal or is it because I don't have a formtastic.css in my stylesheets folder?
I was able to figure it out myself.
In my zsh shell in the directory for my Rails app, I ran rails generate formtastic:install.
I also put in the requisite requires in my application.css.scss file:
*= require formtastic
*= require my_formtastic_changes
Following this, I just created a my_formtastic_changes.css.scss file in my stylesheets directory and implemented the following bit.
<%= semantic_form_for #section do |f| %>
<%= f.inputs do %>
<div id="section-details">
<%= f.input :name %>
<%= f.input :category %>
<%= f.input :description %>
<%= f.input :filepath %>
<%= f.input :site_section_id %>
</div>
<% end %>
I just then styled it in the my_formtastic_changes.scss with this:
#section-details label {
color: #000;
}
There is hardly anything special about styling Formtastic elements. You have to identify them in some CSS (or preferably SCSS nowadays) file and style it to your likings. Your favorite browsers Element info context menu will be very helpful in figuring out why an element is formatted the way it is.
If you desire a more specifc answer you should post the code of your Formtastic form together with the resulting HTML and a description of the label format you desire.
I just implemented http://xing.github.com/wysihtml5/ in my Post model's form:
_form.html.erb:
<div class="field">
<%= render 'shared/toolbar' %>
<%= f.text_area :content, id: "wysihtml5-textarea", placeHolder: "Content" %>
</div>
show.html.erb:
<span class="post-content">
<%= #post.content %>
</span>
What's the best and safest way of displaying results of the wysiwyg editor?
(Right now the output looks like this):
text <i>editor</i> <b>test</b> text <u>editor</u> test text editor test
(Not sure if I need too much security, since it only have the <i><b><u> tags. In that case, should I just use raw or escape?)
Be careful to HTML insertion! Take a look to the sanitize gem
And of course, use raw to display your sanitized html:
<%= raw #post.content %>
I do it like this:
<%= raw #post.content %>
But do you trust your users? Since they can also insert HTML (as I see from the demo) I'd say not to.
I am a rails n00b.
I want to use tinyMCE instead of a textarea that got created automatically via scaffolding.
so Im using tinyMCE hammer. the scaffolding automatically created this line
<%= f.text_area :descripcion %>
and I substituted it with
<%= tinymce(:descripcion) %>
When I load the view it looks just fine but when I try to submit the descripcion field of my model object is null.... help please
You need to keep the f. if you're in a form_for block:
<%= f.tinymce :descripcion %>