Best WYSIWYG Embedded Editor: Redactorjs


RedactorJS

Most website developers have heard of TinyMCE or CKEditor. They're the "standard" in WYSIWYG embeddable editors, but they're slow, bulky, and look like they were built during the stone-age (ok, so most of that applied to the old version of them that I tested a year ago, but they went years without much change, so I assume they still suck).

During our search to find the best editor for our CMS Sell Ninja, we became desperate and even considered building one from scratch. Then one day we ran into Redactorjs. We were initially skeptical because all other solutions had proven inadequate. They were either too slow, ugly, or unable to handle the kind of HTML editing we required. Redactor blew them out of the water. The design is minimalistic (not cluttered with toolbars), it's extremely fast loading, installation is easy, and the biggest selling point for us: It can edit in an iframe with custom CSS files.

Yes, you can edit an entire HTML page without it effecting the page you're on!!! This is huge, plus, it allows for true preview-as-you-edit. Another unique feature (they invented) is called "air mode", and it allows for editing text in place with a floating toolbar. of course, all the ease of use short cuts are there, like cmd-c & cmd-v (copy-paste), drag/drop upload images, links, bold, italic, strike, tables, etc.

Although Redactorjs is the best we've seen, it's not perfect. The code view is great with a black background and white text. Having that kind of contrast is really nice, but we think it could be improved by using some flavor of syntax highlighting. They also frown upon underlined words on the web (so there is no underline button in the toolbar). Their motto is "If it's not a link, it shouldn't be underlined". Our CLIENTS don't agree and complained frequently, so we were forced to develop a Redactor plugin (which was very easy) to solve their woes. The color pickers are nice, but the colors are limited. (turned into a plugin for their latest version [not included by default]) An unlimited color picker would be optimal. Also, images can be very difficult to move around. Dragging an image resizes it (fixed in their new version!), clicking on it brings up a menu (which lacks an input for alt text [they named it "title" instead of "alt", which is easier for non-developers, but a lil confusing at first for developers], and should really have the options to make it into a link rather than fussing with highlighting and adding a link around it [added in latest]). The last big downside is no font-family options. Apparently a plugin was just created to fix this (we haven't tested it yet), but what we really want to see is a Google Fonts dropdown (like this).

UPDATE (Aug 25th 2013): As you can see, a lot has changed in just a short period of time. Imperavi really has a passion for their products and they are very consistent in making improvements and taking feedback. No complaints can be made about their work ethic! The greatest thing (in my opinion) that they have done recently is adding copy-paste image uploads. That is incredibly difficult to do with cross-browser compatibility. Awesome work Imperavi!

Overall, Redactorjs is by far the greatest WYSIWYG embedded editor to date, and we can't wait to see what the future holds for this innovative product.




Shane Stebner

Author: Shane Stebner

Shane is a successful web-developer specializing in responsive design, and the open-source LAMP stack. Over the years, he's gained in-depth experience with Stripe, Twilio, PhantomJs, Authorize.net, PayPal, Facebook, Twitter, and many other plugins/APIs.


comments powered by Disqus