Thu Mar 29 02:50:00 UTC 2007
One of the ways to allow lean markup for text is to use Textile for the text fields. Using acts_as_textiled can make this process even easier. The only thing that was missing was to have a way to allow users to enter Textile-formatted text with greater ease… until now, that is!
Enter the Textile Editor Helper to ease this step. This article just takes you step-by-step to show you how to get a Textile-enabled field working in your Rails app.
Install RedCloth if needed
To use Textile, you must install the RedCloth gem first.
1 2 3 4 5 6 rails_apps>gem install RedCloth Attempting local installation of 'RedCloth' Local gem file not found: RedCloth*.gem Attempting remote installation of 'RedCloth' Updating Gem source index for: http://gems.rubyforge.org Successfully installed RedCloth-3.0.4
Create a new Rails app
I want to assume nothing, so I’ll just start from scratch here. Create a new Rails app by using the usual way.
1 2 3 4 rails_apps>rails ted_sample create create app/controllers ...
Create the database for it
Using whatever method you prefer, create a database (command line, phpMyAdmin, etc.) for the application. In my case, I added a database called ‘sample’ to MySQL running on my localhost.
Adjust the connection properties
database.ymlto point to the actual database. I’m using development mode only (this application has a life of 10 minutes) and the database properties need to be set as above.
1 2 3 4 5 6 development: adapter: mysql database: sample username: <put db user name> password: <put password> host: localhost
Install the plugin – acts_as_textiled
You can get the details to install the
acts_as_textiledplugin from the link above. But, it’s quite simple to do.
1 2 3 4 5 6 rails_apps\ted_sample>ruby script/plugin install svn://errtheblog.com/svn/plugins/acts_as_textiled A E:\InstantRails\rails_apps\ted_sample\vendor\plugins\acts_as_textiled A E:\InstantRails\rails_apps\ted_sample\vendor\plugins\acts_as_textiled\test A E:\InstantRails\rails_apps\ted_sample\vendor\plugins\acts_as_textiled\test\memory_test_fix.rb A E:\InstantRails\rails_apps\ted_sample\vendor\plugins\acts_as_textiled\test\setup_test.rb ...
That prepares you to do the first bit. But while we are at it, let’s also put in the Textile Editor Plugin, shall we?
Install the plugin – Textile Editor Helper
This one is equally simple. From the root directory of your Rails app, just run the following:
1 2 3 4 5 6 7 rails_apps\ted_sample>script/plugin install http://svn.webtest.wvu.edu/repos/rails/plugins/textile_editor_helper/ + ./textile_editor_helper/MIT-LICENSE + ./textile_editor_helper/README + ./textile_editor_helper/Rakefile + ./textile_editor_helper/assets/images/textile-editor/background.png + ./textile_editor_helper/assets/images/textile-editor/blockquote.png ...
Now, run the install script for it.
1 2 3 4 5 6 7 rails_apps\ted_sample>rake textile_editor_helper:install (in rails_apps/ted_sample) * Copying /assets/images/textile-editor/background.png to /public/images/textile-editor/backg round.png * Copying /assets/images/textile-editor/blockquote.png to /public/images/textile-editor/block quote.png ...
Create the first model
OK, from the root directory of your Rails application and generate the first model
1 2 3 4 5 6 7 8 9 rails_apps\ted_sample>ruby script\generate model item exists app/models/ exists test/unit/ exists test/fixtures/ create app/models/item.rb create test/unit/item_test.rb create test/fixtures/items.yml create db/migrate create db/migrate/001_create_items.rb
Edit the migration file
The next step is to add in the details about the model into the migration file. Open up
db/migrate/001_create_items.rband modify it so it looks something like this.
1 2 3 4 5 6 7 8 9 10 11 12 class CreateItems < ActiveRecord::Migration def self.up create_table :items do |t| t.column :name, :string, :null => false t.column :descr, :text end end def self.down drop_table :items end end
And apply the migration as always.
1 2 3 4 5 6 rails_apps\ted_sample>rake db:migrate (in rails_apps/ted_sample) == CreateItems: migrating ===================================================== -- create_table(:items) -> 0.0900s == CreateItems: migrated (0.0900s) ============================================
OK, time to go to the application now and actually use the plugins.
Identify the field for Textiled data
Open your model file
apps\models\item.rbin an editor and change it to something like the one shown below, marking
descras the textiled field.
1 2 3 class Item < ActiveRecord::Base acts_as_textiled :descr end
Create the controller and view for the model
OK, I’m going to cheat here and just use a scaffold to get this done faster.
1 2 3 4 5 rails_apps\ted_sample>ruby script\generate scaffold item exists app/controllers/ exists app/helpers/ create app/views/items ...
The Textile Editor Helper relies on
prototype.jsfor some features. So, you need to ensure that it is included in the final page that is rendered. One of the easiest ways (for this sample) is to include it in the layout for the
ted_sample\app\views\layouts\items.rhtmlto include a call to
Modify the form to use the Textile Editor Helper
(This information is direct from the Textile Editor Helper website)
Navigate to the
app\views\items\_form.rhtmlso that we can add in the code for the helper.
Replace the text area tag with
<%= textile_editor 'object', 'field' -%>
This accepts the same options as the regular text area tag. Also, at the end of the form, put in the following code:
<%= textile_editor_initialize -%>
Once this is done, the
app\views\items\_form.rhtmlfile will look something like this.
1 2 3 4 5 6 7 8 9 10 11 <%= error_messages_for 'item' %> <!--[form:item]--> <p><label for="item_name">Name</label><br/> <%= text_field 'item', 'name' %></p> <p><label for="item_descr">Descr</label><br/> <%= textile_editor 'item', 'descr' -%> <!--[eoform:item]--> <%= textile_editor_initialize -%>
One small change
Since we are using the scaffold, it escapes all the data when it outputs it. What this means is that if you use it as it is, the textiled fields will display the actual HTML code rather than rendering it. So, we can change the show.rhtml and list.rhtml files to render the actual text. I’m changing just the
app/views/items/show.rhtmlfile to the code below – you can change the other one if you want.
1 2 3 4 5 6 <p><b>Name:</b> <%=h @item.name %></p> <p><b>Description:</b></p> <%= @item.descr %></p> <%= link_to 'Edit', :action => 'edit', :id => @item %> | <%= link_to 'Back', :action => 'list' %>
Start the Server
1 2 3 4 rails_apps\ted_sample>ruby script\server => Booting Mongrel (use 'script/server webrick' to force WEBrick) => Rails application starting on http://0.0.0.0:3000 ...
Go to http://localhost:3000/items/ to see how it works.