How Tiny helps me deliver the best content authoring experience

At Joomla Day Australia 2019 in Brisbane, I spoke about how TinyMCE helps deliver the best content authoring experience. And for those who couldn’t make it on the day, this blog post captures my favourite bits.

I have been using TinyMCE in development projects for nearly 15 years, including basic implementations as well as custom plugin development. And you have probably even used Tiny yourself, without really knowing what it is.

TinyMCE is the best-in-class WYSIWYG editor made by the Tiny team. TinyMCE delivers a desktop-class editing experience but for the web – this means giving content authors the ability to make lists, add links, insert images and manage tables (and all of the related markup) without knowing any HTML code. And that’s just the start of what TinyMCE can do. Given that I make websites and web applications – and my clients like to keep their own content up-to-date – TinyMCE makes it effortless for a non-web person to actually write HTML code (without them even knowing they’re doing it). That’s the WYSIWIG – What You See Is What You Get – part: they see the finished content, styled and appearing exactly how they want it, but behind the scenes, TinyMCE is writing clean and standards-compliant code.

Who wouldn’t want that?

Out of the box, TinyMCE can do so much. Its core functionality is second-to-none, giving a desktop-like editing experience with desktop-level word processing features. In Word or Pages when you want to make a list, you click the list button. Guess what, that’s exactly what you do with TinyMCE too.

TinyMCE includes the standard and expected editor features: copy and paste, bold and italic, lists and links, alignment, and even image and media embedded. And that’s just scratching the surface – it can do so much more.

But what makes TinyMCE better than the rest is its range of available plugins that help extend its functionality and power to make it easier and more efficient for content authors to write their content.

These are some of my favourite plugins – but it is well worth looking at what Tiny has on offer as there is a huge list of options. Check out the Tiny documentation - I'm constantly finding new features, even after all these years.

Auto Resize

This is such a subtle plugin, but one that can really help deliver a more immersive authoring experience.

When the user sees the TinyMCE editor, they see a few toolbars and a small blank area to start typing. Really easy stuff. Then they start typing in the editor, and that small editor window suddenly becomes full.

Enter the Auto Resize plugin. What makes this plugin so awesome is its simplicity – it does what it says on the label: auto resize. As the author types content, the editor window automatically gets bigger. This means that the content author doesn’t need to worry about scrolling within a small editor window – they can see their entire content in a single immersive editor window.

This is such a small feature, but one that has such a profound impact on the experience of our content authors.

Power Paste

Power Paste is one of Tiny’s premium plugins that gives content authors more control when copying and pasting content from a Word document (or other traditional word processor).

Without the Power Paste plugin, when you paste content, Tiny will strip out all of the nastiness – which is awesome – but also strip out the good HTML, such as the heading tags – which is not so awesome.

Power Paste helps out here – it gives the content author the choice: do you want to keep the formatting (including the hidden Word styles), or do you want to clean the markup (leaving only clean HTML, but keeping semantics such as heading levels).

Selecting the latter is sublime – it produces clean HTML, like Tiny’s default paste behaviour, but also ensures that any semantic headings you had in Word are preserved but in their clean HTML format. Your “Heading 1” in Word becomes a clean and accurate <h1> tag.

This may not mean much for the author, but it means so much to us as developers. It means that the authored content we are now presenting is semantically correct. That clean <h1> tag will now pick up any <h1> styles that we have in place in our style sheet.

Case Change

Do you remember reading one of my older blog posts about writing readable content? It’s worth a read if you’ve got a spare few minutes.

There are times when a site’s style may have small headings or sections in uppercase – it’s a stylistic thing – and often we’d do this at the dev stage by styling specific elements – such as a <h1> or <h2> - to achieve this. This way we can separate content from presentation, and keep the content readable and unstyled – i.e. in standard readable case – and handle any transformations when styling content.

In TinyMCE, the Case Change plugin is so useful for taking those “ALL CAPS” bits of content sent to us by a client, and transforming that back to a “Start case” without having to retype it all – we can highlight the text, click a button, and boom have it all back in a neat and unstyled case. By using a single button, the content author is able to focus on making the change they need, rather than re-typing, and this in turn helps reduce the risk of typos or mis-reading the original content. Once again, all part of making the content authoring experience better.

