Textile Editor Plugin Live Demo


We've had requests for a live demo of the Textile Editor Helper
plugin. It's now available at:


We've also made some changes/fixes:

- Chris Wanstrath supplied us with a patch that we've implemented. He
describes the patch better then I could, "Some of our text_area tags
are using the builder syntax, some are not attached to objects, etc,
so I just wanted to define all my IDs when calling the init method.
This patch lets you do that but maintains the current
behavior as well." Hopefully this makes TEH more flexible for folks.
Thanks, Chris.

- There was a small bug with our interaction with Prototype that
we've also fixed. So folks shouldn't see that error in Firebug

- We've put in the fix for the svnindex.xsl error that Mohit noted.
So our directions should work flawlessly now.

- We finally tested TEH in IE6 and didn't notice any errors so we'll
add it to the list of supported browsers.

Again, let us know what you think.

Hey Dave,

Nicely done with the editor.

Another suggestion would be to have a "preview" button. So you can
instantly convert the textile into real HTML so as to see what it
looks like when you publish it. Something inline, no refresh, and
maybe even some AJAX would do well for this.


I'm blind. Please disregard the suggestion :slight_smile: haha.

Actually, on second thought maybe not.

Tradition and conditioning had made me blind, which may be worth
reiterating my suggestion.

My suggestion was more for a toolbar button that does the preview. And
switches the textbox to a preview. Rather than showing it below the
editor itself, switch the textile text with the real preview display.
Basically switch the edit window for the preview.

With the other editors I have worked with, they have a HTML button
that lets you see the source code. You could check out the FCK Editor
or TinyMCE for ideas on what I mean.



Is it in your plan to make the toolbar customizable?

To make our users’ life easier, we added ‘quicktags’ shortcuts to allow people to enter text like this: (see [gvideo] and [vimg] in line 2 and 3).

h1.  a title 
a google video [gvideo]12345677[/gvideo],
a local image  [vimg]6666[/vimg],

How easy is it/would it with the plugin to

  • add buttons in the toolbar to insert custom code in the text

  • run a routine before the rendering (to expand the ‘quicktags’ into textile-ready text )



I'll be honest, a preview feature would not be something we'd be
looking to implement. I guess we just see TEH as a pure JS kind of
thing really. We don't want to start getting into preview buttons and
actions and what not. To us that needs to be left up to the individual
developer on how they'd want to pursue that and how best it fits into
their methodology and UI. We're just trying to keep the product really
simple and focused.

Now what would be useful would be directions on how someone could do
that but I don't think we'd include anything in the install for it.

Thanks for the suggestion.


The toolbar is customizable. Maybe I should include that in the list
of features :slight_smile: One of the JS files included in the distribution is
called textile-editor-config.js. All the info on how to add/remove
buttons is there. I think you'll take one look at it, go 'Ah ha!' and
know how to customize it. The other thing you'll want to do is modify
button-styles.css to add your own images for the new buttons.

As for you example, yes, you can do exactly what you propose to add,
say a Video icon, to the toolbar and have it spit out the tags you

Wth the rendering... here you'd be looking at extending RedCloth
really. We do something similar using a sub-class of RedCloth called
SnippetCloth. It helps us render text like you have into the
appropriate display text along with RedCloth rendering the regular
textile stuff. Any directions on this are a little out of my depth
(I'm slowly turning into a PHB).

Hope this helps. Have a good day.