--- title: "Quick start: TinyMCE from Tiny Cloud" description: "Add a TinyMCE 8 editor to a web page using the Tiny Cloud. Load the script from the content delivery network, set the API key, and initialize the editor on a textarea element with tinymce.init." canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/" md_url: "https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/index.md" version: "latest" last_updated: "2026-09-11T04:39:13Z" tokens: 1284 --- # Quick start: TinyMCE from Tiny Cloud TinyMCE 8 is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a TinyMCE editor to a web page using the Tiny Cloud. > **Tip:** To have an AI coding agent perform this setup instead, see the [AI quick start guide](../cloud-quick-start-ai/). ## Add the TinyMCE script Add the following script tag to the `` of an HTML file. It loads TinyMCE from the Tiny Cloud content delivery network (CDN): ```html ``` ## Add the API key The script URL contains a `no-api-key` placeholder. Replace it with the Tiny Cloud API key, which is created when signing up to the [Tiny Cloud](/auth/signup/). Signing up also provides a trial of the [Premium Plugins](../plugins/#premium-plugins). Until a valid API key is in place, the editor displays a domain registration notice. ## Initialize the editor Initialize TinyMCE 8 on any element (or elements) on the web page by passing a `selector` to `tinymce.init()`. The `selector` value can be any valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). The `plugins` and `toolbar` options determine which features the editor provides. The following example initializes the editor on a `textarea` with the identifier `mytextarea`, and configures a menu bar and a toolbar covering the most commonly used editing features: ```html ``` Every plugin above is included with TinyMCE, so this configuration requires no further setup. To start from a minimal editor instead, pass only the `selector` and add options as needed. Opening the page in a web browser loads a TinyMCE editor: **Example** ```js tinymce.init({ selector: 'textarea#cloud-quick-start', plugins: [ 'advlist', 'anchor', 'autolink', 'charmap', 'code', 'codesample', 'emoticons', 'fullscreen', 'help', 'image', 'insertdatetime', 'link', 'lists', 'media', 'preview', 'searchreplace', 'table', 'visualblocks', 'wordcount' ], menubar: 'file edit view insert format tools table help', toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | charmap emoticons codesample | code preview fullscreen | removeformat help', height: 500 }); ``` The demo above runs the same configuration as the example. For an editor with every premium plugin enabled, see the [full featured demo](../full-featured-premium-demo/). ## Approve the application domain An application served from any origin other than `localhost` requires its domain to be added to the approved domains stored against the API key. Until the domain is approved, the editor displays the notice "This domain is not registered with Tiny Cloud. Please see the quick start guide or create an account." To remove the notice, add the domain to the approved domains in the [Tiny Account](/my-account/domains/). Local development on `localhost` works without this step, so it can be deferred until the application is deployed or served from a custom host. For the diagnostic steps when the notice persists, see [Domain not registered](../cloud-troubleshooting/#domain-not-registered). ## Next Steps For information on: - Getting and setting the editor content, see: [`getContent`](../apis/tinymce.editor/#getContent) and [`setContent`](../apis/tinymce.editor/#setContent). - Customizing TinyMCE, see: [Basic Setup](../basic-setup/). - The three editor modes, see: - [TinyMCE classic editing mode](../use-tinymce-classic/). - [TinyMCE inline editing mode](../use-tinymce-inline/). - [TinyMCE distraction-free editing mode](../use-tinymce-distraction-free/). - Adding TinyMCE plugins, see: [Work with plugins to extend TinyMCE](../work-with-plugins/). - Localizing the TinyMCE editor, see: [Localize TinyMCE](../localize-your-language/). - For information on the CSS required to render some TinyMCE elements outside of the editor, see: [CSS for rendering TinyMCE content outside the editor](../editor-content-css/).