Install markItUp! in Ruby on Rails

November 08, 2008 – tagged as jquery, maritup, rails, redcloth, textile

If you’re torn between a WYSIWYG editor and something clean like Textile/Redcloth, then markItUp! will provide you with some nice middle ground. The tool is well documented, but there are a few “notes” for installing it in Rails that aren’t in the docs.

1. Initial setup

Since there’s overhead associated with markItUp!, I set a variable @content_submission to true so that my standard layout template can skip all of the extra javascript when it’s not necessary. To keep things simple, I’m going to follow the markItUp! hierarchy, which means it’s stylesheets will be in your javascripts path.

Install jQuery into your javascripts folder along with markItUp!. Download whatever markItUp! set you want to use (I’m using textile above, which assumes you’ve already ran sudo gem install redcloth) and drop that in the sets folder. All of this is documented in the standard markItUp! docs. You only need to make one edit to the standard markItUp! file. In jquery.markitup.js, edit previewTemplatePath to the following:

previewTemplatePath:  '/javascripts/markitup/templates/preview.html'

2. Add an action to parse the text

I’ve got a controller called content_controller that will handle my Textile processing with Redcloth. I’ve defined an action as follows:

def parse_textile
  render :text =>[:data]).to_html

You may want to add more to this action to provide security.

3. Add a route to for your new action

Assuming you’re using RESTful routes, just modify your existing route:

map.resources :content, :member => {:parse_textile => :post}

4. Tell markItUp! about your route

Lastly, edit your set file and tell it about the route:

previewParserPath:  '/content/parse_textile'


This article is 10 years old and closed for new comments.

Alexey Poimtsev • December 25, 2008

Hi, Strange thing - i’ve made app similar to your example, but i see in server console messages like

ActionController::RoutingError (No route matches “/news/templates/preview.css” with {:method=>:get}): c:/develop/ruby/lib/ruby/gems/1.8/gems/actionpack-2.2.2/lib/action_controller/routing/recognition_optimisation.rb:66:in recognize_ path' c:/develop/ruby/lib/ruby/gems/1.8/gems/actionpack-2.2.2/lib/action_controller/routing/route_set.rb:386:in recognize’ c:/develop/ruby/lib/ruby/gems/1.8/gems/actionpack-2.2.2/lib/action_controller/dispatcher.rb:182:in handle_request' c:/develop/ruby/lib/ruby/gems/1.8/gems/actionpack-2.2.2/lib/action_controller/dispatcher.rb:110:in dispatch_unlocked’ c:/develop/ruby/lib/ruby/gems/1.8/gems/actionpack-2.2.2/lib/action_controller/dispatcher.rb:123:in dispatch' c:/develop/ruby/lib/ruby/gems/1.8/gems/actionpack-2.2.2/lib/action_controller/dispatcher.rb:122:in synchronize’

and markitup does not render my textile input. Do you know - how can i solve this?

eight • January 9, 2009

Are you sure this is correct?

previewTemplatePath: ‘/javascripts/markitup/templates/preview.html’

I cannot for the life of me seem to get the preview window to read this file or more importantly the css file in the same folder. I’d like to be able to style my output the way it will be when it’s published.

I’ve tried the default of ~/ and / and I tried putting the html file at the root (just inside the public dir) and nothing is working.

Everything else with markitup is awesome though so I don’t want to sound like too much of a naysayer.

James • July 29, 2009

Sweet stuff - thanks for these tips!