What I Update On TinyMCE Cloud
TinyMCE is a pretty good WYSIWYG editor - and by pretty good, I mean I've tried a few out and always end up falling back to TinyMCE as it does almost everything that I want. It used to be that you downloaded the files and put them on your server to then run, which had some good advantages. It was running locally and you could edit certain parts so that you always ended up with the HTML that you wanted. This of course had the drawback of being more work to update TinyMCE than just replacing all the files with the updated ones as I then had to make all the changes again.
Then, TinyMCE Cloud came along, where you don't have anything installed locally on your server and you are always up to date. Great from a security point of view, but it also meant that I had to implement my changes in a different way. Thankfully, some bits can be easily changed through some options, whilst others needed a whole new button created which although it means more code, also means I have complete control over what the button does and I don't have to touch it when TinyMCE is updated.
Images
Initially, my thought was to replace the image button with my own custom one. I already remove the dimensions via a setting as they're pointless to me. The idea after that was adding a class to the img tag and adding lazy load to images in articles.
In the end, adding a class became less of a need, as images are resized responsively by CSS anyway, simply by looking for an img inside an article, ensuring that all article images are responsive going back over a thousand articles. So all I wanted to then add was lazy load, which ended up being a nice easy change.
image_dimensions: false,
extended_valid_elements: 'img[!src|alt|title|style|loading=lazy]'
The important part with this is needing to have all elements listed that are in use. If I was interested in image dimensions and had them active, then I would need to include that in here as well. Same with if I went with adding a class to images.
extended_valid_elements: 'img[!src|class=img-fluid|alt|title|style|loading=lazy]'
Video
Video was the toughest to decide what to do with. In the end, because I wanted to be able to embed a video from anywhere and all of the places that I'd want to embed from offer the code to do so, it made m choice a bit easier - a simple text box input that then wraps the embedded code in a wrapper div for responsiveness.
Additional
I've added a new custom button to the toolbar that inserts a button that is stylised as a link. The CSS for that is added to the TinyMCE config so that it shows properly in the editor as well as on the site.
A new custom image button is also added with the addition of an extra text box that is then included underneath the image - if you're familiar with Bootstrap, it's an image with figure text. Not always needed, but can come in handy at times. It's a few additional bits of HTML than a regular image so for ease I put it as it's own separate thing.
