Forum: Rails Spinoffs (closed, excessive spam) Prototype-based widgets

99d442441900d0b530ebca624d79de12?d=identicon&s=25 Jeremy Jongsma (Guest)
on 2008-04-23 08:46
(Received via mailing list)
Two reasons for this post:

1) I've built a number of prototype-based input widgets over the years
that I use quite regularly on my web projects, but I just realized
I've never shared them with the community (they're GPL licensed).  So
here you go:

2) The demos on my site are using prototype 1.4.0.  I just tested and
all of them work fine on the latest ( except the colorpicker.
If you download and use the colorpicker widget with prototype,
the color swatches in the dropdown box do not appear (the whole panel
is gray).  But mousing over the panel still shows the colors that
should be there, and clicking selects a color as it should.  Before I
waste a lot of time debugging this, does anyone know of a difference
between 1.4.x and 1.6.x that could cause this?  I tried loading
prototype_update_helper.js to see if it gives me any insight but it
fails (console not defined in FF?)

I hope you find these useful, and I'll try to fix up the colorpicker
for as soon as possible.

Af85e01e19b6caa679621b7b783a598f?d=identicon&s=25 T.J. Crowder (Guest)
on 2008-04-23 10:33
(Received via mailing list)
Hi Jeremy,

Very cool, thanks for sharing those.  I really like your take on the
RTE (feature bloat and ugliness are defnitely issues many of the RTEs
out there have).

If you haven't already done so, have you considered submitting these

FWIW: Your RTE shares two common problems I have with others out
there, so I thought I should mention them:

1. It's easy to get into a situation where Ctrl+End puts you at the
end of the last line of visible text, but as soon as you type a
letter, the letter is put at the beginning of the next line instead.
This is *incredibly* frustrating, and it's a common problem with
several RTEs I've found.  If you could fix that one, you'd be golden.
One of the myriad ways to create it:

* Press Ctrl+A to select all text
* Press Del
* Type a sentence and press Enter
* Press backspace
* Press Ctrl+Home
* Press Ctrl+End

At this point, the cursor is at the end of the line of text.  But if
you type a letter, it appears at the beginning of a new line.
(Firefox, Windows XP)

That series of steps looks complicated, but you understand it's just a
reliable example; in practice, this situation is incredibly easy to
set up.  I don't know why so many RTEs have this problem, perhaps
they're all deriving Kevin Roth's code.

2. Clicking in the blank area underneath all text you've typed should
put the cursor at the end of the text like Ctrl+End does, rather than
ignoring the click (IMHO).

Again, thanks for sharing, and these are nits being picked.
T.J. Crowder
tj / crowder software / com
F3cf74d456662cf50cafa74433a83e5b?d=identicon&s=25 Brian Williams (Guest)
on 2008-04-23 15:39
(Received via mailing list)
Thanks for sharing.

I wish this had been posted ages ago I wouldn't be using YahooUI stuff
now if it had been.

I have a question about the RTE:  does it load properly if loaded via

A few weeks ago I was looking for a way to easily load a RTE via AJAX
without having to install ruby and rails and this and that and the other
get special functionality out of Prototype to allow AJAX loaded js
access to
the global scope -- i finally figured out how to do it with TinyMCE, my
dislike of TinyMCE is how massive it is.

PS did you fix the color chooser because its working fine for me
Vista Business (gag me - I'm at work) FF
F1fcf834ddad415f60d29c87cc10d4d4?d=identicon&s=25 kangax (Guest)
on 2008-04-23 16:39
(Received via mailing list)
Good stuff, Jeremy.

RTE is something that prototype ecosystem always lacked : )

Feel free to submit it to

99d442441900d0b530ebca624d79de12?d=identicon&s=25 Jeremy Jongsma (Guest)
on 2008-04-23 17:57
(Received via mailing list)
TJ -

Thanks for the feedback.  I will look into those issues.  This is also
the first of I've heard of scripteka, I'll definitely post these

Brian -

That's actually the main reason I built RTE.  I had a site that loaded
content and forms via AJAX, and couldn't find a good editor that I
could setup and tear down at will.  To add it to a textarea with a CSS
id of "my_editor", just use:

var rte = new Control.RTE('my_editor', '/images/rte');

If you replace the form (via AJAX or something), or just want to
restore the original textarea, use:


...and the original textarea will reappear.  I find this particularly
useful when you give the user a choice of entering content in
plaintext or HTML; as they select their choice, you can instantly
convert the textarea to the desired format.

Did you download and test ColorPicker locally with 1.6?  On my site
I'm still using Prototype 1.4, which it works fine with.

6190ccd07d6f6984639bcece3543b5a9?d=identicon&s=25 darrin (Guest)
on 2008-04-23 17:58
(Received via mailing list)
Very nice! Already thinking of a use for the RTE.

F3cf74d456662cf50cafa74433a83e5b?d=identicon&s=25 Brian Williams (Guest)
on 2008-04-23 18:02
(Received via mailing list)
ah, my bad, it was on the site that i was testing it
99d442441900d0b530ebca624d79de12?d=identicon&s=25 Jeremy Jongsma (Guest)
on 2008-04-23 19:28
(Received via mailing list)
I submitted RTE, ColorPicker, and DatePicker to scripteka.  Thanks for
the suggestion.

99d442441900d0b530ebca624d79de12?d=identicon&s=25 Jeremy Jongsma (Guest)
on 2008-04-24 08:38
(Received via mailing list)
The colorpicker was updated to work with

Apparently somewhere between 1.4 and 1.6 Element.setStyle() stopped
accepting css attributes (i.e. margin-left) and insisted on camelized
JS styles (i.e. marginLeft).

147bb0ea50239211f589d59c74660628?d=identicon&s=25 Greg Hemphill (Guest)
on 2008-04-24 16:28
(Received via mailing list)
FYI... the RTE doesn't appear to work in Safari (v 3.1.1 on a Mac).
99d442441900d0b530ebca624d79de12?d=identicon&s=25 Jeremy Jongsma (Guest)
on 2008-04-24 18:44
(Received via mailing list)
I'll check into it.  It's been awhile since I've tested RTE since I've
been forced to use TinyMCE on some projects lately due to the
difficulty of cleaning up the unholy mess that is Microsoft Word cut-
and-paste HTML.

Cc9ea3ae6329d9e88adfba76a542735a?d=identicon&s=25 Ken Snyder (Guest)
on 2008-04-24 19:13
(Received via mailing list)
Jeremy Jongsma wrote:
> I'll check into it.  It's been awhile since I've tested RTE since I've
> been forced to use TinyMCE on some projects lately due to the
> difficulty of cleaning up the unholy mess that is Microsoft Word cut-
> and-paste HTML.
> -j
If you're using PHP, you ought to check out HTMLPurifyer
( to wrangle Microsoft Word's demonic
HTML.  I just started using HTMLPurifier with a jQuery WYSIWYG editor
and it is fantastic.

- Ken Snyder
299a3d891ff1920b69c364d061007043?d=identicon&s=25 jdalton (Guest)
on 2008-04-24 19:26
(Received via mailing list)

You should be able to use element.setStyle('margin-left:10px');

6e780ee0dc0dd59c93cdcaf45cdef2e4?d=identicon&s=25 Gareth Evans (Guest)
on 2008-06-10 01:31
(Received via mailing list)

I was trying to use your RTE but was having a few problems.
I'm using IE8 in 7 emulation mode, but I haven't encountered many
My problem was that the Iframe didn't appear to have a width or a
The developer toolbar wasn't much help, but eventually I found that if I
applied the width and height settings to frameDiv as well as to the
then it worked.
What confuses me, is that it works on your website, in the same browser
- so
there must be something screwing my style up.
Just thought i'd give you a heads up anyway.


On Fri, Apr 25, 2008 at 5:25 AM, jdalton <>
This topic is locked and can not be replied to.