Spell Check

It seems that these days so many rely on autocorrect for typing. And this means that content authors expect a spell checker.

Tiny gives us choices when it comes to spell checking, depending on what plugins you have available.

Out of the box, Tiny can be configured to hook in to your browser’s spelling capabilities – basically this is great at underlining any typos and the user can then correct them as needed.

Tiny can also be configured to use your own spell checker (which needs to be hosted on your own systems somewhere) and is based on Enchant or PSpell. Not sure what they are? This option may not be for you. Basically your server can hook in to these spelling libraries to take each word of content, find spelling errors and suggest corrections. These can the be easily viewed by the user simply by selecting the word – just like you would in Word. The user just needs to click the spell check button to get started. This does require a little bit of technical setup, but is worth the time as it is a huge step up from the browser spell check.

If you’re not technically minded, Tiny can also be configured to use their own Spell Checker Pro plugin, a premium offering, that provides check-as-you-type spelling with their own spelling libraries, plus a Word-type dialog to work through spelling corrections. These are available in a number of languages – including variations of English such as UK and US – as well as a number of foreign languages.

Both the Enchant/PSpell and Spell Checker Pro options allow you, as the developer, to configure the list of languages available to the content author – improving the authoring experience by giving the author access to the languages that they need, and a default that is suitable. For Australian authors, looking at an Australian-compatible English by default is definitely a huge plus.

Code Editor

The Code Editor plugin is worth quickly mentioning for the more advanced users out there.

TinyMCE has a simple code editor plugin out of the box, giving the author access to the HTML code generated by Tiny. Maybe they need to include an advanced piece of code, or maybe just manually tweak or check something. The Code Editor makes it possible to do more at the code level, and when saved, render that back in to the editor itself.

There is also an Advanced Code Edit plugin provides colour highlighting to the markup – improving readability – for clients with a premium subscription.

Bonus point: in the video I talk about defining which tags and attributes to allow (or not allow). Check out valid_elements and extended_valid_elements to control just what HTML authors are allowed to enter.

Accessibility is so important for any website. There’s no reason that your website cannot deliver content that can be consumed by any visitor to your site – even those who may rely on an assistive device such as a screen reader.

TinyMCE’s Accessibility Checker is a premium add-on that gives authors a Word-like spellcheck dialog to step through accessibility issues detected in the content.

This is such a powerful feature, given that there are times when improving accessibility requires updates to the markup that a WYSIWYG author may never actually see directly. The Accessibility Checker helps any content author prepare more accessible content.

If an author inserts an image to their editor, the Accessibility Checker knows that the image requires an “alt” attribute – this is a descriptor of the image that can be read by assistive devices including screen readers for those who can’t visually see the image. The author is notified of the requirement, and, the best bit (for most accessibility issues), allows the user to provide a fix right there and then.

This streamlined accessibility checking helps authors stay focused on writing their brilliant content, and helping deliver more accessible markup in a non-technical and very user-friendly step-by-step process.

One of the most useful features with TinyMCE is its configuration potential. In our applications, there are times when we need a full range of features like a word processor, and other times when we just need a handful of options for the user. After all, there’s no point showing everything when only two or three are actually used.

Customising the Toolbars

TinyMCE helps us achieve this by giving us complete control on the toolbar buttons shown, the order the appear in, and on what toolbar. 

This means that if we need a really light and simple editor, we can pick the handful of buttons we need. And similarly, when we need a more feature-rich editor, we can enable more plugins, add more buttons and really customise the layout to suit our authors.

Content Styling in the editor

TinyMCE’s customisation goes further with its ability to include a custom stylesheet. Given TinyMCE is a WYSIWYG editor, the ability to include a stylesheet has a massive impact on the experience of very visual content authors. As they type, as they choose “heading” levels, as they add lists, everything appears exactly as it would on the website – the same colours, fonts and styles.

Tiny allows us to go one step further, and provide a selectable list of styles that can be applied to elements. This way we can ensure that authors can only pick from selected styles, applied through the style sheet, and end up with clean HTML, styled through our global CSS, and all without looking at the code.

