Textile Editor Plugin v0.1

The Textile Editor Helper (TEH) is a Javascript-based text formatting toolbar that will be added to all of your text areas that utilize the TEH feature. TEH was developed to provide a more WYSIWYG-ish option for users of our Rails CMS called slate while still letting us use Textile.

Looks great Dave! I think this will come in real handy for the average user. I’m a big fan of using Markdown and Textile for end user content. This will be a nice additon to the toolbox.

Blessings,

Jeff

Dave Olsen wrote:

The Textile Editor Helper (TEH) is a Javascript-based text formatting toolbar that will be added to all of your text areas that utilize the TEH feature. TEH was developed to provide a more WYSIWYG-ish option for users of our Rails CMS called slate while still letting us use Textile.

====================== = So what are the features?

These are a list of the current features for the Textile Editor Helper v0.1.

- supports: IE7, FF 1.5 + 2, & Safari 2 **pretty sure IE6 works as well** - ability to use "simple" vs. "extended" editor - supports all block elements in textile except footnote - supports all block modifier elements in textile - supports simple ordered and unordered lists including indenting them - supports most of the textile phrase modifiers, very easy to add the missing ones - supports multiple-paragraph modification - can have multiple "editors" on one page, access key use in this environment is flaky - access key support - select text to add and remove tags, selection stays highlighted - seamlessly change between tags and modifiers - doesn't need to be in the body onload tag **does require prototype though** - just like creating a normal text area tag

================== = What's missing?

We are currently not offering a method to include links or images via the toolbar. This is because we have another method in our system to do these things. We will integrate these in the future but we needed to get the text formatting out the door quickly.

========================== = Want to see a quick example?

Check out our demo video: http://www.youtube.com/watch?v=wQYedmbsJf4

========================== = Interested? Want to download it?

Learn more at: http://slateinfo.blogs.wvu.edu/plugins/textile_editor_helper

Let us know what you think.

What do I think? I think it rocks - nice work and thanks for sharing.

First question. Why not have a _real_ demo? Screenshots and videos are great, but the real thing is oh so much nicer :slight_smile:

Nathaniel.

Heh. The textile editor demo is wrapped up in our v0.3.3 release. Once that's up later this week we'll get a real, usable demo out there. We might have gotten a little ahead of ourselves here in noting the plugin was available :slight_smile:

Dave Olsen wrote:

========================== = Want to see a quick example?

Check out our demo video: http://www.youtube.com/watch?v=wQYedmbsJf4

========================== = Interested? Want to download it?

Learn more at: http://slateinfo.blogs.wvu.edu/plugins/textile_editor_helper

Let us know what you think.

Hi Dave,

I get an error when I follow the instructions on the website and try to install it to my project.

rails_apps\try123>ruby script\plugin install http://svn.webtest.wvu.edu/repos/rails/plugins/textile_editor_helper/ + ./textile_editor_helper/svnindex.xsl Plugin not found: ["http://svn.webtest.wvu.edu/repos/rails/plugins/textile_editor_helper/"\]

Am I missing something? I'm trying this out on InstantRails 1.6 on Windows.

Cheers Mohit.

I got the same error.

So instead, do the following (from a command line in your rails app root directory):

cd vendor/plugins svn export http://svn.webtest.wvu.edu/repos/rails/plugins/textile_editor_helper

This will export it correctly into the plugins directory.

Bye,

Guy.

Thanks, Guy.

Mohit, thanks for making us aware of the issue. We'll look into it tomorrow. Don't want to have this affect a lot of people if we can avoid it.

Hi Dave,

There's something strange. I created a sample project following Guy's advice and the app worked fine. Right now, I went back to trying out the way it is supposed to work (according to the website) and it downloaded fine. But, the project doesn't work.

The files are identical to the files downloaded using Guy's method. But it doesn't work - the toolbar doesn't show up. However, if I overwrite the vendor directory of the new app with that of the older one, it works fine...

Not sure what to do..

Anyway, this is what I was heading towards but can't really put up non-working instructions :-S http://notepad.onghu.com/2007/3/28/using-textile-editor-plugin-and-acts_as_textiled

Cheers Mohit.

Dave Olsen wrote:

Hi Chris,

My first and second sample are both created from scratch using essentially the same instructions. The only difference was that I did svn export for the first and followed the TEH website instructions for the second. I didn't explicitly include prototype in either case, so it's like to be a problem. But what baffles me is that when I copy the vendor directory from the first one (installed using svn export) to the second one, it works.

I'm looking at the two textile_editor_helper.rb files now - in the original one (which worked for me)   def textile_editor_initialize(*dom_ids)     editor_ids = (@textile_editor_ids || ) + textile_extract_dom_ids(*dom_ids)     output =     output << stylesheet_link_tag('textile-editor')     output << javascript_include_tag('textile-editor')     output << '<script type="text/javascript">'     output << %{Event.observe(window, 'load', function() \{}     editor_ids.each do |editor_id, mode|       output << "edToolbar('%s', '%s');" % [editor_id, mode || 'extended']     end     output << '});' ..... followed by some more code including code for textile_extract_dom_ids

and the second case (which isn't working):   def textile_editor_initialize     editor_ids = @textile_editor_ids ||     output =     output << stylesheet_link_tag('textile-editor')     output << javascript_include_tag('textile-editor')     output << '<script type="text/javascript">'     output << %{Event.observe(window, 'load', initTextileEditors()) }     #output << 'addLoadEvent(initTextileEditors);'     output << 'function initTextileEditors() {'     editor_ids.each do |editor_id, mode|       output << "edToolbar('%s', '%s');" % [editor_id, mode]     end     output << '};'

There are some small differences in the code I'll try to include prototype and try again in a bit! Cheers Mohit.

Chris Scharf wrote:

It's actually the example in textile-editor-config.js. Just need to uncomment it. By default we didn't feel it should be turned on since it's not exactly at the top of the list of options our users needed. Obviously YMMV but it's not hard to add.

Thanks for the feedback :slight_smile:

thank you for the great plugin! it's a great way to persuade clients to go with textile... I've already installed it on two projects using mephisto and it works perfectly.

question (probably a wish list item), have you guys been considering making a preview appear right on the textarea a la fckeditor?

best Oliver

Oliver-

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 (especially a simple install!) 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 directly in the install for it.

Thanks for the suggestion.

thanx a lot for your plugin, it would be cool to be able to create link to external pages, I don't know if it can be done with textile though.

Thanks for the explanation Dave.

Yes, directions on how to do it would be great :slight_smile: guess I'm going to dig into fckeditor to see how they do it

Some directions on how to keep it strictly JS, and not have to dive into AJAX/actions to get it done would be some simple regular expressions to do search & replace on the various matches.

When something matches, such as _this_ it would replace it with the associate tag. There after, you could have a modal dialog that has the element with the translated HTML.

Doesn't sound too complex to implement. If I have anyone that wants it on my end or I have a personal requirement for it, I will definately dive into it.

Nathaniel.

There actually is a textile.js script that can do this: http://static.serversidewiki.com/javascripts/textile.js

However, it's a bit more particular regarding input than RedCloth is - I believe the JS version requires spaces before * and # for lists, whereas RedCloth does not.