Leaderboard

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— https://processwire.com/blog/posts/new-rte-for-pw/

@Violet Thanks for the great feedback, I appreciate it! @markus_blue_tomato Yes, I actually find TinyMCE 6 quite a bit easier to extend than CKEditor 4. For instance, here's how you could add a "hello" button to the toolbar: InputfieldTinyMCE.onSetup(function(editor) { editor.ui.registry.addButton('hello', { icon: 'user', text: 'Hello', onAction: function() { editor.insertContent('Hello World!') } }); }); Then you would edit your toolbar in the field config and type "hello" to it to any toolbars you wanted. Then every time you click the "hello" button on the toolbar, it would insert the text "Hello World" at the cursor.

Wow! Thank you Ryan! ? I read the post and am already drooling over the upcoming editor and its features. If this seems a bit extreme, I should mention that what prompted me to move to ProcessWire (from Wordpress) was the switch to the Gutenberg editor in Wordpress - it was a definite downgrade upon their previous editor, it simply wouldn't let me type my content in as quickly. After moving to ProcessWire I quickly reaped the rewards of its editor and in addition, all the other advantageous features of ProcessWire. As a blogger who owns multiple sites I am constantly writing articles and therefore the choice of editor is extremely important to me. I am crying tears of joy over the stickybars feature in the new editor ? No more need for scrolling up just to get to the editor buttons again, yay!! I was also thrilled to see that we'll still be able to get spellcheck and wordcount on the new text editor - essential features. And retaining the ability to edit the text as source code is a must-have for those of us who are including affiliate links or ad code in our articles, thank you for ensuring that continues to be provided. The configurability of everything via toolbars and plugins looks great. I'm excited that we can add an undo button on the toolbar (maybe we could do that on the current editor too but if so I never figured it out ?) Thank you for the thorough explanation and all the screenshots, it's very helpful to see what we will be getting. I am very excited about the new editor and am looking forward to using it!

Can TinyMCE also extended like CKEditor? I'm using a lot @Robin S 's HannaCodeDialog Module.

The module originated from an idea/discussion in this thread. I hope that helps to see more PRs for improving the PW backend ? https://github.com/baumrock/Scss Watch core files When working on PRs for the ProcessWire backend you'll notice that the core ships with several SCSS files and the corresponding CSS files. To make it easy to work on the SCSS files without the need of adding complicated build tools to your project you can simply install the Scss module and add the following in /site/ready.php $modules->get('Scss')->watchCore(); Now your SCSS files will be watched for changes and once you change something and reload your page you'll get the new CSS on the fly and can commit both changes ?

Wow! It gets even better! ? Thank you Ryan for the detail, including an example of actual code (I would never have figured that out on my own). I will definitely be implementing this so I can add my affiliate disclosures at the click of a button! There will no longer be the need to retype the same sentence of text at the top of my articles, or even to copy and paste it... instead I will be able to add it at the click of a button! That is wonderful.

@bernhard I'm not sure I know why that issue occurs in CKEditor, but I don't see any reason why the issue should exist in TinyMCE. I'm sure there's also a way around it in CKEditor, though I don't understand the issue well enough yet to suggest something. Most (maybe all) of the TinyMCE settings should lend themselves very well to context. The way I've got it setup currently is that it maintains all the settings (that differ from the defaults), namespaced by field name in ProcessWire.config.InputfieldTinyMCE.settings. Then any field-template context settings (that differ from the field settings) are in data attributes on the Inputfield. Field settings override defaults, then template-context settings override those. InputfieldCKEditor settings work in a similar way, but with less efficiency (all settings bundled rather than just those that override defaults), and it doesn't have the option for the data attribute override settings. Hopefully TinyMCE will work for the context you mention but let me know if not, I'm sure we'll be able to figure it out.

This is the expected behaviour, with one catch: users with edit access to said pages should be able to view them. This always includes superusers. If you are certain that the sites themselves are identical (code and site settings, template settings, permissions, etc.) there are a couple of things to check first: - Is there some sort of caching on the live site that isn't present on the working environment? - Is the admin domain the same as the one used after clicking "view" links on the live site?

