TinyMCE: using maxchars plugin in Rails - ruby-on-rails

I've got a Rails app that is using TinyMCE, via the TinyMCE-Rails gem. I'm trying to use the maxchars plugin to get word count going. I've added the plugin to config/tinymce.yml
plugins:
- fullscreen
- maxchars
And I've added the max_chars and max_chars_indicators to my view.
<%= simple_form_for #project |f| %>
<%= f.input :overview, input_html: { :class => "tinymce", :rows => 70, :cols => 140 } %>
<%= tinymce max_chars: 6000, max_chars_indicator: "characterCounter" %>
<div id="characterCounter">
</div>
<div class="form-actions add-top">
<hr>
<p>
<%= f.button :submit, :class => 'inline-block large_button add-bottom' %>
</p>
</div>
<% end %>
But now the editor doesn't even appear. Is there something I'm missing when it comes to adding this plugin?

Complex solution for this problem: had to actually read the documentation! (Outrageous, right?!)
I had neglected to actually download the plugin files. I created a directory, app/assets/javascripts/tinymce/plugins/ and popped in the folder containing the necessary JS files. Once I started my server, everything worked great.

Related

How to integrate ckeditor to spree admin

I am new to spree and ckeditor integration.
I want to integrate ckeditor to the spree admin. I could configure ckeditor correctly with rails_admin section of my website (following the steps in https://github.com/galetahub/ckeditor), but now i want to add it to a field in the product edition page in the spree admin
The field is:
<div data-hook="admin_product_form_description">
<%= f.field_container :description, class: ['form-group'] do %>
<%= f.label :description, Spree.t(:description) %>
<%= f.text_area :description, { rows: "#{unless #product.has_variants? then '20' else '13' end}", class: 'form-control' } %>
<%= f.error_message_on :description %>
<% end %>
</div>
I changed f.text_area to f.cktext_area but it didn't work...
Do you have any experience with this matter ?
Thanks!
I finally found the trick.
You have to load the ckeditor javascript for the spree admin views.
For that add to spree_backend-3.0.0/app/views/spree/admin/shared/_head.html.erb (Via Deface or Override) the following line.
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
And then simply you change your text area form f.text_area to f.cktext_area
Obviously, you have to follow before the steps to integrate ckeditor to your project. (https://github.com/galetahub/ckeditor)

Error: Syntax - Html to RoR

I have a _form and in this _form I am putting one icon in front some fields.
I want wich when mouse hovers over it, it displays a tooltip. The text is there in translate file:
..
t('messages.issue_tittle_placeholder')
..
I can do this using only html, but I want do this using RoR.
<div class="clearfix">
<%= f.label :title %>
<div class="icon-question_enabled" rel="tooltip"
title="Keaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa">
</div>
I tried to this:
<%= f.label :title %>
<%= image_tag('icons/question_enabled.png', class=> "tooltip-help") %>
Someone can help me?
Sorry for my english.
According to your html snippet, your icon is just a <div> with a css class that has a sprite background instead of an <img>. You should do:
<%= f.label :title %>
<%= content_tag(:div, nil, class: 'icon-question_enabled', rel: :tooltip, title: "Keaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa") %>
Your syntax is off. For > Ruby 1.9 it should be:
<%= image_tag('icons/question_enabled.png', class: "tooltip-help") %>
else < 1.8
<%= image_tag('icons/question_enabled.png', :class => "tooltip-help") %>

How to make Rails app perform an action depending on if a checkbox is checked? (RoR)

I have a checkbox in a view called post_form.html.erb that someone uses to post. Here's the full code of it below:
<%= form_for #post, :html => {:multipart => true} do |f| %>
<%= render 'shared/error_messages', object: #post %>
<div class="field">
<%= f.text_area :content, :cols => 5, :rows => 5 %>
</div>
<div class="ItemContainer">
<div class="ItemInput">Add your photo:<br>
<%= f.file_field :image %>
</div><div class="ItemCheckbox">
<label for="a">Run script?</label>
<div class="ItemCheckboxAlign"><input type="checkbox" id="a"></div>
</div></div><br>
<%= f.submit "Post", class: "btn btn-large btn-primary" %>
<% end %>
The above is used to post and I use show.html.erb for the view.
As you can see in the above code, there's a checkbox during the posting process. I want it so that if the checkbox is checked, certain action happens in my show.html.erb view (running a script in this case). If it's not checked, then I don't want to run the script.
Is the best method to store the boolean information on whether the checkbox was checked in the database? My question is, what's the RoR code to make the checkbox associate with the table value?
You're going to want to use jQuery for that:
$('#a').click(function() {
$('#text').toggle();
});
use
$('#check_box_id').is(":checked")
to check if the checkbox is checked or not.

Nested_form, link_to_add ... three times

I have a problem with my nested_form, now when I click on my link_to_add button, three forms are displayed... It is the same for all my nested forms and this is new. I really don't know the reason, any idea ?
My code :
<div id="new_upload">
<%= f.fields_for :uploads do |file| %>
<%= file.label :filename, 'Nom pièce jointe :'%>
<%= file.text_field :name, :size => "19", :id=>"field" %>
<%= file.file_field :file if file.object.new_record? %>
<%= file.link_to_remove "Supprimer" %>
<% end %>
</div>
<%= f.link_to_add "Ajouter pièce jointe", :uploads, :class=>"btn" %>
</div>
This issue is linked with Rails 4 and Turbolinks. See https://github.com/ryanb/nested_form/issues/307 for instance.
You should be able to add data-no-turbolinks to your div to locally disable turbolinks.
With me it was because the application.js was called in the body instead of head. Duh! See https://github.com/ryanb/nested_form/issues/286

How do I change the html tag and class generated by fields_for?

This is a simple question that I'm kinda ashamed to ask, but I've been banging my head against the wall and navigating through the rails 3 documentation without any success :/
So, here is the thing:
When I use the fields_for helper it wraps the generated fields in a <div class="fields"> ... </div> tag.
so, my code is
<ul class="block-grid two-up">
<%= f.fields_for :images do |image_builder| %>
<%= render "images/form", :f => image_builder %>
<% end %>
</ul>
and the generated html is:
<ul class="block-grid two-up">
<div class="fields">
<div>
<label for="company_images_attributes_0_image"> Image</label>
<input id="company_images_attributes_0_image"
name="company[images_attributes][0][image]" type="file">
</div>
</div>
<div class="fields">
<div>
<label for="company_images_attributes_1_image"> Image</label>
<input id="company_images_attributes_1_image"
name="company[images_attributes][1][image]" type="file">
</div>
</div>
</ul>
What I want to do is actually change the <div class="fields"> wrapper tag to <li>.
The documentation says you can pass options to the fields_for, but its not clear about what options you can pass, maybe you can change this wrapper tag?
A possibility could be to override a function, kinda like ActionView::Base.field_error_proc when there is an error in the form.
Quick edit: I forgot to mention that I'm using simple_form to generate this form. I tried looking in the simple_form.rb config file for a way to customize this, but I didn't see any way of doing it.
Solution
After further investigation, it turns out the form was using the nested_form gem as well to generate the form (not only simple_form). This generator was causing the fields_for to be wrapped in the div tag. Thanks everybody for their suggestions!
The following disables the wrapper:
f.fields_for :images, wrapper:false do |image_builder|
then you can add your own wrapper in the builder block.
A cheap solution would be just adding <li> tag into the form like:
<%= f.fields_for :images do |image_builder| %>
<li><%= render "images/form", :f => image_builder %></li>
<% end %>
I am not sure if you can completely eliminate the div tag by passing some params to field_for. But I think you can change the name of div class or id by passing the html block, like in form_for:
<%= form_for #image, :as => :post, :url => post_image_path,
:html => { :class => "new_image", :id => "new_image" } do |f| %>
You said you're using simple_form then you should be saying <%= f.simple_fields_for... Have you tried using wrapper_html option:
<%= f.input :name, :label_html => { :class => 'upcase strong' },
:input_html => { :class => 'medium' }, :wrapper_html => { :class => 'grid_6 alpha' } %>
Edit 1:
From SimpleForm documentation:
Wrapper
SimpleForm allows you to add a wrapper which contains the label, error, hint and input. The first step is to configure a wrapper tag:
SimpleForm.wrapper_tag = :p
And now, you don't need to wrap your f.input calls anymore:
<%= simple_form_for #user do |f| %>
<%= f.input :username %>
<%= f.input :password %>
<%= f.button :submit %>
<% end %>
Edit 2:
And there is this config option with which you can say what css class to use with the wrapper elements:
config/initializers/simple_form.rb
# CSS class to add to all wrapper tags.
config.wrapper_class = :input

Resources