At modmore we develop tools that we hope are simple to use for developers, but especially for the non technical users that work with them every day. They simply want to edit the text on a page, add some images to a gallery, or even build bespoke landing pages without touching a line of html, and that's what our products help them achieve. 

A while ago a conversation with Zack on the MODX Slack made me realise how sometimes "simple" is equated with "lacking features or flexibility", and that we may not be doing the best job in showing the underlying power and features in our tools. This conversation in particular was about Redactor, our rich text (or WYSIWYG) editor. 

Here's what Zack said:

Redactor looks cool and all, but tiny just has so many more elements. Like can you insert indentation, HRs, paste Word or paste plain text, insert special characters, or anchor tags, strikethrough, codeblocks, divs, or pre tags, can you manage tables, or view prettified source?

After I explained to him that redactor does in fact have all of those features, he asked…

Then why does redactor have like one toolbar with 12 icons and tiny have one toolbar of 20 icons plus a menu of 8 items with sub dropdowns of like 30 more?

The answer is that a powerful and flexible editor does not have to look complex to be powerful. It can look incredibly simple to use and assuring to users, without sacrificing functionality that people really need. 

Take image handling as an example. For a user to upload and insert an image into the content, these are the steps they have to take in TinyMCE:

  1. Click the Insert Image button in the toolbar.
  2. Hit a tiny icon in one of the three tabs (two in the new TinyMCE). This will open the MODX media browser.
  3. Browse to the folder the image should be uploaded to in the sidebar.
  4. Hit the tiny upload icon, or use the context menu to open the multi file uploader. 
  5. Select the file from their computer.
  6. In the multi file uploader, click the upload button and wait for the upload to finish.
  7. Close the uploader.
  8. Find the new file in a list of potentially hundreds of images. 
  9. Click the chosen image, and click OK to select the image.
  10. Back in the TinyMCE window, click OK to add the image to the page. 

Now look at how Redactor solves this. 

  1. Click the Insert Image button on the toolbar.
  2. Select the file from their computer.

At this point, the image will be uploaded and automatically inserted into the content. 

While that upload happened, Redactor may have created a new directory to hold the images based on the defined upload path containing placeholders for dynamic paths (like [[+year]], [[+month]], [[+username]], [[+alias]], [[+parent_alias]] and many more). It also made sure the file name was unique by appending an incrementing number to the file name (e.g. image.jpg becomes image_2.jpg if image.jpg already exists), and because it supports media sources out of the box it may have actually uploaded the image to S3, or Dropbox, or other remote servers. 

Maybe you're thinking that's all fine and dandy, but where are the alignment options? Classes? Alt tags? Adding a link? All those options are available once you click the image and hit Edit Image in the image overlay. Some of these features are disabled by default to provide the least intimidating defaults, but with a simple setting change they are ready. 

In terms of offering clients features that they can use to manage their own content, the focus on ease of use in Redactor makes TinyMCE look bloated and distracting, rather than empowering. The new version of TinyMCE is a major improvement over the old one, but in my opinion there are still too many buttons, icons and steps to take for a simple action. 

Does that mean Redactor is perfect? Absolutely not, and there's no denying that TinyMCE has features that Redactor doesn't. In the new Redactor 2 release that is currently available as pre-release, we've added a number of features that will make TinyMCE power users feel more at home with Redactor, but even then it wont have all the options or buttons - on purpose. 

With Redactor 2, we offer you the ability to completely customise the editing experience through roughly 150 settings, but at its core we want it to be simple for your users. So next time you're building a MODX project, why not consider using Redactor? You'll earn back the 25 bucks by finishing your training sessions in half the time because your clients actually understand how to add an image, and if you have questions we're here to help.