TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Redactor - WYSIWYG editor on jQuery

183 pointsby deveshzover 12 years ago

26 comments

grayrestover 12 years ago
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.<p>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.<p>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).<p>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.
评论 #4652454 未加载
评论 #4652039 未加载
评论 #4652825 未加载
评论 #4654392 未加载
评论 #4652000 未加载
评论 #4652099 未加载
dazbradburyover 12 years ago
Looks super slick, but worth noting there are open source alternatives. For example:<p><a href="http://jhollingworth.github.com/bootstrap-wysihtml5/" rel="nofollow">http://jhollingworth.github.com/bootstrap-wysihtml5/</a><p>This a bootstrap wrapper around the wysihtml5 project:<p><a href="https://github.com/xing/wysihtml5" rel="nofollow">https://github.com/xing/wysihtml5</a>
评论 #4652411 未加载
评论 #4652095 未加载
评论 #4652023 未加载
评论 #4651923 未加载
nlhover 12 years ago
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...<p><a href="http://imperavi.com/kube/" rel="nofollow">http://imperavi.com/kube/</a>
评论 #4651722 未加载
SquareWheelover 12 years ago
Here's a previous discussion: <a href="http://news.ycombinator.com/item?id=4034147" rel="nofollow">http://news.ycombinator.com/item?id=4034147</a>
grrrrbytesover 12 years ago
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.<p>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?<p>I'm sure this is conscious practice that is done with a purpose in mind. I'm only unaware of its explanation.<p>Also: I noticed that Redactor uses italic-tags (&#60;i&#62;) to style text as italic. Isn't this bad practice in terms of semantics?
bergieover 12 years ago
Then there is also my Hallo Editor, which is open source and uses contentEditable <a href="http://hallojs.org/" rel="nofollow">http://hallojs.org/</a><p>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
评论 #4652421 未加载
jijjiover 12 years ago
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?
hajriceover 12 years ago
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 &#38; beautiful editor.
maebertover 12 years ago
Version 7.6 is on Github under CC-non-Commercial: <a href="https://github.com/dybskiy/redactor-js" rel="nofollow">https://github.com/dybskiy/redactor-js</a><p>Even version 8.03 (august 20120)seems to be free (<a href="http://imperavi.com/webdownload/redactor/getold/" rel="nofollow">http://imperavi.com/webdownload/redactor/getold/</a>), the new licenses got apparently introduced in 8.1.0, which adds a plugin system and some other stuff (<a href="http://imperavi.com/redactor/log/" rel="nofollow">http://imperavi.com/redactor/log/</a>)
评论 #4654375 未加载
orfover 12 years ago
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 &#60;strong&#62;&#60;/strong&#62;..text) with no inline-styles.<p>I wrote a Python library to take its output and shove it in a word document: <a href="http://pypi.python.org/pypi/HtmlToWord/" rel="nofollow">http://pypi.python.org/pypi/HtmlToWord/</a>
andybakover 12 years ago
Looks very nice.<p>A few things I can't seem to see how to do (that I can do with TinyMCE):<p>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)<p>2. Supply a list of already-uploaded images<p>3. Supply a list of internal links to the 'add link' dialog<p>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.<p>5. Allow a couple of CSS classes for images (although I had to hack MCE to allow this)
评论 #4652040 未加载
评论 #4652017 未加载
stuaxoover 12 years ago
"unbelievably beautiful" - come on, it looks nice but it's just a wysiwyg editor - noone is going to moved to tears.<p>This apple initiated hyperbole should stop, it's pretty wanky and just devalues words.<p>Quiet understatement would be better; mention that it's well designed and easy to use instead.
评论 #4654695 未加载
antidailyover 12 years ago
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.
mrynxover 12 years ago
Deobfuscated: <a href="http://dpaste.de/1OJXR/" rel="nofollow">http://dpaste.de/1OJXR/</a>
评论 #4654524 未加载
axefrogover 12 years ago
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?
评论 #4651763 未加载
评论 #4651742 未加载
timdownover 12 years ago
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.
评论 #4654788 未加载
jeffehobbsover 12 years ago
Looks wonderful. Love the "clean on paste" function.
评论 #4651739 未加载
TA5335465over 12 years ago
Btw, even though the current Redactor editor isn't open source, one of the older versions is. It should be in Github
jameswyseover 12 years ago
This looks fantastic, I think I'll be using it soon.<p>What are the limitations of the free trial and how long does it last?
zapt02over 12 years ago
Can't move images in Firefox 15.
munyukimover 12 years ago
Quite impressive; given that it's smaller and faster at the same time.
mkummover 12 years ago
Will give this a go next week with a limited number of our admins
bizodoover 12 years ago
Is there a moo tools equivalent of this?!
评论 #4652976 未加载
axayratanover 12 years ago
Such a simplistic but powerful tool.
评论 #4651537 未加载
ilakshover 12 years ago
What's wrong with CKEditor?
earless1over 12 years ago
.