
Redactor - WYSIWYG editor on jQuery - deveshz
http://imperavi.com/redactor
======
grayrest
If you're looking for a Rich Text Editor, this is the only one I will
recommend. I wrote a proprietary RTE last year and continue to maintain it
because nothing available both worked and produced clean markup. Redactor came
out this spring and is the only generally available RTE that does this. If you
insist on OSS, WYSIHTML5 is the best available.

For those that care, Redactor uses the designMode technique, leans on the
browser for most operations and keeps the markup clean via regexp cleanup.
This is the cleanest solution for the most common use case of html email/html
item entry. The other two techniques are full emulation and contenteditable.

Google uses full emulation in their products. You type into a hidden text
field and the display/selection/cursor is entirely script rendered. This is
especially good for things like docs where they need to emulate word's
behavior. Downside is that doing it is a lot of code and it's easy to miss OS
specific keybinds (e.g. CMD+left/right in OS X don't work in gmail).

Using contenteditable would be the preferred technique but it's buggy as hell.
Of the editors I know about only Aloha and my editor take this approach. The
amount of code is relatively small (mine is around 2k sloc) but it's all
really ugly code that reminds me of the bad old days in 2002-2004 when I had
my own DOM abstraction lib.

~~~
deliminator
I'm curious why you decided not to use Aloha Editor, since it is also able to
produce clean markup. Disclosure: I'm one of the Aloha Editor developers.

~~~
latchkey
Download size is one big factor for me.

<http://cdn.aloha-editor.org/latest/lib/aloha.js> 1.1MB!

<http://imperavi.com/js/redactor/redactor.js> 168KB (odd, it is an encrypted
version)

The actual minified 8.1.0 version that you get after giving them a fake email
address is 41KB.

~~~
deliminator
The aloha core is 239KB (minified but not gzipped). Plugins can be anywhere
from 5KB to 50KB. The version on the CDN includes about 30 plugins.

I expect the size would be around 300KB if only the basic plugins are
included.

Still, it's a lot bigger than redactor - point taken.

~~~
brandoncapecci
Having a slightly larger size is a non-issue for people who aren't willing to
spend at least the 100 dollars...

------
dazbradbury
Looks super slick, but worth noting there are open source alternatives. For
example:

<http://jhollingworth.github.com/bootstrap-wysihtml5/>

This a bootstrap wrapper around the wysihtml5 project:

<https://github.com/xing/wysihtml5>

~~~
deliminator
Also Aloha Editor (GPLv2)

<http://aloha-editor.org/>

~~~
jeremyjh
Yeah but that has a GPL license. wsyihtml5 is MIT so would be compatible with
more open source licenses and usable for commercial software.

------
nlh
Very cool. Also worth noting these guys have a CSS framework (who doesn't
these days?) that looks similarly clean and elegant, though I didn't dig into
it enough to make a truly informed call. But still, worth noting...

<http://imperavi.com/kube/>

------
SquareWheel
Here's a previous discussion: <http://news.ycombinator.com/item?id=4034147>

------
grrrrbytes
I notice that still a lot of editors use inline css for their image-styling (I
assume, since the editor should correctly preview the way images are lined
up). But this obviously creates problems when you decide to style such images
a bit differently (adding some padding, whatever) without modifying tons of
generated content. A centralized css declaration would make this much easier.

Wouldn't there be a possibility to put these styles in an external stylesheet?
As the editor itself makes use of external css for it's own styling, adding a
new stylesheet for the elements it creates would not be very difficult, right?

I'm sure this is conscious practice that is done with a purpose in mind. I'm
only unaware of its explanation.

Also: I noticed that Redactor uses italic-tags (<i>) to style text as italic.
Isn't this bad practice in terms of semantics?

------
bergie
Then there is also my Hallo Editor, which is open source and uses
contentEditable <http://hallojs.org/>

If you're using Create.js for making your stuff editable, it has editor
abstraction that can drive Aloha, Hallo, and Redactor based on your
configuration

~~~
deveshz
Nice one!

~~~
bergie
Oh, and while not enabled by default, Hallo has quite nice image handling.
Some screencasts in [http://blog.iks-project.eu/semantic-enhanced-cmf-editor-
now-...](http://blog.iks-project.eu/semantic-enhanced-cmf-editor-now-
available/)

------
jijji
TinyMCE, CKEditor, CuteEditor, etc. There are over 60 public popular WYSIWYG
web editors, about half of them are mature and free. Why would someone want to
move to this, when it is fairly new and also not free?

------
hajrice
We're a happy paying customer of Redactor. Can't tell you how much we love it.
It's literary the PERFECT WYSIWYG editor. Highly recommend you try it if
you're looking for a fast & beautiful editor.

