Useful styles to include in your content css
The default content css is very barebone for maximum flexibility. Here are some tips on styles you can include in your content css to improve the writing experience.
Beginner Content StylingTinyMCE Basics
The following demos showcase common how-tos like creating toolbar buttons, menu items, formattingS etc.
Badges with custom text and colors
Badges are a common ui component in web apps to indicate statuses. Here is one of many ways to implement them in TinyMCE. This demo allows the user to choose their own text and colors through a dialog and demonstrating how to use formats to create a badge but use the selection api for editing it to make sure the whole badge gets the changes and not just the selected text within it.
Intermediate Dialogs FormatsCreating custom toolbar buttons, menus and context toolbars.
This demo uses a custom callout block to demonstrate how to create toolbar buttons, customizing the menu and showing a context toolbar when selecting the callout. It also shows how to add a custom icon pack for our custom toolbar button.
IntermediateWebapp description/comment/reply editor
Here is a demo of an editor suitable for description fields, comment and replys found in webapps like Jira, Zendesk, Asana among others. This demo also includes how to use the text_pattern plugin to achieve automatic conversion of stars into proper lists etc.
Intermediate Plugin:TextpatternImplementing TinyMCE into Bootstrap
Here is a guide on how to visually integrate TinyMCE into Bootstrap using our Bootstrap skin
Beginner Content Styling SkinningRight aligned toolbar buttons
Normally we strongly advice against overriding the TinyMCE CSS to tweak the editor. The proper way to change the visual appearance is to make a skin. That said, there is always exceptions to a good rule and moving a couple of toolbar buttons to the right side of the toolbar is one example of such an exeception.
BeginnerFormat links to look like buttons
This demo shows how to format a link into a call-to-action button by creating a custom format that applies a class to a link turning it into a button.
Beginner FormatsUsing fonts
Learn how to configure tinyMCE to use different fonts
Beginner Content Styling FormatsImages
Image related demos
Toggle between image sizes and layouts using a context toolbar
A popular pattern among blog and cmses is to allow the author to switch between different preset image sizes like small, wide and full as well as aligning the image left or right. It also showcases the quickbars plugin that uses medium style context toolbars when selecting content.
Intermediate Content Styling FormatsSetting image alt text using context forms
This demo shows how to use an inline context form to set the alt text on an image without having to use dialogs.
IntermediateTables
Demos showcasing diffrent ideas and concepts around tables
An alternate table context toolbar
TinyMCE 5.4 introduced a couple of new table APIs we can use to construct an alternative table context toolbar. In this demo showcases a table header row/column toggle, a menu for choosing cell background color menu among other things.
Intermediate Plugin:TablesTable row templates
This demo illustrates inserting templated table rows. This could be useful when dealing with document automation or reporting type apps.
Intermediate Plugin:TablesTokens
Tokens – or mail merge variables such as {{name.first}} – are often found in document automation and email editors. Here are three ways you can implement them in TinyMCE
Text-based tokens
Transform any text based tokens such as {{name.first}} into spans that we can style and make noneditable – and transform back to pure text when storing the content. Perfect for existing systems as this approach is non-destructive to your content.
Beginner Content Styling Plugin:NoneditableWeb component tokens
With the january 2020 release of Microsoft Edge, all major browsers now supports web components. Here we create a custom element called <inline-token> that becomes our token. Tip: You can render the custom element using vue/angular/react in your front-end
Span-based tokens
Here we use a span with a class to wrap our token. A simple but powerful approach.
Beginner Content StylingTemplates
Examples and ideas how to implement templates and layouts with TinyMCE. For example how to only enable editing on select parts of a document or to enable multiple column support in TinyMCE
Advanced Placeholders – pick a template from a blank document
This demo shows how to implement an empty page placeholder UI containing complex HTML and buttons to insert templates. This feature is found in popular apps like Notion and Atlassian Confluence among others.
Master Content Styling Plugin:TemplatesCreate a multiple column format using CSS Columns
Demo of how to implement columns using CSS Columns and a toolbar button to toggle columns on/off
Intermediate FormatsLocked down template example 1: using the default inline mode
A popular question we get is how to lock down the editor in different ways to force a specific order of elements or prevent formatting. The way to do this is by using the inline mode which will give you more flexibility over the TinyMCE UI. Here is a basic example using the regular inline mode.
Intermediate Inline ModeLocked down template example 2: using context toolbars
Another visual approach is to use the quickbars plugin which enables "Medium" styled context toolbars. This provides a more seamless and integrated solution
Intermediate Inline ModeLocked down template example 3: using a fixed toolbar
A third example is using the fixed_toolbar_container option that allows you to render the toolbars anywhere on the page for maximum flexibility. This approach is very suitable for web apps.
Locked down template example 4: emulating a bordered editor
All the previous locked down examples have shown a borderless editing experience. Here is an example on how to frame the inline editor to closer match the iframe version of TinyMCE.
Master Inline ModeExamples and ideas how to create HTML email editors with TinyMCE, from a rich text webmail editor to the recommended approach for creating visually rich marketing email editor implementations.
Webmail rich text editor
Demo of a simple rich text webmail editor including how to set inline CSS styles on the default paragraphs
Beginner FormatsMarketing email editor using inline mode
The recommended approach to do marketing emails containing layouts is to move the table layout outside of TinyMCE and enable TinyMCE inline mode on the text blocks only.
Master Content Styling Inline ModeMarketing email editor using inline mode and a fixed toolbar
Same example as the previous one but with a fixed toolbar.
Master Content Styling Inline ModeAnother marketing email demo using inline mode
This demo covers some additional config options and incorporates the token example
Master Content Styling Inline ModeCool demos
Sometimes you just want to show off right? Here are a couple of demos showcasing just how versatile TinyMCE is
Expand and show toolbar
A truly minimal and elegant example of an editor that starts out like a unintrusive textarea and grows into a rich text editor upon focus. Demonstrates an interesting use of the inline mode and features like inline placeholder, toolbar groups as well as our new premium thin icon pack.
Master Content Styling Inline Mode SkinningDocument automation styled conditional blocks using Web Components
This demo shows how to use Web Components to create conditional blocks
often found in document and marketing automation apps. The power with Web Components is that they allow us to create complex
HTML stuctures and abstract away that into a single custom element,
in this case the <conditional-block>...</conditional-block>
Create a slash commands plugin
Learn how to make a slash commands plugin using the auto completer API to quickly insert different content types
MasterMake a wordprocessor
Create a wordprocessor-like implementation with TinyMCE
Beginner Skinning Content Styling