Ruby on Rails: How can I allow a user to style text on a form?

Question

I am creating a Ruby on Rails application that allows users to create and design emails, as part of this I want users to be able to select text within their message and choose a style (similar to Stack Overflow where a user can highlight a word and click the B for bold, I for italics, etc.). When a user clicks this I want the text to be surrounded by the HTML necessary for the style, eg <strong>Hi</strong> .

This is so that it will get saved as part of the message and then in the email the HTML styling will be applied using: .html_safe .

Can someone please provide me with some advice on how to implement this?

My form for the email is as follows:

    <%= form_for(@email) do |f| %>
      <p>
        <%= f.label :from_name %><br>
        <% if @user.present? %>
        <%= f.select :from_name, [@user.firstname + " " + @user.surname, @user.organisation] %>
        <% end %>
      </p>

      <p>
        <%= f.label :From_Email_Address %><br>
        <%= f.collection_select :account_id, Account.where(user_id: session[:user_id]), 
          :id,:email %>
      </p>

      <p>
        <%= f.label :to %><br>
        <% if @contacts.count > 0 %>
            <%= f.collection_check_boxes(:to, @contacts, :email, :email) %>
        <% else %>
            <%= f.text_field :to %>
        <% end %>
        <%= link_to 'New Contact', new_contact_path %>
      </p>

      <p>
        <%= f.label :logo %><br>
        <%= file_field :email, :logo, :size => 42 %>
      </p>

      <p>
        <%= f.label :subject %><br>
        <%= f.text_field :subject %>
      </p>

      <p>
        <%= f.label :greeting %>
        <%= f.select :greeting, ["No Greeting", "To","Dear","Hi","Hello","Good Morning/Afternoon/Evening","Morning/Afternoon/Evening"] %>

        <%= f.label :to_name %>
        <%= f.select :to_name, ["No Name", "First Name","Surname","Full Name"] %>

        <%= f.label :prefix %>
        <%= f.select :prefix, ["No", "Yes"] %>

      </p>

      <p>
        <%= f.label :message %><br>
        <%= f.text_field :message %>
      </p>

      <div class="actions">
        <%= f.submit %>
        <%= render "/error_messages", :message_header => "Cannot save: ", :target => @email %> 
      </div>
 <% end %>

So just, to clarify, when a user enters their message in <%= f.text_field :message %> I want them to be able to style their text. Does anybody know how I can do this?

Answer 1

I would suggest using trix gem .

Pros:

• created by Rails creators
• lightweight
• easy to use
• clean

Check out official site .