How-To’s for TinyMCE and Setka

What is a ‘How-To’ guide?

Usually, a How-To Guide takes the form of an informative piece of content that outlines a logical sequence of steps that a reader can follow, to perform a task or achieve a goal.

The aim of this page is to support you in setting up both TinyMCE and Setka.

Both are tools from the same developer-trusted editing toolbox and are used for content creation projects. Where they differ is:

TinyMCE is a WYSIWYG authoring tool – used for creating trusted, best practice text-based content
Setka is a no-code design tool – used for creating interactive, performance-oriented content

If you need guidance and directions for installing, using, or upgrading either TinyMCE or the Setka Editor, you can find links and summaries to our major How-To Guides below.

Why have How-To Guides for TinyMCE and Setka?

Documentation has been an essential part of managing and explaining source code and hardware, since the beginning of computing.

Charles Babbage and Ada Lovelace worked on extensive documentation for the Difference Engine, and later the Analytical Engine. As the first computer programmer, Ada Lovelave wrote programming notes and diagrams about the operating and workings of these early computing devices – essentially the same kind as we use today.

For the TinyMCE rich text editor, we have our documentation pages and we also publish specific use cases and solution articles on Blueprint.

Our How-To Guides don’t take the place of our documentation. Instead, they work alongside the documentation by going into specific situations and scenarios that may emerge, or interesting edge cases that can come up when building a web application.

For both new and current users, our How-To Guides provide support in getting started with TinyMCE, as well as more next-level information such as integrating TinyMCE with Blazor, Vue, or a React framework application.

For Setka, we provide multiple resources to help you use the design platform:

The Help Centre captures useful documentation explaining how each component works.
The Design Guide is a comprehensive guide for explaining and teaching the nuances of design using the Setka platform.

How to use TinyMCE with frameworks and libraries

Vue Projects

We have a guide explaining how to add TinyMCE to a simple Vue project

Angular Projects

You can read about Angular projects in our How-To Guides on:

Adding TinyMCE to an Angular app,
Creating an Angular app for the first time
Integrating Angular 2 with TinyMCE

Other projects

How to build your first Deno with WYSIWYG editing
Integration with Blazor
Using Bootstrap icons in TinyMCE

Creating a specific feature or use case within a Framework or Library

How to add an Emoji Picker to your Angular App is one example of a guide that explains specific configurations
Another is our guide on creating a reactive form with a rich text editor

How to combine Javascript and TinyMCE

How to use TinyMCE in specific projects

Wordpress integration guides

Using TinyMCE premium plugins in Wordpress 5

Building a specific rich text editor project with TinyMCE

Using the TinyMCE WYSIWYG editor in an online word processor
Building a note taking app with TinyMCE
Making a chat app with TinyMCE

Email integration guides

How to get started with TinyMCE in your email marketing software

Complete rich text editor upgrades

Upgrading or migrating from different rich text editors, or between TinyMCE versions:

How to configure TinyMCE plugins

Guides on our plugins are regularly updated and published on Blueprint. The following are available:

The Save plugin
The Visual Blocks plugin
Setting up the five most popular plugins

Guides on configuring other aspects of TinyMCE, such as APIs, are also available:

How to use TinyMCE templates
How to use Dialogs with TinyMCE
How to configure the show and hide APIs
Configuring TinyMCE to use Slash commands

Using self-hosted TinyMCE

Guides on setting up and using TinyMCE are also available:

Getting started with TinyMCE self-hosted
Self host your website or application
Setting up premium plugins with self-hosted TinyMCE

Troubleshooting TinyMCE

If you run into something confusing, a troubleshooting guide can help clarify what to do – for example, diagnosing error messages. Some of these can be easily explained, but others may require some more detail.

For TinyMCE, some error messages appear in a warning box in the browser. For others, you might need to open the developer tools view in your browser, to check more detailed error messages on the console.

Accessing the developer tools for troubleshooting

You can do this by pressing F12 on your keyboard when you’ve clicked on a website in your browser. Here are some other methods to open the developer tools. You can either check on the settings within the browser, or use a keyboard shortcut:

Ctrl + Shift + I
F12

Or, to view developer tools through the browser’s user interface:

Firefox: Menu > Web Developer
Safari: Develop > Show Web Inspector
Opera: Developer > Developer Tools

You can also right click on part of a web page, the editor or text entry window, and click on Inspect Element to go directly to an element in the developer tools console.

You can reveal error messages that might be the cause of your issue.

"This domain is not registered with Tiny Cloud"

If you receive this message, there are two explanations. The first is you are running TinyMCE on a localhost from an HTML file on your workstation. The second is your rich text editor, or the product configured with TinyMCE, is not set up correctly.

For the local host situation, the message will remain, but can be suppressed.

If you are not on a local host:

Check you are passing in the correct API key when loading the TinyMCE script file.
Register the domain on which you’re running TinyMCE.

If you don’t have access to the TinyMCE back, contact your IT department or administrator. For help registering the domain, or to check the API key.

Check the API key

For security, do not share the API key over insecure channels.

You can check the API key by looking for the TinyMCE CDN (content delivery network) link:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

If you do have access to a TinyMCE account, copy your API key from your dashboard using the “copy” button if needed. Include the API key into the CDN script, replacing completely the “no-api-key” statement.

Check the domain register

You can register a number of domains in your TinyMCE account. Once you log in, you can access the approved domains interface. The local host address is registered here by default, so even though the message persists on a local host file open in the browser, TinyMCE can be freely added to files and run from the browser locally.

However, if you’re running TinyMCE on another server, register it the domain by:

Verify your account’s email address if you have not done so already.
On the approved domains interface, add the domain you want to assign to your account. For example, if you want TinyMCE to load on store.example.com, type that into the Domain name field and click Add domain. The Cloud Essential and Cloud Professional plans allow you to register one domain in addition to localhost.
Save the changes, and then wait for the registered domain to propagate through the TinyMCE server.

Places to find support for TinyMCE

If you need additional support outside a How-To Guide, There are several options.

Stack Overflow
On the website Stack Overflow, you can ask questions about different projects. Tag any questions you have with the "TinyMCE" tag. This will alert web developers in the Stack Overflow community to your request for support. While we don’t offer service support for the public or community use, we do monitor issues tagged with "TinyMCE".

Reddit
For Reddit members, the r/webdev community represents another online support group. While the topic covers the broad field of web development, it’s a place where community members have talked about rich text editor integration, including TinyMCE.

Adjusting the TinyMCE version number

Another troubleshooting step to check on is the version number your TinyMCE configuration is using. First, check on the CDN script for your TinyMCE configuration:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/plugins.min.js" referrerpolicy="origin"></script>

Note the number 5 that appears between “tinymce” and “plugins”. This is the version number. By specifying the number 5, the CDN delivers plugins available for the latest release of TinyMCE version 5.0.

If you need a specific plugin that appears to be unavailable, or you want to try an earlier, stable release, adjust this number to be a specific, minor release (5.7), or a patch number (5.8.2). This helps to avoid compatibility errors from appearing.

TinyMCE plugins for content error checking

If you are working on content within the text editor, and require support handling errors or mistakes, TinyMCE provides plugins that can help clear away formatting errors or help to clarify why text is behaving in a particular way.

PowerPaste

If you are encountering errors when copying content from Word, Excel, and other popular applications, set up the PowerPaste plugin to control your content migration. PowerPaste also supports copy and paste from Google Docs.

Format Painter

This plugin allows you to apply content styles from one part of your content to another without formatting them all over again.

Spell Checker Pro

This plugin is essential for catching typographical errors. It works in up to 13 languages simultaneously. Click on the Spell Checker button to correct any errors in your content.

Accessibility Checker

This plugin provides automatic detection and correction of any accessibility issues within the content you have written.

How to use the Setka Editor

The main resource for support when learning how Setka’s design components work is the Design System Manager Guide:

How to use Setka’s Design System Manager – Setka Editor
The Setka Help page provides a variety of useful content.

Several How-To Guides are also published on the Setka blog:

Understanding and using a fundamental part of Setka: A grids guide for beginners
Confirming that your Wordpress plugin is secure
Typesetting errors to avoid when designing content with Setka

Guides are also available for Setka integrations such APIs:

The Setka API Reference and Guide

How to use Setka with CMS Platforms

Wordpress plugin integration

You can integrate Setka with WordPress using the available plugin
Integration is also available for Wordpress with AMP

Magento integration

Available from the Magento Marketplace

Drupal Integration

Accessible from the Drupal project website

1C-Bitrix Integration

A guide is available within the Setka help pages

Hubspot Integration

The Setka help pages also provide a Hubspot integration guide

SharePoint integration

The Setka help pages also provide a SharePoint integration guide

Places to find support for Setka

If you need additional support outside the Help pages or other guides, access StackOverflow, and Tag any questions you have with the "Setka" tag. This will alert web developers in the Stack Overflow community to your request for support. While we don’t offer service support for the public or community use, we do monitor issues tagged with "Setka".