Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How-To’s for TinyMCE and Setka

Team Tiny

August 30th, 2021

Written by

Team Tiny

Category

How-tos & Tutorials

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: 

How to use TinyMCE with frameworks and libraries

Vue Projects

Angular Projects

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

Other projects

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

How to combine Javascript and TinyMCE

How to use TinyMCE in specific projects

Wordpress integration guides

Building a specific rich text editor project 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:

Using self-hosted TinyMCE

Guides on setting up and using TinyMCE are also available:

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:

  1. Ctrl + Shift + I

  2. 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:

  1. Check you are passing in the correct API key when loading the TinyMCE script file.

  2. 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: 

  1. Verify your account’s email address if you have not done so already.

  2. 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. 

  3. 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. 

  1. 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".

  1. 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: 

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

Guides are also available for Setka integrations such  APIs:

How to use Setka with CMS Platforms

Wordpress plugin integration

Magento integration

Drupal Integration

1C-Bitrix Integration

Hubspot Integration

SharePoint integration

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.

SetkaTinyMCE
byTeam Tiny

Powering more than 40% of the world’s websites. Here to educate and empower the world through all things TinyMCE and more.

Related Articles

  • How-tos & Tutorials

    Is your domain registered with Tiny Cloud?

    by Joe Robinson in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing