Rails - After setting up TinyMCE rails gem, text-area box re-size issue

Question

My goal is to set up User Interface Text Editor above a text area. I drew inspiration from Stack Overflow, who also utilizes this technique.

I just installed the TinyMCE gem for Rails.

In compliance with TinyMCE documentation, I created a config/tinymce.yml file

toolbar:
  - styleselect | bold italic | link image | undo redo
  - table | fullscreen
plugins:
  - table
  - fullscreen

In application.js, I added this line

//= require tinymce

This is the part that confused me. I set up code like this

<p>
  <%= f.label :body, class: 'marker' %>
  <%= f.text_area :body, :class => "tinymce", :rows => "15" %>
  <%= tinymce %>
</p>

According to the documentation, I was supposed to do this

<%= f.text_area :content, :class => "tinymce", :rows => 40, :cols => 120 %>

Then invoke the tinymce helper to initialize TinyMCE:

<%= tinymce %>

I assumed that they meant I was supposed to put line beneath the f.text_area line.

I figured it would be more polite to ask this here on Stack Overflow, instead of bombarding them with issues.

Edit

Looks like I managed to get it to work on my own, but I have another problem. The text-area box now takes up the whole width of the page, whereas I specified my text-area element to have a width of 500px.

I think the problem lies with CSS so I'm going to see if I can tackle that

Answer 1

Yeah TinyMCE is the way to go.

There is a easy to use gem

gem 'tinymce-rails'

They have good instructions on how to use and install on there github page https://github.com/spohlenz/tinymce-rails

Answer 2

The height and width of the tinymce editor box can be specified for tinymce-rails in the tinymce.yml file as follows:

width: 600
height: 200
toolbar:
  - styleselect | bold italic | undo redo | alignleft aligncenter alignright
plugins:
  - image
  - link