------
maebert
Version 7.6 is on Github under CC-non-Commercial:
<https://github.com/dybskiy/redactor-js>

Even version 8.03 (august 20120)seems to be free
(<http://imperavi.com/webdownload/redactor/getold/>), the new licenses got
apparently introduced in 8.1.0, which adds a plugin system and some other
stuff (<http://imperavi.com/redactor/log/>)

~~~
andybak
I don't mind giving them $99 but I'd like the latest source on Github so I can
fork and send pull requests easily.

[edit - ok. Not necessarily in Github but at least in a publicly accessible
DVCS repo]

------
orf
I love Redactor. I use it for an internal project and its easily the best
compared to TinyMCE and others. Its clean, produces clean markup (you don't
get random empty HTML tags like <strong></strong>..text) with no inline-
styles.

I wrote a Python library to take its output and shove it in a word document:
<http://pypi.python.org/pypi/HtmlToWord/>

------
andybak
Looks very nice.

A few things I can't seem to see how to do (that I can do with TinyMCE):

1\. Define some CSS classes that I want to be available to the user (I'd never
give colour and font controls to my users unless I wanted my lovely site
design to end up full of bright-pink 42pt comic-sans)

2\. Supply a list of already-uploaded images

3\. Supply a list of internal links to the 'add link' dialog

4\. Resize handles for images (or even better - some preset sizes) - I process
WIDTH and HEIGHT server side and replace the image with one resized on the
server.

5\. Allow a couple of CSS classes for images (although I had to hack MCE to
allow this)

~~~
chrisgaraffa
#2: Looks like the Insert Image dialog has a list of images that have already
been uploaded.

#4: There are no handles, but in Chrome 22 on a Mac at least I can drag
anywhere in the image to resize.

The CSS classes/styles are the reason I'll probably stick with CKEditor for
now. As cumbersome as CKEditor is overall, I can't lose the ability to add
styles that my non-technical clients can choose from when editing their
websites.

------
stuaxo
"unbelievably beautiful" - come on, it looks nice but it's just a wysiwyg
editor - noone is going to moved to tears.

This apple initiated hyperbole should stop, it's pretty wanky and just
devalues words.

Quiet understatement would be better; mention that it's well designed and easy
to use instead.

~~~
marknutter
Who's noone?

------
antidaily
I would probably move HTML button to the far right of the menu and maybe get
rid of strikethrough. Also, the P, H1, etc dropdown menu icon didn't
immediately make sense to me. But those are all minor gripes -- this is
really, really nice work. Congrats.

------
mrynx
Deobfuscated: <http://dpaste.de/1OJXR/>

------
axefrog
The Amazon S3 support seems to suggest that the authors believe it is
acceptable to store your AWS key ID and "secret" key in your client-side
JavaScript code. Am I missing something here?

~~~
deveshz
Yes you are absolutely correct. <http://imperavi.com/redactor/examples/s3/>

~~~
ceejayoz
The AWS secret is nowhere in that code. Just the ID, which is not privileged.

------
timdown
The first thing I tried to do (in current Firefox) failed: select text over
two paragraphs, change text colour. The selection then changes. Not a great
start.

~~~
lerouxb
I got the same in chrome. I then pressed cmd-z (undo) and it duplicated the
text that got changed without removing the color.

------
jeffehobbs
Looks wonderful. Love the "clean on paste" function.

~~~
mddw
TinyMCE have something like this, but yeah, it should be a easy-access
function.

The only downer for me : it uses JQuery, which I often avoid in admin pages.

~~~
chrj
Why?

~~~
mddw
Simply because my admin pages don't use a lot of JavaScript. Some Ajax, some
image resizing... straightforward stuff, no need of a library.

------
TA5335465
Btw, even though the current Redactor editor isn't open source, one of the
older versions is. It should be in Github

------
jameswyse
This looks fantastic, I think I'll be using it soon.

What are the limitations of the free trial and how long does it last?

------
zapt02
Can't move images in Firefox 15.

------
munyukim
Quite impressive; given that it's smaller and faster at the same time.

------
mkumm
Will give this a go next week with a limited number of our admins

------
bizodo
Is there a moo tools equivalent of this?!

~~~
jplarson
That was my first thought as well. For better or worse, I love MooTools and
vastly prefer it to jQuery. It's the occasional time like this whene I have
admit there's a cost to picking & sticking with the way less popular
framework.

MooEditable is pretty good, but I'd plunk down the cash to swap this one in in
a heartbeat.

------
axayratan
Such a simplistic but powerful tool.

~~~
deveshz
Indeed it is

------
ilaksh
What's wrong with CKEditor?

------
earless1
.

