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.
I really like Redactor and am considering switching to it from wysihtml5, but the one thing that has been holding me back is the design of the modals for things like editing links. I really wish they were more easily customizable because they look nothing like the design of my site. For example, I put the cancel button on the left and the ok button on the right and I use bootstrap to style it all. Redactor uses a link for cancel and switches the button order. I know this is a small complaint, but keeping consistent design is good design.
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.
I'm currently using both of these and they are both a bit of a mess. Don't waste your time with either of them unless you want to spend a ton of time fixing them or you just have really basic requirements.
wysihtml5 just doesn't work well, is missing a ton of features and the developer isn't really spending much time fixing issues with it. 71 open issues and 11 pull requests isn't a good sign imho.
For bootstrap-wysihtml5, I had to override quite a bit of the insert link functionality to get it to do some basic stuff with regards to handling the modal, focus and enabling/disabling buttons if things change. https://gist.github.com/3889641
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...
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?
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
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?
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.
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.
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)
#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.
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.
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?
What you're missing is that the secret isn't present. What's there is a policy, which is a way to preauthorize file uploads to S3. The policy is signed with the secret key ahead of time. It looks to me like all the fields in that form are safe to be exposed publicly.
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.
[+] [-] grayrest|13 years ago|reply
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.
[+] [-] latchkey|13 years ago|reply
[+] [-] deliminator|13 years ago|reply
[+] [-] VMG|13 years ago|reply
wait what?
[+] [-] andybak|13 years ago|reply
[+] [-] deveshz|13 years ago|reply
[+] [-] KaoruAoiShiho|13 years ago|reply
[+] [-] dazbradbury|13 years ago|reply
http://jhollingworth.github.com/bootstrap-wysihtml5/
This a bootstrap wrapper around the wysihtml5 project:
https://github.com/xing/wysihtml5
[+] [-] latchkey|13 years ago|reply
wysihtml5 just doesn't work well, is missing a ton of features and the developer isn't really spending much time fixing issues with it. 71 open issues and 11 pull requests isn't a good sign imho.
For bootstrap-wysihtml5, I had to override quite a bit of the insert link functionality to get it to do some basic stuff with regards to handling the modal, focus and enabling/disabling buttons if things change. https://gist.github.com/3889641
[+] [-] KaoruAoiShiho|13 years ago|reply
[+] [-] deliminator|13 years ago|reply
http://aloha-editor.org/
[+] [-] deveshz|13 years ago|reply
[+] [-] nlh|13 years ago|reply
http://imperavi.com/kube/
[+] [-] unknown|13 years ago|reply
[deleted]
[+] [-] SquareWheel|13 years ago|reply
[+] [-] grrrrbytes|13 years ago|reply
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|13 years ago|reply
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|13 years ago|reply
[+] [-] jijji|13 years ago|reply
[+] [-] hajrice|13 years ago|reply
[+] [-] maebert|13 years ago|reply
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|13 years ago|reply
[edit - ok. Not necessarily in Github but at least in a publicly accessible DVCS repo]
[+] [-] orf|13 years ago|reply
I wrote a Python library to take its output and shove it in a word document: http://pypi.python.org/pypi/HtmlToWord/
[+] [-] andybak|13 years ago|reply
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|13 years ago|reply
#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.
[+] [-] orf|13 years ago|reply
[+] [-] stuaxo|13 years ago|reply
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|13 years ago|reply
[+] [-] antidaily|13 years ago|reply
[+] [-] mrynx|13 years ago|reply
[+] [-] effinjames|13 years ago|reply
[deleted]
[+] [-] axefrog|13 years ago|reply
[+] [-] smarx|13 years ago|reply
See http://aws.amazon.com/articles/Java/1434.
Addendum: The "key" there means key in the S3 sense, as in the name of the object being stored.
[+] [-] deveshz|13 years ago|reply
[+] [-] timdown|13 years ago|reply
[+] [-] lerouxb|13 years ago|reply
[+] [-] jeffehobbs|13 years ago|reply
[+] [-] mddw|13 years ago|reply
The only downer for me : it uses JQuery, which I often avoid in admin pages.
[+] [-] TA5335465|13 years ago|reply
[+] [-] jameswyse|13 years ago|reply
What are the limitations of the free trial and how long does it last?
[+] [-] zapt02|13 years ago|reply