
Redactor - javascript (jQuery) WYSIWYG editor - tortilla
http://redactorjs.com/
======
chmike
It deserve it's fantastic qualifier. It's the first wysiwyg editor I test that
works correctly with iPad. Excellent work.

I would love to make it simpler to insert iPad images. Basically make the
upload intermediate step not visible. Unfortunately it is not possible to
upload images from the iPad.

edit: unfortunately copy past doesn't work on iPad. The selection is difficult
and the copy is simply ignored. Past inserts whatever is in the clipboard.

~~~
d0mine
Copy-paste works for me on iPad

~~~
chmike
It is the copy operation from inside the editor text area that doesn't work.

If you copy text in another place, it gets stored in the clipboard and the
past operation works as expected. If you copy text selected in the editor text
area, the clipboard is left unchanged. Pasting gives you whatever was in the
clipboard.

So trying to copy text from the editor text area and pasting it in another app
or place doesn't work since it's the copy operation that doesn't work.

The text selection is also not working as expected since it behaves slightly
differently than other iPad text editable text field. But this is not a real
problem.

~~~
d0mine
It most certainly works in the provided example from the article, the same way
as in other text editors on iPad. We might have different versions (builtin
browser in news:yc on iOS 5.1.1).

------
NathanKP
One fairly important thing I couldn't figure out how to do was move the image
around. I guess I expected it to work like Wordpress or Blogger's post editor
where you can drag the image around to adjust its location in the text.
Instead I could only resize the image using click and drag, not move it.

~~~
alecperkins
I'd love to see a drag-and-drop editor that doesn't require the image be
absolutely positioned and can have text interact with the image. Somewhat like
iBooks Author, but without fixed page sizes.

~~~
dools
That's what we do in Decal[1]. It's very hard to get right - we're reasonably
close but it's still a little finicky. Basically while you drag the image
around it follows your mouse but when you drop it, it tries to guess the best
place to insert it into the HTML so that it will most closely approximate your
desired position. You can see it in action without signing up in our
instructional video on placing images:
<http://www.decalcms.com/page/Support/#instructionalVideos>

[1]<http://www.decalcms.com/page/4_minute_challenge>

------
tzury
Selecting a word, making it "bold", looking at the code, seeing <b> word..
</b>.

Shouldn't it be <strong></strong> ?

~~~
kijin
There's a reason why W3C didn't just replace <b> and <i> with <strong> and
<em>. A lot of people think they're just equivalent, but a lot of other people
disagree. "Please display this in italic" arguably sends a different message
from "Please emphasize this", and in some settings they may not be
interchangeable.

~~~
celoyd
The classic example is screen readers. A phrase that’s italicized because it’s
important should probably be slightly louder, but a phrase that’s italicized
because it’s foreign should probably be pronounced slightly slower. Those are
entirely orthogonal things, and it’s useful to distinguish them.

Semantic HTML + CSS can be taken too far, but having separate layers gives you
a lot more flexibility than presentational HTML alone, which tends to be very
brittle.

~~~
kijin
If <i> _means_ something different from <em>, you can keep them distinct while
keeping everything "semantic". In fact, you could have a dozen different HTML
elements for each use case of italics, e.g. <foreign> for foreign words and
<t> for titles of books and movies, and it will be a mess, but it will still
be "semantic". So the semantic-vs-presentational argument doesn't even apply
here.

Meanwhile, the whole concept of using italics for emphasis is a Western idea.
CJK languages, for example, don't use italics for emphasis, and most of their
italic fonts actually look terrible on screen.

~~~
celoyd
I don’t understand what you’re arguing for or against here.

~~~
emil0r
CJK = Chinese Japanese Korean I believe. There is no concept of italics in
those languages.

~~~
celoyd
Yes, but if anything that seems to contradict the gist of the first paragraph
of the comment.

------
MechanisM
Twitter Bootstrap enabled editor <http://jhollingworth.github.com/bootstrap-
wysihtml5/>

~~~
nabilt
I just added bootstrap-wysihtml5 to a project and I'm liking it. My only
problem is it won't let me type comments in the HTML view and I can't figure
out how to dynamically resize the text area. Redactor seems to let you do
this. Looking forward to trying this out as well.

Edit: Redactor looks like it retains formatting for the HTML. That's enough to
make me switch.

------
skyhook_mockups
This is ok... although there are lots of better alternatives. Some issues:

\- No way of adding headings? * edit: sorry it's under styles.

\- Clicking bold, italic etc should expand the selection to the word that the
cursor is in.

\- Setting formatting should restore the cursor to the editing area

\- Clicking into a formatted area should toggle the buttons in the toolbar
that apply

\- image alignment a little clunky. Why not add a simple overlay for align
centre|left|right on mouseover?

