Ruby on Rails Textile Editor

I needed a lightweight textile markup editor for creating readme.textile docs for GitHub. I found a few resources online but in the end I just decided to roll my own. This tutorial will show you how to create your own textile editor with the RedCloth gem and Textile-editor-helper. You can give your website users the ability to safely create rich text markup or just use it to create, edit and manage your own textile documents. I used this editor to create this readme.

Update
I have pushed the contents of this tutorial into a rails 3 gem. For more info see rtextile on GitHub or to install just add gem ‘rtextile’ to your Gemfile and run bundle update or simply run gem install rtextile.

This tutorial uses Ryan Bates’ nifty-generators . It’s a collection of useful Rails generator scripts for scaffolding, layout files, authentication, and more all packaged in an easy to use gem. I recommend that you check it out.

To install:

gem install nifty-generators

Get Started

Install and configure the RedCloth gem

gem install RedCloth (make sure to use CamelCase or everything explodes!)

Add to config/environment.rb

config.gem “RedCloth”

The textile-editor-plugin uses prototype, so make sure it’s linked in the head section or your layout file. It also works with JQuery, for more information on textile-editor-plugin with JQuery see the creators website.

<%= javascript_include_tag :defaults %>

Install the textile-editor-plugin

script/plugin install http://svn.webtest.wvu.edu/repos/rails/plugins/textile_editor_helper/

rake textile_editor_helper:install

Generate a scaffold for the document model

script/generate nifty_scaffold Document title:string doc:text

Rake your migration

rake db:migrate

View Templates

index.html.erb

 <% for document in @documents %>
   <b> <%=h document.title %> </b>
   <p><%= RedCloth.new(document.doc).to_html %> </p>
   <p>
   <%= link_to "Show", document %> |  
   <%= link_to "Edit", edit_document_path(document) %> |  
   <%= link_to "Destroy", document, :confirm => 'Are you sure?', :method => :delete %> |  
   </p>
   <hr>
<% end %>
<p><%= link_to "New Document", new_document_path %></p>

new.html.erb

<%= render :partial => 'form' %>
<p><%= link_to "Back to List", documents_path %></p>

_form.html.erb

<% form_for @document do |f| %> 
   <%= f.error_messages %> 
   <p>
   <%= f.label :title %> 
   <br /> 
   <%= f.text_field :title %> 
   </p> 
   <p><%= textile_editor 'document', 'doc' %></p> 
   <%= textile_editor_initialize -%>
   <p><%= f.submit %></p>
<% end %>

show.html.erb — I moved this to a partial so it could be used on the edit page.

<%= render :partial => 'show'%>
<p>
<%= link_to "Edit", edit_document_path(@document) %> |
<%= link_to "Destroy", @document, :confirm => 'Are you sure?', :method => :delete %> |
<%= link_to "View All", documents_path %>
</p>

_show.html.erb — the partial

<h3><%=h @document.title %></h3>
<%= RedCloth.new(@document.doc).to_html %>

edit.html.erb

<%= render :partial => 'form' %>
<hr>
<%= render :partial => 'show'%>
<hr>
<p>
<%= link_to "Show", @document %> |
<%= link_to "View All", documents_path %> |
</p>

Add download links to download the document as .textile or .html

edit.html.erb and/or show.html.erb

<%= link_to "Download "+@document.title+".textile " ,:action => :download, :id => @document.id %> |  
<%= link_to "Download "+@document.title+".html" ,:action => :download_html, :id => @document.id %> 

Add these methods to your controller documents_controller.rb

def download 
    document = Document.find(params[:id])
    @doc = document.doc
    @title = document.title.to_s
    file_name =  (@title+".textile")
    send_data(@doc, :filename => file_name, :type => "text/textile")
   end

def download_html
    document = Document.find(params[:id])
    @doc = RedCloth.new(document.doc).to_html
    @title = document.title.to_s
    file_name =  (@title+".html")
    send_data(@doc, :filename => file_name, :type => "text/html")
  end 

Change the routing in documents_controller.rb for both actions create and update with:

render :action => "edit"

This will redirect to edit (which includes the show partial) after the document creation and after editing.

Fire up your server and test everything out.

Relevant Links

RedCloth
RedCloth on Github
Textile-editor-helper
Nifty-Generators on Github
Textile
rtextile gem