Thanks a million Ryan! My highlights: it'll be available to install by or before this time next week Yes there's a dark mode! The toolbar configuration ... via InputfieldTextTags ... plugins are selectable from checkboxes Five UI The inline editor after we click in it Multi-language I will especially be happy to use Five UI and the inline editor appearing after we click in it, as these options save a lot of screen space which I prefer to whitespace bonanza. BTW, may I propose that in the "other settings" section we can also have options via InputfieldTextTags wherever appropriate (instead of typing in literals).

@Violet your comment is very much appreciated. As is your enthusiasm. I’d never considered the sticky bar advantage but your example makes perfect sense.

My first reaction: Seriously?! TinyMCE reminded me of my old and awful Joomla days ? Then: Ok... that looks nice... Ok... very nice... Ok... that looks great!! Thank you Ryan for all your great work! Looking forward to using it soon ? Let's show our love to TinyMCE and star the project on Github https://github.com/tinymce/tinymce Congrats, you are the winner ?

Lots of good guesses! Here's all the details: https://processwire.com/blog/posts/new-rte-for-pw/

Github: https://github.com/thetuningspoon/AdminPreSaveValidation This module prevents admin editors from saving changes to a page that has one or more invalid fields. It uses an ajax call to check for errors and javascript to populate the page edit form with any error messages that were returned. This way the user can correct the issues and resubmit the form without invalid data getting saved to the database or the editor losing changes. I've wanted a way to implement this common workflow in ProcessWire for some time now and this relatively simple ajax-based approach makes it possible without getting too much in the way of how ProcessWire normally works. For example, all of the post-save actions (Save + Exit, Save + View, etc.) still work as usual. The only downside is that a successful save will take a bit longer as it involves two sequential http requests (the initial ajax request that checks for errors and the normal page submit after no errors are returned). This module has also been tested successfully with repeaters and other nested inputs. By hooking after Inputfield::processInput, you can add your own custom validations to inputfields and this module will pick up on and display them as well. /* * Example of hook that adds an error to an inputfield. This will add an error to every input. */ $this->wire()->addHookAfter("Inputfield::processInput", function(HookEvent $event) { $event->object->error('Invalid input!'); }); I hope others will find this module useful!

I think the problem is here https://github.com/processwire/processwire/blob/924f93214536a506babbce1bab5c6c9e2093fc1e/wire/core/WireHttp.php#L471 See how it sanitizes the url at the top of the function. That’s where it prepends the scheme if necessary. Curl and fopen are called with that sanitized url, but your error came from the "socket" method, which seems to be called with the unsanitized url. I’m probably missing something, but I’m not going to look into this any more deeply from my phone ?

Not at a computer right now, but the error should have the host name in it (where the two spaces collide instead, and before the :80 port). Apparently something went wrong inside wireHttp->get() where it parses the url string. Indeed, url_parse() doesn’t return the right components when given "test2.gemeindeguru.at". I think you’re required to pass the url including the protocol.

Might be from an unsuccessful curl request (stuff like incompatible cipher suites, untrusted certificate etc.). Have you checked $http->getError()?

Have you ever had a hard time setting the values of an options field via API? Grab RockOptionsAPI ? https://github.com/baumrock/RockOptionsApi RockOptionsApi ProcessWire module for easy manipulation of option-fields via API $page->getOptions('yourfield') ->add('foo') ->remove('bar') ->save(); Readonly options field renderer By default options fields that are set to readonly via the locked collapse state only show selected options and hide other available options. That might not be what you want. Here is an alternative that turns this: Into that: Simply call $form->readonlyOptions('yourfield') in the ProcessPageEdit::buildForm hook or when using MagicPages in the editForm() method: $wire->addHookAfter("ProcessPageEdit::buildForm", function($event) { $form = $event->return; $form->readonlyOptions('yourfield'); });

Great to hear that, thx! I'll not invest any time in why it's not working for me on CKE as I've just built all sites with custom fields and I don't want to refactor that ? I'll let you know if I see any problems on TinyMCE ?

Thanks for this one ... a lot easier to teach to clients.

https://bluefox.studio/ What makes this project cool: We rebranded the clients logo, turning it into a 3D, Three.JS intro presentation The client can mange all aspects of the site via ProcessWire populating their impressive showcase Custom front-end design and UI and full content management across evey aspect of the site. Modular system for page content providing maximum flexibility on page construction. SEO module with global editing section across all pages. Global shared content modules.