On the plus side image resizing is done well.

One thing that annoys me no end is that all editors I've ever used apply block
level formatting (h1,2,3 etc) for an entire paragraph when only a sentence is
selected. The most intuitive approach would be to break the sentence out of
the paragraph and style only it. As a user I expect what I have highlighted to
change not all of the surrounding text as well!

These things aren't easy to get right, especially cross browser. I recently
put together an editor to exactly suit my needs (uses contenteditable instead
of an iframe), but it's chrome, firefox and ie9+(? i think) only. Trying to
get something usable across legacy browsers is ridiculously hard.

------
joe_the_user
I played with such javascript things a few years ago.

They were indeed hard to create and (at least then) relied on a detailed know
of the browser and platform's characteristics.

But given the varying tasks which call for that kind of editor, what I'd
really like to see is a small semi-standard tool or framework for the
construction of such editors. As it is now, one must either use an existing
tool having too many or too few features or go to the great lengths of
modifying one.

------
phleet
Bolding (and other similar operations) should use Cmd instead of Ctrl on OS X.
Google docs does this

------
jabo
I don't like the fact that when I resize the editor the content disappears
until I complete the resize. During the resize (click on the tab at the bottom
and drag), the content disappears.

------
JiPi
Is code available on Github?

This seems really promising at first. Would love to try it soon but it really
needs a public repo. English documentation would be a great plus too! :)

------
jejacks0n
I'd suggest <https://github.com/jejacks0n/mercury> if you're using Rails.

Full disclosure, I'm the primary author.

------
websirnik
Have been using it for a while now. The latest version is pretty stable.
Ability to resize images inside the editor is pretty cool.

------
fidz
I wonder why people make so much different rich text editor. while i only use
Markdown format for my projects. I wonder about the Rich Text to HTML
compatibility (some rich text editor have problem with interpreting formatted
text into the HTML, since then i afraid to use rich text editor and more using
it).

~~~
jakejake
Markdown is great for projects where the users don't mind writing using code.
WYSISYG editors are nice for people who are not technical at all to manage
their website and things like that.

They do sometimes produce really terrible HTML though, especially because
people copy/paste from MS Word and it results in a bunch of garbage.

~~~
chmike
Markdown has a lot of shortcoming because it maps to basic html. i.e. It
ignores starting numbers and numbering gaps.

Markdown is not a standardize encoding. Many markdown editors don't support
tables for instance.

Finally, as an editor, it lacks the easiness to add images and such. They need
to be uploaded in a web server.

It thus has significant limitations before it can be considered a serious rich
text alternative.

I do use it and I would love it had a better support because it is easy. What
I like is that when writing we focus on the text, not the formating.
Formatting is implicit.

------
alecperkins
The fullscreen mode is a nice touch, as is the image resizing, provided the
cursor doesn't leave the image boundary. It's frustrating that, like other
editors, it doesn't differentiate so well between line and block actions.
Also, I was very disappointed that I couldn't drag the image to reposition it.

~~~
tvon
FWIW, both MCE and CK have fullscreen mode.

------
antiterra
Looks nice, but I was unable to stretch the image back to its original size
after shrinking it. It kind of inches a little bit and then stops. It's
irritating to see the page announce itself as "fantastic" when it's clearly
not properly finished.

~~~
kalininalex
Interesting. It's seem to be the issue with capturing mouse events. If you
move the mouse out of the image quickly, it'll lose it and the resize will
stop. But if you move the mouse slowly so that it always stays over the image,
it'll resize it. It's a workaround to use for now (but sure, it's a problem
with the implementation).

------
MechanisM
This is another one russian text editor - <http://elrte.org/demo>. Comes with
filemanager - <http://elfinder.org/>

------
dybskiy
I think this code is much easier accessed when hosted on GitHub so I'll
maintain the repo for now: <https://github.com/dybskiy/redactor-js>

------
aichi
It is maybe nice, but not good, because it is not generating same output in
all browsers. Also copying from word (most needed) is not filtered properly
and same in all browsers.

------
rquantz
Can anyone recommend an editor with a really good API for making custom
buttons? My admittedly shallow research hasn't uncovered anything that is
particularly joyful to use.

~~~
godDLL
This one isn't bad on that front, you should take a look.

------
matthewking
Looks very nice, I'm glad there's some movement in this space lately.

Ran into a bug though, if you insert a table then return twice after it, all
content below the table is removed..

------
josscrowcroft
Great work, really nice to use. Would love to see this as a WordPress plugin
(sick of the default editor) but that would require plugin support, as per the
roadmap.

------
kijin
Firefox 12. Font color selector doesn't work in full-screen mode. (The color
palette doesn't appear when you click on the font color icon.)

------
bdfh42
On the face of it a very nice editor - good work.

