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.