ProcessWire Weekly #441

In the processwire.com blog this week: new rich text editor for ProcessWire

In the latest post at the ProcessWire blog, labeled new rich text editor for ProcessWire, Ryan continues from where last week's blog post left off, officially introducing our next core rich text editor, as well as walking us through the reasoning behind this choice.

And the lucky winner is

The long story short is that our next rich text editor, the one that is going to eventually replace CKEditor 4 in the core, is none other than TinyMCE.

As some of you may still remember, TinyMCE was the editor we used before moving on to CKEditor, so in a way this is us going back to our roots. That being said, at the same time latest version of TinyMCE (v6) is very different from the one we used back in the days (v3) — much like ProcessWire itself, one might add.

I'm always on the hunt for timeless tools, and TinyMCE appears to be one of them.

— Ryan

Why TinyMCE is great (for us)

In the blog post Ryan covers many of the benefits that TinyMCE brings in, and here are a few of them, in no particular order:

• TinyMCE is almost drop-in replacement for CKEditor 4, with similar features, and thus this should be an easy upgrade. Some work is required to get ProcessWire specific plugins etc. up and running, but it's nothing compared to CKEditor 5.
• TinyMCe includes both a regular editor mode and an inline mode, with the latter being a matter of preference for some, but also a necessity in order to support a potentially large number of editors on a single page.
• TinyMCE is arguably more aesthetically pleasing than CKEditor 4 is, providing us with a nice GUI update, and also quite simple to extend and customize. For those that prefer one there's a built-in dark mode available, and also a very "Word like" document editing mode that might be handy for some use cases.
• TinyMCE has been around for a long time and is actively maintained. As such, it is very unlikely for it to go anywhere anytime soon. This is an important factor for us, as we wouldn't want to invest into a tool that might be hot right now, but dead in a year or two.
• Last but not least TinyMCE is multi-lingual, with ~60 different languages available right out of the box. ProcessWire's user base is wide and varied, and our core has solid, built-in language support, so this is an absolute necessity for us.

As for the timeline of this update, if all goes well TinyMCE should be available via the ProcessWire dev branch by next week. As Ryan explains in his post, development of the module is quite far, but there's still a bit more testing to be done before public release.

That's all for our core updates section this week. For an in-depth look at what our new TinyMCE editor field is going to look like, as well as the configurations options that will be available for it, be sure to also visit the weekly blog post from Ryan. Thanks!

New module: Pre-Save Validation

Pre-Save Validation is a brand new third party module from Mike Spooner, also known as thetuningspoon. In a nutshell this module adds an additional check to admin page editor, so that provided values are pre-checked via AJAX before saving the page:

By sending a separate pre-save check request to the backend, this module makes sure that data that doesn't conform with template/field requirements never gets saved and data is also never lost during page save. Errors returned by the backend get populated to field settings, which also means that you can easily add custom error messages:

// add custom error message for all inputfields
$wire->addHookAfter("Inputfield::processInput", function(HookEvent $event) {
    $event->object->error('Invalid input!');
});

The downside of this approach is that there's an extra request involved in each page save, but the effect of that should be rather insignificant.

If you'd like to give this module a try, you can clone or download it from the Pre-Save Validation GitHub repository. In case you have any questions or require additional instructions, feel free to drop by at the Pre-Save Validation support forum thread.

Big thanks to Mike for sharing this module with us!

New module: RockOptionsApi

Another new module for this week is called RockOptionsApi and was built by Bernhard Baumrock. RockOptionsApi provides an alternative, streamlined way to manipulate the value of an Options field via the API:

$page->getOptions('field_name')
    ->add('Some option value')
    ->remove('Another option')
    ->save();

Additionally this module can alter the way read-only Options fields are rendered, providing a version where non-selected options are marked with an x mark, and selected options with a check mark. This option can be enabled via a hook:

$wire->addHookAfter("ProcessPageEdit::buildForm", function(HookEvent $event) {
    $form = $event->return;
    $form->readonlyOptions('field_name');
});

If you'd like to give this module a try, you can install it via the built-in module manager, or clone or download it from the RockOptionsApi GitHub repository. In case you require additional support, be sure to visit the RockOptionsApi support forum thread.

Thanks to Bernhard for yet another useful module contribution!

Site of the week: Blue Fox Studios

Our latest site of the week is that of Blue Fox Studios, a creative post-production studio based in London and Dubai.

The website of Blue Fox Studios was briefly mentioned in our last issue, but this site is so awesome that we felt it deserved more attention than just that. There's plenty of quality content here, including downright amazing showreels, and the design of the site is just stunning — not to mention the animations, which really bring it all together. As always, one can only admire the effort ID Studio has clearly put into this project.

Every idea starts with a spark.

We help this spark ignite into something more. Our work takes place in blacked-out and sound-proofed rooms. Working in the dark like this allows the mind to wander freely - just like a fox in its stealthy search - so that ideas can change, develop and evolve with the best possible outcome.

— Blue Fox Studios

As for behind the scenes details, from the case story post for Blue Fox Studios we know that there's a modular system for page content creation and a SEO module with global editing section across all pages, and the animations were created using the popular JS 3D library Three.js. The front-end of the site also makes use of the grid provided by the Bootstrap front-end framework.

Big thanks to the folks at ID Studio for sharing this amazing project with us, and our congratulations to the client, Blue Fox Studios, for their new, ProcessWire powered website. Splendid work altogether!

Stay tuned for our next issue

That's it for the 441st issue of ProcessWire Weekly. We'll be back with more news, updates, and content Saturday, 29th of October. As always, ProcessWire newsletter subscribers will get our updates a few days later.

Thanks for staying with us, once again. Hope you've had a great and productive week, and don't forget to check out the ProcessWire forums for more interesting topics. Until next week, happy hacking with ProcessWire!