MODX TinymceWrapper Extra

Rarely do I find a MODX Extra that offers so much in the way of features, flexibility and customization that it completely changes how I think an Extra should work with MODX. Given that TinymceWrapper has successfully addressed one of the most fundamental and problematic areas for any CMS: Rich Text Editor (RTE) integration, makes it worthy of a closer look.

TinymceWrapper — created by donshakespeare of the MODX community — is a radical departure from how TinyMCE has typically been used with MODX, and it has raised my expectations for how a RTE (and file browser) should integrate with a CMS. This approach, using a “wrapper” with TinyMCE is not a new concept, it has been used with other CMS (Drupal among others). However, as it applies to MODX this is new territory, and long overdue.

The (MODX) Problem

Using a RTE with any CMS is accomplished in one of two ways:

• A RTE is hard-coded into the CMS application by default.
• The RTE is optionally installed by the user as an addon/plugin via an internal delivery mechanism.

The latter is the one used by MODX. It is however fraught with problems in terms of integration with the core framework and by extension the user-experience suffers. Here are a few reasons why:

• TinyMCE can’t simply be installed “as-is”. It needs to be modified (hacked) to work within the MODX framework. As you can imagine this creates problems and imposes restrictions for the plugin developer, some of which are extremely difficult to work-around.
• You may not always have access to all the TinyMCE configuration options due to the first point.
• Because of the hacking required it’s not always easy for the plugin developer to stay current with RTE feature updates, security fixes etc.
• Using TinyMCE (or any RTE) on the front-end presents its own set of Fresh Hell issues, largely due to security and permissions hurdles.

Of course, TinyMCE isn’t the only option for MODX.

Alternatives

Fortunately some developers have stepped-up to offer other RTE options:

• Redactor by modmore (commercial).
• CKEditor by danya_postfactum (free).
• TinyMCE Rich Text Editor by theboxer (free).

All are far superior to the (old) TinyMCE plugin, the latter finally bringing the much-improved TinyMCE 4 to MODX. But they still share a common problem: They must be integrated into the core framework. Nor can they be used on the front-end without Herculean effort, assuming they can be made to work at all. The MODX/RTE user-experience, while much-improved, is still far from where it should be.

A RTE must certainly be the most fundamental feature of any CMS yet it’s often the most problematic. Perhaps other CMS don’t have these issues, I don’t know, but as far as MODX is concerned it’s time to stop the square peg/round hole scenario. Why not avoid all the misery and keep the CMS (mostly) out of the equation?

What If... ?

The RTE could be made to work with MODX on the back- and front-end but exist as a completely independent free-standing application? Instead of being statically installed into MODX it would be delivered on-the-fly via the TinyMCE CDN, CacheFly.

And if that weren't enough, what if you also had your choice of 3rd Party file manager that hooks into both the TinyMCE and MODX but functions independently of both applications and provides a wide array of its own configuration settings? Too good to be true? Nope.

Flexibility

Even though the MODX Package Manager is used to install the Extra the technical hurdles required to integrate the actual TinyMCE RTE into the MODX framework have been neatly avoided because the editor now runs in parallel with, not inside MODX. The installation has simply created a link between MODX and the TinyMCE CDN.

With this link established TinyMCE can be easily configured from the MODX Manager with settings conveniently stored as Chunks (text files). This gives us full access to every configuration and plugin setting TinyMCE offers, now and in the future. The beauty is that TinyMCE can now be used seamlessly on the MODX back- and front-end, all of it delivered from the CDN. The result being a more unified, feature-rich, easily configured and maintained editor and file-browser.

File Manager

Naturally MODX has its own built-in file browser and while it works fine and performs basic functions like upload, delete, chmod etc. it is notoriously complicated and problematic to use on the front-end. This is where Responsive Filemanager (RFM)¹ comes into play.

RFM functions beautifully in parallel with TinyMCE and MODX as a completely separate application. RFM can be set as the default back-end file browser² which makes for a much richer and finely-tuned user-experience. Better still it can also be used on the front-end (as it is on this site) as part of TinyMCE or as a standalone file browser... or both, without the nightmarish problems associated with using the default browser.

Custom Upload Folder

The site Admin can set it up so registered members share a media folder or have their own personal folder which gets created automatically the first time RFM is launched, either from TinyMCE or as a standalone file manager. Once created it’s easy for members to manage their own media without the admin having to manually create folders or oversee every uploaded file. You can even encode the name of the member’s folder if you’re concerned about security.

Files, Files Files

Speaking of security you probably don’t want to allow members to upload every type of file in existence so you will want to lock things down a little, or a lot. With the RFM config file you can precisely control what files can be uploaded, previewed and edited and much more. This can be accomplished automatically with a global configuration file (the file is automatically added to each member folder on first launch), or you can manually adjust the settings on a member-by-member basis for truly customized control.

Other Fun Things

Here are few other built-in features that can be easily configured or disabled:

• Aviary image editor
• Google Docs viewer
• JSviewer

Set It Up Your Way

One of my biggest frustrations with the old way of doing things was the lack of customization. The Member area on this site uses six (6) forms for posting and editing different types of articles, and each form has numerous fields. What’s nice is that each RTE field can be configured differently on the same form. Different plugins, toolbar, menubar... anything I want. And I can do the same on the back-end. That is something I could have never done previously with the old TinyMCE plugin.

You can see where this level of configuration could be hugely beneficial for client projects, as well as your own. I like that there’s a continuity to the look and functionality between the back- and front-end. It not only works better, it feels better.

Looking Forward

TinymceWrapper has set the standard for RTE/file manager functionality and configuration within MODX. The downside is all the flexibility and customization can be overwhelming and confusing to setup. At times it can feel like a ...everything but the kitchen sink Extra.

It’s not that it’s overly difficult to configure at a basic level — assuming you’ve worked with TinyMCE (or one of the file managers) before — but there’s a lot to keep track of, and it’s spread across many configuration files. Given the insane degree of control on tap I’m not sure there is a more elegant, efficient, or streamlined solution to the scattering of files and settings. Though once you understand which file controls a certain feature it’s easier to manage, despite the clutter.

The actual configuration settings for TinyMCE and the various file managers is the same as if you were configuring them for use anywhere. Meaning you don’t need to learn a new way to configure TinyMCE specifically for use in MODX. If you’ve configured or customized TinyMCE elsewhere then it will be familiar territory, nothing has been MODX-ified in that regard.

Much like MODX, TinymceWrapper is for people who need (or want or like) a high-level of flexibility in their tools. Yes, you can install TinymceWrapper with little or no additional configuration and never look back. Easy peasy lemon squeezy. If however you want a tailored experience then you’ll need to get hands-on.

A Note About NewsPublisher

If you currently use BobRay’s excellent NewsPublisher plugin for front-end editing then I would say you absolutely must use TinymceWrapper because the alternative is simply no longer a realistic option. TinymceWrapper has completely removed all dependency on NewsPublisher for rich-text editor integration. NewsPublisher can now exist on its own without us having to suffer the shortcomings of RTE or file browser related issues which should come as welcome news to BobRay.

1 TinymceWrapper also includes the elFinder file manager.

2 elFinder can also be set as the default Manager file browser.