New rich text editor for ProcessWire

This week we take a look at a new rich text editor for ProcessWire, why we chose it, some highlights, screenshots, and why we think you’ll like it.

As mentioned in previous posts, CKEditor 4 has an end-of-life scheduled for 2023. Soon we've got to use something else for the core rich text editor. The obvious editor to migrate to would be CKEditor 5. But in last week's post we talked about why that's not ideal. And at the end of that post I mentioned that I found an editor that really is an ideal next step and upgrade.

Some things we’ve been looking for in a rich text editor

At least when it comes to the clients I work with, the rich text editor is a really important part of the editing experience in ProcessWire, so it's a decision that I take seriously and spent a lot of time with. Here are some of the things I was looking for:

• An editor that clients can be really comfortable with, and that requires little or no training. At the same time, it has to be broad and powerful enough to accommodate any rich text editing need that comes up. This was largely the case with CKEditor 4, so I was looking for something similar in these respects.

• A product that has a reliable and proven history, and with a solid company behind it with a viable model to realistically support the software over the next decade. This is something that CKEditor has and I didn't think we should give that up. Basically we should have a product that has people dedicated to it as much as we're dedicated to ProcessWire, and with as much "road time" as ProcessWire.

• Something that can be a drop-in replacement for CKEditor 4, in that it doesn't break or modify existing markup unnecessarily. Likewise, an editor that can do everything that CKEditor 4 can do, and even more.

• ProcessWire relies upon both "regular" and "inline" editing modes for different cases. We needed an editor that replaces those two modes in CKEditor and works in the same way (and provides the same benefits). We needed an inline mode that we could delay initializing until the user hovers it, enabling us to have potentially hundreds of editors available at a time.

• An editor that would be predictable for users, easy for us to support, and reasonably simple to adapt to various different situations. Solid yet flexible.

• An editor that is a clear upgrade over CKEditor 4, providing more features, customization, improved aesthetics, etc. Something where there's a reason to upgrade, beyond CKEditor 4 just going EOL. At least when it comes to things I'm looking for, CKEditor 5 didn't have enough new to be a motivating upgrade worth the "starting over from scratch" required to upgrade to it. (At least not without getting into the commercial features of CKE 5). So I was looking for something that might feel like even more of an upgrade than CKEditor 5, if possible.

