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
We have a guide explaining how to add TinyMCE to a simple Vue project
You can read about Angular projects in our How-To Guides on:
Integrating Angular 2 with TinyMCE
How to build your first Deno with WYSIWYG editing
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 use TinyMCE in specific projects
Wordpress integration guides
Building a specific rich text editor project with TinyMCE
Building a note taking app with TinyMCE
Making a chat app with TinyMCE
Email integration guides
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:
Guides on configuring other aspects of TinyMCE, such as APIs, are also available:
How to use TinyMCE templates
How to use Dialogs with TinyMCE
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
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
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.
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".
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.
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.
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.
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:
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:
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
Available from the Magento Marketplace
Accessible from the Drupal project website
A guide is available within the Setka help pages
The Setka help pages also provide a Hubspot integration guide
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".
Where to from here?
Contact TinyMCE for support if you require even further assistance beyond the resources listed.