Textile Editor Plugin Live Demo

All-

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

http://slateinfo.blogs.wvu.edu/plugins/textile_editor_helper/demo

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 anymore.

- 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.

Nathaniel.

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.

Nathaniel.

Dave,

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 )

Alain

Nathaniel-

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.

Alain-

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 want.

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.