markItUp! and Rails 3.1 don't play along nicely

Question

I'm trying to make markitup! work with rails 3.1, the magic happens inside my posts controller, so I threw the markup javascript in assets/javascript and added in my posts.js (so only textarea in posts view would get appended)

$(document).ready(function() {
  $(".markItUp").markItUp(mySettings);
});

in my assets/stylesheets/posts.css

.markItUpHeader ul .markItUpDropMenu {
background:transparent url(images/menu.png) no-repeat 115% 50%;
margin-right:5px;
}

further more I change

images/menu.png to <% asset_path 'menu.png' %>

so it would get the good asset_path images path

in the jquery.markitup.js file I changed the root path to

options = {
root: '<%= asset_path 'jquery.markitup.js' %>'

so it won't use the markitup made function to check for root set and use my root instead

jquery.markitup.js.erb

// compute markItUp! path
if(!options.root) {
etc .... (does the markitup path computation for the .js file

so it would get the right path to the main js file my _form.html.erb file is

<%= f.text_area :content, :class => 'markItUp' %>

this does work as it does show the text area with the width:700px that is set in posts.css.erb

.markItUp {
 width:700px;
 etc ....

but still nothing else shows or works, I don't have the small toolbar above my text area for the text editing (B, I etc...)

thank you in advance, HeTzi & Guy.

markItUp documentation: http://markitup.jaysalvat.com/documentation/

Answer 1

I'm not quite sure, what's not working for you... but I have managed to get it working in rails 3.1. From what you've posted above, I have a couple suspicions.

First off, in Rails 3.1, from what I can tell in the day or so it's been since I upgraded, it (RoR 3.1) intelligently routes files in: app/assets to the appropriate images, stylesheets, and javascripts folder.

So this:

background:transparent url(images/menu.png) no-repeat 115% 50%;

Should be:

background:transparent url(/assets/menu.png) no-repeat 115% 50%;

My root option has been left to the default:

''

Also, you haven't included the set.js(?) file for defining the markup... If you click the link below, scroll down, and click the 'JSON' tab you'll see what I mean.

http://markitup.jaysalvat.com/examples/html/

From my own project (using coffee script, and settings from a bbcode example on the MarkItUp page):

myBbcodeSettings = {
previewParserPath:  '', // path to your BBCode parser
markupSet: [
    {name:'Bold', key:'B', openWith:'[b]', closeWith:'[/b]'},

    ...

    {name:'Preview', className:"preview", call:'preview' }
    ]
}

$("#parent-element textarea").markItUp(myBbcodeSettings);

Finally, I was having a problem with it not being initialized because I forgot to make sure it had loaded and was actually on the page, but it doesn't appear you should have that problem.

Good luck!