It’s also worth checking out the Link Class List to give authors the ability to select a specific CSS class from a list when adding their link.

It is this level of customisation that really gives us the ability to think about what each of our custom projects need out of an editor – what controls does the author need… will they need more granular style control… are there features that are unlikely to be used… These choices, leading to improved customisation of the editor, all help deliver an authoring experience that is aimed and targeted to the author’s needs and expertise (and help keep them focused on doing what they do best – writing awesome content).

Inline Editing

Tiny makes the content authoring experience so easy. And as a developer, we can take it one step further if we use inline editing.

Inline editing gives the author a true WYSIWYG feel – and this is great for those users who really want to see how it will look as a finished product. And what better way than typing as you go, seeing changes in real-time, and still keeping all of Tiny’s awesome features at hand.

This is a bit of a bigger feature to implement – but if you’re like me, and spend your days developing custom web software, inline editing really does open up the potential for an incredibly streamlined and integrated authoring experience.

TinyMCE is developed by a talented team of developers, all around the world. With its roots in Sweden, and Tiny’s head development office now based in Australia (such a friendly team up in Brisbane), Tiny are connected with the open source community, as well as their premium, business and enterprise customers.

The best part is: they listen.

TinyMCE 5 is a massive upgrade from v4, and some features were removed at launch. But customers – including open source developers, and their enterprise customers – spoke up and suggested that specific features are still used and should come back. And the Tiny team listen. With a regular update schedule, it has been great to see new features appear (and some old favourites come back).

They’re a company who love what they do, care about their product, and are passionate about the impact it has on their end customers. They are continually learning more from their customers about how the product gets used (and what features seem unused but are actually pivotal to some author workflows) and continuing to evolve and extend an already-brilliant product.

I get so excited about this bit.

TinyMCE is made to be extended. Tiny have given developers like us the ability to hook in to the editor to extend its functionality. 

Custom Plugins

I have written a number of plugins that connect up with my content management system – such as the ability to easily include a link to piece of content in the website, insert a form or list of content items, or even insert a shared media file such as a PDF or image – and output the necessary markup to make that happen at render time, but without the author having to actually remember and write the code themselves.

These plugins make it easy for the author reference other parts of the system, and this helps create a more cohesive editing experience.

But that’s the best bit – this is just the start.

With TinyMCE 5, developers like us have greater access to Tiny’s power, and can create plugins using Tiny’s UI components, including dialogs, autocompleters and menus (both menu items and context menus), to write plugins that enhance the author’s experience with a cohesive user experience, driven by the strength of TinyMCE’s interface element library.

Tiny Drive

When TinyMCE 5 launched, Tiny Drive provided authors with the ability to have centralised image and asset management. Tiny Drive seamlessly plugs in to TinyMCE 5, giving authors the ability to upload, insert and even perform some basic edits – such as resizing or cropping, among others – all from their browser. All you need is a Tiny API key, which you can get for free, and gives you some cloud storage to get you started.

When I caught up with the Tiny team at their Product Week in Brisbane, they asked for my input on Tiny Drive. In short, I love the idea, but do have clients that can’t have assets stored externally. That is the biggest reason I’m not using Drive. Yet.

But, as you’ve learned already by reading this post, Tiny listen. And they are currently working to allow for our own custom backend to be used. Which solves the storage location issue for specific clients.

It does get one step better too. While having upload and storage capabilities built in to the editor is great, what about if the editor is just one part of the application? Guess what – Tiny have thought of that. Tiny have made it possible to upload and browse for files outside of the TinyMCE instance. Meaning that any part of your application and read and write to Tiny Drive. Now THIS is exciting.

I really can’t wait to see how a custom backend will be built, and really take full advantage of Tiny’s Drive offering.

Out of the box, Tiny provides an incredible range of features – and can be fully customised – to deliver what I think is the best-in-class WYSIWYG editing experience for the web. Tiny’s own plugins, and the potential for us as developers to write our own plugins too, only helps extend TinyMCE’s power and flexibility to make authoring for the web a pleasurable, accessible and effortless experience for everyone – without needing to be a code jockey.

Got any questions about how I use Tiny? About writing plugins? Say hello - I am really friendly.