• ProcessWire maintains RTE-specific custom editing plugins (for inserting/editing links and images) and uses the editor in various unorthodox scenarios (like repeatable types). This takes a lot of integration code, so having a strong API and really solid documentation was key. CKEditor has always had a comprehensive API and documentation, but I always struggled a bit with it too. (For instance, if you want to find a list of CKEditor 4 events, they are hidden behind a dropdown that you'll only learn about from StackOverflow). I was looking for a real improvement over CKEditor's API and documentation. I felt like a lot of my CKEditor coding time was spent on guesswork and trial-and-error, so was looking for a better API and better documentation.

• After last week's post, some people had suggested that maybe I was going to write an editor from scratch or use some kind of editor-building toolkit. In fact, I'm looking for the opposite of that. I'm much more of a PHP coder than a JS coder, and I'm in no position to build an editor from scratch. I wanted something that was built by JS experts that had put as much time into their product as we've put into ProcessWire.

• Something that has a GitHub repo with a long history of active development, has active development almost every week, and that will clearly have active development in the years ahead.

• Software license was also a factor. Either MIT or MPL license are the safest bets for us. CKEditor 5 had moved to a license that was not compatible with ours, though they were graciously willing to give us permission to use it anyway. So that was not a factor as it relates to CKEditor 5, but was a factor to consider when looking at different editor options.

Those are some of the biggest things I was looking for, or that I thought we were looking for. Luckily I found something that meets all of these needs really nicely, but I've been reluctant to reveal what it is until I could show you rather than just tell you.

Timeless tools and a decade of evolution

It may be kind of a controversial editor choice in that it appears like a step backward, while actually being a step forward. It's an editor that has in fact been around longer than ProcessWire, and was even in the first version of ProcessWire. Perhaps it is even the most well known RTE in existence?

Does that make it obvious what it is? It's returning to our roots in a way, but the TinyMCE of today (version 6.2.0) is a completely different animal than the version 3.x that last appeared in ProcessWire. And yet, it's that same editor we started with, but with a decade of evolution. It has evolved in the same way ProcessWire has.

It's not an editor that was thrown out and then replaced by another different editor under the same name (looking at you CKEditor). Some people value the kind of change that CKEditor has taken (out with the old, in with the new). But I place more value on the kind of evolutionary change that TinyMCE has adopted. To me it says a lot about how they got it right the first time around. I'm always on the hunt for timeless tools, and TinyMCE appears to be one of them.

An easy upgrade

I've been using InputfieldTinyMCE in ProcessWire for 2 weeks now (this post is written in it) and TinyMCE 6 feels like a big upgrade from CKEditor 4. Yet it's also a direct replacement for CKEditor 4 because CKEditor and TinyMCE have been 2 leading RTE's for a very long time. They've followed a similar path, and in many ways duplicated features and capabilities to remain competitive with one another (think Honda and Toyota). It seems like CKEditor 5 marks the point at which they started to go in a different direction. TinyMCE has continued moving forward, evolving on the same path, while CKEditor 5 started off on a different path. In any case TinyMCE 6 is a nice upgrade from CKEditor 4, and when it comes to the ProcessWire context, I think a better upgrade than CKEditor 5.

A closer look

In the last post I mentioned you'd be able to start using the new rich text editor this month. I stand by that and it'll be available to install by or before this time next week. I've got it working quite nicely now though am going to give it a few more days before releasing it, just to make sure I've fixed any obvious bugs before asking others to test it. After all, I've spent a lot of time testing it and coding for it, but not yet a lot of time using it in real life editing situations, so that's what I'll be doing this week.

Module configuration

When you first install InputfieldTinyMCE, you can choose what UI style and Content style you'd like to start with. Yes there's a dark mode! We'll have a look at these different styles a a bit later.

Field configuration

Here's the field configuration screen. It's more than I can fit in one screenshot so it's split into a few.

Toolbar configuration

The toolbar configuration lets you select which tools you want to use (via InputfieldTextTags) and lets you drag to order them. Following that is a list of all the tools available for the toolbar. Hovering them provides a short description while clicking them takes you to TinyMCE’s full documentation on the tool.

Plugin selection

Editor plugins are selectable from checkboxes:

That's a big screenshot! Here's the rest:

Other settings

Editor with menubar and toolbar

Here's a screenshot of the Regular editor using the default Oxide UI skin and with both menubar and toolbar enabled.

Menubar drop downs

The optional menubar provides drop-downs that give you access to all features added by your selected plugins.

Styles dropdown

The Styles dropdown, which is an optional part of the toolbar:

Image and link dialogs

The Image and Link tools work exactly the same as they do in CKEditor (since both features are mostly powered by the ProcessWire admin rather than the editor):

Table tool

For those that need it, TinyMCE also comes with a really nice Table tool:

Bulleted-list and numbered-list tools

Editor with toolbar only (no menubar)

The above screenshots show both the menubar and the toolbar, but either (or both) are optional. Here's what it looks like with just the toolbar, which is more what you may be used to from CKEditor:

Editor with menubar only (no toolbar)

You can also go with just the menubar (and no toolbar):

Distraction free mode

If you want, you can also configure it completely naked with no menubar or toolbar! This is what's called the distraction free editing mode where the RTE features are all in context menus and only revealed when applicable.

Drag-drop image uploading and resizing

You can drag and drop images directly into the editor and it'll take care of uploading them to an Images field on the page automatically, just like in CKEditor. But unlike CKEditor, you can drag to resize the images directly in the editor and new image size variations will be created automatically from the source file. Granted, it's mostly ProcessWire doing this rather than TinyMCE (or CKEditor) but TinyMCE provides the API that makes it possible to connect it with ProcessWire in ways that make it all seamless.

Oxide-dark UI

Here's what it looks like with the Oxide-dark UI skin (selected from the module settings):

And here's what it looks like if we also add in the Wire-dark content style (also selected in the module settings);

Document content style

Also available is the Document content style, which makes your editor look like you are editing a document in a word processor:

Five UI

This is an alternative to the default Oxide UI:

Five also comes with its own dark mode as well:

Inline editing mode

The inline editor behaves pretty much exactly like the CKEditor version you are already used to. Here's the TinyMCE version at the bottom of this screenshot:

The inline editor after we click in it (using the Oxide-dark skin):

Multi-language

If you are using ProcessWire in some language other than English you'll be glad to know that InputfieldTinyMCE comes ready-to-use with translations for 60 different languages. And it should pick up the correct language automatically (if it doesn't, you can map language packs to languages in the module settings).

Comments

• 

  HMCB

  • 2 years ago
  • 141

  ★★★★★

  So clean. Very sweet. I especially love the full doc editing mode! Can’t wait to use it Ryan. Thanks for this amazing integration and forethought into the future of PW.

  Reply

• 

  Marc

  • 2 years ago
  • 51

  You really had me going with the riddle Ryan. I kept thinking "surely not TinyMCE!" so it was great to read that it's really a nice option now. Thanks as always for walking us through your thoughts on the topic, I'm looking forward to trying it out with ProcessWire again.

  Reply

• 

  Jan

  • 2 years ago
  • 31

  This looks really nice!! Will it also support the frontend editing features through the PageFrontEdit module? Would be awesome because my pagebuilder module would than be able to use the inline edit feature. But in any case looks like a great improvement!

  Reply

• 

  Brendon Kozlowski

  • 2 years ago
  • 52

  Thank you for such a detailed write-up, Ryan, and I'm very much looking forward to testing this out, and against some current content. It seems TinyMCE has core support for Description List elements which CKE4 does not, so that will be largely beneficial right away.

  That said, although we're (thankfully!) not there yet, considering the field of WYSIWYG editors tend to be going the way of *not* manipulating/storing HTML directly, but using their own internal reference structure to handle (forward and reverse) translations, do you think there might be an inevitability where we may have to consider plans on what would go into the integration of that style of visual editor?

  I'm really glad that time has not come yet, and TinyMCE has proven to be a, comparably, fairly painless transition to something that does not appear to be losing support any time soon.

  Reply

• 

  Holly

  • 2 years ago
  • 11

  This is a really nice review of this. I've used TinyMCE before, and I'm playing around with a copy on a production server. It all seems to work great from the back end, except the field is blank on the front facing page. So obviously I'm missing something...

  Reply

  • 

    Holly

    • 2 years ago
    • 31

    Yay! I fixed it!

    Reply