Install markItUp! in Ruby on Rails
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.
-
<%- unless @content_submission.nil? -%>
-
<%= javascript_include_tag "jquery-1.2.6.min" %>
-
<%= javascript_include_tag "markitup/jquery.markitup" %>
-
<%= javascript_include_tag "markitup/sets/textile/set" %>
-
<link rel="stylesheet" type="text/css" href="/javascripts/markitup/skins/markitup/style.css" />
-
<link rel="stylesheet" type="text/css" href="/javascripts/markitup/sets/textile/style.css" />
-
<%- end -%>
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 => RedCloth.new(params[:data]).to_html
-
end
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'
December 25th, 2008 at 8:13 am
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?
January 9th, 2009 at 3:52 am
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.
July 29th, 2009 at 4:54 am
Sweet stuff - thanks for these tips!