9 products you can build with TinyMCE

Published July 20th, 2020

In this blogging platform, TinyMCE is configured with quickbars to emulate the Medium-style editing experience on text selection.

It’s also configured with options for users to insert images, links, media, code snippets, and more – all the usual options you’d expect from a blogging experience. Furthermore, it complies with accessibility requirements for a more inclusive experience for content creators.

In this chat app, TinyMCE is configured with the usual subset of formatting options you’ll find in an application of this kind, including the ability to add emojis – now a standard requirement in modern text communications.

Read more about this project in our related blog post on how to build a simple chat app with Deno and a WYSIWYG editor. It also makes use of placeholder text as a prompt for the user.

Speaking of placeholder text…

Here, TinyMCE is used in a card design tool and is configured with a custom skin, created using the TinyMCE Skin Tool, to blend in seamlessly with the rest of the app. It also has a huge range of custom and popular fonts to choose from.

The editor’s CSS is configured for the true WYSIWYG experience, so users can see exactly what the content will look like without having to use a separate preview. It also features the ‘case change’ plugin, allowing designers to convert text from uppercase to lower to title case quickly when considering their options.

This document processor is built with TinyMCE, configured with document margins, wordcount, and predefined templates to save time for users so they don’t have to create the same content again and again...and again.

It also includes a global spell checker to ensure content written by anyone in the organization maintains a certain standard and consistency, and checks up to 13 languages simultaneously. The color palette has been customized with a set of colors according to the corporate style guide, and it has a custom skin (for instance, active toolbar buttons are green).

This note-taking app is built with TinyMCE, featuring many of the options already mentioned in other products.

Here, the editor is configured with Tiny’s premium snow skin and icons pack, one of the 10 skins and 4 icon packs we’ve designed for you. It’s also been set up with the ability to insert checklists – a common feature in these types of applications.

This is a marketing email platform, built with TinyMCE.

In this case, it has been configured with inline mode, so the toolbar appears directly above an editable area when your cursor is in it and hides otherwise. The toolbar drawer opens to reveal more options, including the ability to insert links, images, emoticons, and lists. A cool feature is that the style formats dropdown is configured with an option to convert any link into a call-to-action button (shown on the right above).

This collaborative workspace is built with TinyMCE. Similar to the note-taking app, it’s also been configured with Tiny’s premium snow skin and icons pack. By the way, Tiny also has its own real-time collaboration solution, that’s encrypted – so no one can eavesdrop on your communication.

You can also provide an empty page placeholder UI containing complex HTML and buttons to insert templates (shown below) – a feature found in popular apps like Notion and Atlassian Confluence.

In this comments app, TinyMCE has been configured with a naked skin, allowing the designer to wrap it in a container and customize it with their own border, buttons, and other additional HTML/JS functionality. It’s also been configured with several templates as “canned” replies to cut down the time it takes for users to form responses.

TinyMCE can also be used for the text entry components of your forms.

This form has been created using the Bootstrap framework, and TinyMCE is configured with the corresponding skin to match. Read more about how to enhance your Bootstrap forms with WYSIWYG editing.

Get started with TinyMCE

Start with a FREE 14-day trial of the Tiny Cloud Essential plan, our ultimate productivity solution. In addition to the core editor, you’ll get access to our Premium Skins and Icons plus 14 premium plugins, including PowerPaste, Enhanced Media Embed, Checklists, Advanced Tables, and Real-time Collaboration. Or see our plans for more options.

See our docs for live TinyMCE examples configured with all the bells and whistles and contact us any time – we’d love to talk about your new, innovative products and help you create the best user experience possible.