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:
==========================
= Interested? Want to download it?
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.
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
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…
In your instructions, you don’t mention creating an application.rhtml or
referencing the prototype.js library. This is necessary for the plugin
to initialize.
If you are including prototype.js and it’s still not working, could you
possibly ZIP up the sample project and email it to me?
(scharfie+rubyforum[at]gmail[dot]com)
Mohit S. wrote:
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…
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 << ‘’
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 << ‘’
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.
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?
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.
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.
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.
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.
