I’m tired of settling for a WYSIWYG editor in my Rails apps. Plugins like FCKeditor and TinyMCE work moderately well for the end user, but they can generate ugly HTML on the backend. I hate dealing with that. Textile is so much better, but our clients often dislike dealing with the markup. Isn’t there a way to bridge the niceness of Textile with the end user experience of a WYSIWYG editor?
It turns out that there is: it’s the new textile_toolbar plugin. Extracted from a recent Terralien project, the plugin adds a handy toolbar to Textile-enabled form fields. The buttons on the toolbar generate the appropriate Textile markup for your users. For example, clicking the “Bold” button will surround the highlighted word with the correct Textile markup to make it bold.
textile_toolbar lets you retain the benefits of Textile while at the same time offering your users a friendly interface for generating markup. The plugin is a great way to learn Textile, but even if your users don’t want to bother with memorizing the markup, the toolbar will still be there to assist them with their editing.
It’s easy to get started with textile_toolbar. To install the plugin in your Rails 2.1 (or greater) project, run:
script/plugin install git://github.com/pelargir/textile_toolbar.git
To add the toolbar to an existing text area, change the text_area or text_field helper call to textile_area. It’s that simple! Be sure to check out the README for further integration guidelines and options.
Update: A live example of a Textile-enabled text area can now be found here.
Awesome! Thanks for sharing, I’d love to ditch our TinyMCE editor for this.
Curious if you have seen http://slateinfo.blogs.wvu.edu/plugins/textile_editor_helper/demo
Wow brilliant.
I’ll test this tonight.
Thank you very much guys
nic
Matthew, I was so pumped to see your new plugin!
How can I apply formatting so it sits on the left side? It seem to force itself into the middle of the form and doesn’t take the same style parameters as my text_area such as height and width.
I am grateful if you could email me any info.
Do you have an example of it working?
David, I’ve tweaked the plugin to resolve the alignment issue for you. Let me know if you keep having trouble. You might double check that there aren’t any text-align styles that could be shoving the toolbar around.
Regarding style parameters, you can modify the text_area with :col and :row options (:height and :width won’t work). You can also do something like this:
<%= textile_area :foo, :bar, :style => “height:20px; width:100px” %>
Andrew, there is an example in the README. It’s just a single line:
<%= textile_toolbar :object, :attribute %>
Pretty simple. Once the plugin is installed, you can use this wherever you want a text area with a toolbar to appear.
I’m working on a more in-depth example with screen captures and will hopefully be posting that soon.
Andrew, I’ve posted a live example of a Textile-enabled text area on this page:
http://terralien.com/projects/textile-toolbar/
Matt,
Your example on this page;
http://terralien.com/projects/textile-toolbar/
doesn’t work like mine. Whenever I click any of the four buttons it puts a
http://terralien.com/projects/textile-toolbar/# ( or the http: address in the browser into the text.)
Even though it appears to be running and the images are evident, their behavior is not what you site demonstrates. I did a GIT today and Matt told me he had made changes to use a form.textile_area block argument.
I’ve update my entire project on the web and these buttons do nothing?
I’d be grateful for some ideas.
Thank you,
David Kennedy
David, the example should be working now. What browser are you using?
Matt,
I’ve re-written your TT to use BBCode and will be happy to share it with anyone.
I would like to know if there’s a way to make the text field have a maximum width with something like ‘wordwrap=“on”. If a user went crazy and didn’t hit the CR my website would look like a wounded duck.
I am grateful for any reply.
David Kennedy