I've had problems with many of the WYSIWYG gems/plugins for Rails, so I'm building one myself using the RedCloth gem. I want users to see a live preview of their HTML-formatted text as they're filling out a form, but don't know how to do that using jQuery and RedCloth. Here's what I tried in application.js:
$('#comment').keyup(function(){
var formatted = RedCloth.new($(this).val()).to_html;
$('#preview').html(formatted);
});
Not surprised this didn't work, since RedCloth.new probably can't be executed in the .js file, but don't know how else to dynamically format the text.
I just had to deal with this issue myself. You have 2 options, as alluded to by Geoff & Andy:
I'm using http://github.com/aaronchi/jrails to replace scriptactulous with jquery, which makes things a little easier.
Here's what I did:
I decided to implement option 2 because getting the formatting exactly as it will appear through RedCloth is paramount for my application.
I added the following into the
<head>
of my page:In the
<body>
you'll obviously need:You need the following in your controller:
And the partial (_preview.html.haml; it's in HAML because that's what I use but you could do it in ERB too, and you'll need to gem.config the RedCloth gem in environment.rb):
Finally, remember to put this in your routes.rb:
I'm pretty inexperienced with javascript (I just sort of hack things together), so I'm sure the JS here could be improved.
Be aware that this is a major hit on server resources if you have lots of simultaneous users. If this is the case you'd be much better off processing the textile on the client side with javascript.