some confusion on licenses - MIT is available but with a caveat and I don't
think you can do that.

~~~
amper5and
There's no caveat. It says "Redactor распространяется бесплатно по лицензии
MIT или GPL, на ваш выбор." which literally means "Redactor is distributed
freely under the MIT or GPL licenses - it's your choice."

Edit: This goes to the lack of English docs, not to your misunderstanding I'm
sure.

~~~
drewmclellan
In the source of the script itself, it has:

    
    
        Dual licensed under the MIT or GPL Version 2 licenses.
    

...which is how jQuery is licensed, as is common for plugins and other jQuery-
based projects.

------
tzaman
Thank you, but I'm sticking with <https://github.com/xing/wysihtml5>

~~~
veb
Why?

~~~
tzaman
1\. Because all the documentation is in english

2\. Because it doesn't use inline styles

3\. Because it produces valid html5 markup

4\. Because it's proven end tested in Basecamp Next

5\. Because it's made by Xing

------
Timmy_C
It uses inline styles. That's an issue for me. It also looks like it doesn't
do nested lists.

On the other hand, full-screen mode is really cool.

~~~
CCs
Nested list works: create a list, select a couple lines, indent.

~~~
Timmy_C
You're right. I guess I was trying to use the list icons.

------
president
First major competitor to TinyMCE i've seen. Great work, this is awesome!! I
hope this becomes big.

------
MechanisM
It's good but codebase is so huge..

------
dcesiel
Is there english documentation? I only see the zip download. Is this code on
github?

------
alanh
These are terrifically hard to make, and I applaud anyone who take the time
and effort.

But, a problem: Tapping Bold with no text highlighted (the expectation is that
whatever you type next is bold) not only doesn’t work, but steals focus and
you lose your cursor

You should not consider this library production-ready!

~~~
godDLL
> You should not consider this library production-ready!

Surely you kid, this is the nicest one I am to see come out yet. File a bug
mate.

~~~
alanh
How extensively have you tested it? Obviously you don’t give a rat’s ass for
UX

~~~
RegEx
That's taking things a bit far, don't you think?

------
wamatt
Would be great if it supported clipboard pasting of images like Gmail does.

------
flippyhead
curious as to why this is different/better than so many other editors?

~~~
dumphuk
Agreed, didn't seem that special .. now this on the other hand:
<http://www.aloha-editor.org/>

~~~
bergie
Yep, Aloha is very cool, especially now that they're replacing ExtJS with
jQuery UI to make it lighter. It is unfortunate that they've stuck with the
problematic AGPL, though.

That was the primary reason that made me start <http://hallojs.org>

~~~
dcesiel
I'm not really familiar with the AGPL. Why is it problematic?

~~~
bergie
It differs from GPL in that it is "viral" also when served through the web, so
it could mean that your whole web application must either be AGPL, or you must
buy an exception from the developer.

AGPL is a new license, and so there are few examples of how it affects things
in practice. Many developers (especially ones building open source under less-
strict license) prefer to keep their distance.

~~~
mbreese
Not to mention that there is no way to know how a viral license even works
when dealing with a non-linked language like Javascript or HTML.

The goal of the AGPL was to keep people from modifying GPL programs that were
essential on the backend, but then keep their modifications hidden. With the
normal GPL, if you don't distribute a binary, you don't have to release your
code. With the AGPL, the goal was to force people to also release backend
code. But code licenses start to get very shaky when we aren't talking about
binary-linked modules.

------
dutchbrit
MIT license is the best part - and great that it's fully featured!!!

------
philipes
I was looking for something like this earlier today.

------
Johnyma22
Also see <http://beta.etherpad.org> for a nice editor

~~~
popee
Etherpad uses java, so if you don't like that try etherpad-lite based on
node.js. Like ~10x less memory at startup :-)

<https://github.com/Pita/etherpad-lite>

------
buremba
it seems lightweight even if the minified version is 40kb.

~~~
wavephorm
I think we're starting to approach a time period where lamenting over
filesizes over 10KB should be a thing of the past.

I have a fairly typical internet connection, and I can download 40 MEGABYTES
in about 8 seconds.

~~~
joshfraser
I disagree. The size of the typical webpage is growing at faster rate than
people are upgrading to faster internet connections. The average webpage is
now > 1MB. It matters because adding even a tenth of a second to your load
time can cost you in pageviews and revenue.

------
theuglyfggt
Boring. IBM can do much more, fggggt. lol <http://maqetta.org/>

~~~
opendomain
IBM did create an excellent open source wysiwyg html5 editor
<http://maqetta.org/> \- check it out to compare

~~~
n-gauge
Looks Good!, unfortunately slow as hell...

~~~
repoman
wow IBM still after this?

