Rails - Resizing f.text_area and word wrap for Redactor Text Editor

Question

For my application, I am using Redactor Rails. Using form_for, my current input using redactor is as follows:

<%= f.text_area :content, label: "Blog Updates", :class => "redactor", :cols => 100, :rows => 100 %>

No matter what I do in :cols or :rows, nothing changes the width and column (i.e. :input_html, :cols =>'x', etc). I have also seen responses in posts such as this: Rails text_area size.

Question 1: How do I change the height and width of the text area? Is it possible to restrict it so it just scrolls down when there is more content than initial box size instead of having the box expand?

Also, if I were to type one long sentence with no break, then the box right now expands to the right beyond the screen until I press enter to go to the next line.

Question 2: Can I word-wrap the content inside the text editor so that the width is fixed and the text continues onto the next row if the one line is too long?

Thanks.

Jack Jack · Accepted Answer · 2013-06-30T21:48:18

I don't think the :cols and :rows do affect the Redactor box in any way, which is sad (or I'm doing something wrong). To change the height, you can use add a <div> and define the div in your .css file (Note that you must use "redactor_box"). Here's what worked for me:

This is my edit.html.erb:

<div class="redactor_box">
    <%= f.text_area :content, placeholder: "Blog entry goes here...", :class => "redactor"%>
</div>

This is my custom.css.scss:

.redactor_box {
    width: 600px;
}

You can change some of the box's behavior too. In the terminal, run:

rails generate redactor:config

This will create a config file called app\assets\redactor-rails\config.js. Now go to Redactor's website and find documentation. You can insert the key:value pairs into the app\assets\redactor-rails\config.js file.

This is what the file is like when it was freshly generated:

$(document).ready(
  function(){
  var csrf_token = $('meta[name=csrf-token]').attr('content');
  var csrf_param = $('meta[name=csrf-param]').attr('content');
  var params;
  if (csrf_param !== undefined && csrf_token !== undefined) {
    params = csrf_param + "=" + encodeURIComponent(csrf_token);
  }
  $('.redactor').redactor(
    { "imageUpload":"/redactor_rails/pictures?" + params,
      "imageGetJson":"/redactor_rails/pictures",
      "fileUpload":"/redactor_rails/documents?" + params,
      "fileGetJson":"/redactor_rails/documents",
      "path":"/assets/redactor-rails",
      "css":"style.css"
    }
  );
})

Now, simply add key:value pairs after "css":"style.css". For example, the below code will disable the box from expanding.

$(document).ready(
  function(){
  var csrf_token = $('meta[name=csrf-token]').attr('content');
  var csrf_param = $('meta[name=csrf-param]').attr('content');
  var params;
  if (csrf_param !== undefined && csrf_token !== undefined) {
    params = csrf_param + "=" + encodeURIComponent(csrf_token);
  }
  $('.redactor').redactor(
    { "imageUpload":"/redactor_rails/pictures?" + params,
      "imageGetJson":"/redactor_rails/pictures",
      "fileUpload":"/redactor_rails/documents?" + params,
      "fileGetJson":"/redactor_rails/documents",
      "path":"/assets/redactor-rails",
      "css":"style.css",
      "autoresize":"false"
    }
  );
});

There are a bunch of other settings you can change. Just go to the documentation section on Redactor's website.

Rails - Resizing f.text_area and word wrap for Redactor Text Editor

2 Answers