16 Rich Text Editing With Bootsy

Rich-text editing with Bootsy

The textarea in our note form is pretty sad looking. It's also being used to author HTML markup, a task for which a textarea is less than ideal. Let's address both of those shortcomings by including a gem called Bootsy.

Bootsy is an HTML5-base WYSIWYG editor gem that makes use of Bootstrap styles. The reliance upon HTML5's features excludes Internet Explorer 8 and other older browsers. Other editors have larger communities and better browser support, and are more actively developed. You may want to consider the CKEditor gem for your projects.

Add Bootsy to your Gemfile and run bundle install.

Gemfile

gem 'bootsy'

$ bundle install

Next, run Bootsy's install generator.

$ bin/rails g bootsy:install

Among other things, the generator adds an initializer to your project. Edit the initializer to override Booty's default editor options. Uncomment the lines related to default editor options, and change them as follows:

/config/initializers/bootsy.rb

Bootsy.setup do |config|
  # Default editor options
  # You can override them locally by passing an editor_options hash to bootsy_area
  config.editor_options = {
    font_styles: false,
    emphasis: true,
    lists: true,
    html: true,
    link: true,
    image: false,
    color: false
  }

To use a Bootsy editor in place of a textarea, we simply replace the text_area helper with the bootsy_area helper.

<%= form_for @note do |f| %>
  <p>
    <%= f.text_field :title %>
  </p>
  <p>
    <%= f.bootsy_area :body_html %>
  </p>
  <div class="form-actions">
    <%= f.submit class: 'btn btn-default' %>
  </div>
<% end %>

HAML:

= form_for note do |f|
  %p
    = f.text_field :title, placeholder: t('note.placeholder.title')
  %p
    = f.bootsy_area :body_html, placeholder: t('note.placeholder.body')
  .form-actions
    = f.submit class: 'btn btn-default'

Don't forget to restart your server before checking it out in a browser. If you already restarted following bundle install, you'll need to do it again once you've edited the initializer.

Title placeholder and autofocus

Let's add placeholder text to both the title and body_html fields.

<%= form_for @note do |f| %>
  <p>
    <%= f.text_field :title, placeholder: t('note.placeholder.title') %>
  </p>
  <p>
    <%= f.bootsy_area :body_html, placeholder: t('note.placeholder.body') %>
  </p>
  <div class="form-actions">
    <%= f.submit class: 'btn btn-default' %>
  </div>
<% end %>

= form_for note do |f|
  %p
    = f.text_field :title, placeholder: t('note.placeholder.title')
  %p
    = f.bootsy_area :body_html, placeholder: t('note.placeholder.body')
  .form-actions
    = f.submit class: 'btn btn-default'

  note:
    flash:
      create:
        success: "Your note has been created!"
        failure: "There was a problem creating your note."
      update:
        success: "Saved!"
        failure: "There was a problem saving your changes."
      destroy:
        success: "That note has been deleted."
        failure: "We weren't able to delete that note."
    placeholder:
      title: "Title your note"
      body: "Just start typing..."

We also want the title field to be focused when creating a new page. When editing an existing page, focusing the title makes less sense. Let's create a helper method to determine when we should and shouldn't focus the title field.

app/helpers/application_helper.rb

def title_autofocus?(note)
  note.new_record?
end

We'll call the helper from our partial, passing in the form object (i.e. the note instance).

<%= f.text_field :title, placeholder: 'Title your note', autofocus: title_autofocus?(f.object) %>

HAML:

= f.text_field :title, placeholder: 'Title your note', autofocus: title_autofocus?(f.object)

Does everything look good? Commit!

Next: Body Text and Sanitized HTML