Quick start
Get an instance of TinyMCE 5 up and running using the Tiny Cloud.
Contribute to this pageTinyMCE 5 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.
Step 1: Include the TinyMCE script
Include the following line of code in the <head>
of a HTML page.
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
Step 2: Initialize TinyMCE as part of a web form
Initialize TinyMCE 5 on any element (or elements) on the web page by passing an object containing a selector
value to tinymce.init()
. The selector
value can be any valid CSS selector.
For example: To replace <textarea id="mytextarea">
with a TinyMCE 5 editor instance, pass the selector '#mytextarea'
to tinymce.init()
.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#mytextarea'
});
</script>
</head>
<body>
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</body>
</html>
Adding this content to a HTML file and opening it in a web browser will load a TinyMCE editor, such as:
Step 3: Add your API key
To remove the notice:
This domain is not registered with Tiny Cloud. Please see the quick start guide or create an account.
Replace no-api-key
in the source script (<script src=...
) with a Tiny Cloud API key, which is created when signing up to the Tiny Cloud.
Signing up for a Tiny Cloud API key will also provide a trial of the Premium Plugins.
Step 4: Save the content with a form POST
Process the content with a form handler.
When the <form>
is submitted, TinyMCE 5 will POST
the content in the same way as a normal HTML <textarea>
, including the HTML elements and inline CSS of the editor content. The host’s form handler can process the submitted content in the same way as content from a regular <textarea>
.
Next Steps
For information on:
- Customizing TinyMCE, see: Basic Setup.
- The three editor modes, see:
- Adding TinyMCE plugins, see: Work with plugins to extend TinyMCE.
- Localizing the TinyMCE editor, see: Localize TinyMCE.
- For information on the CSS required to render some TinyMCE elements outside of the editor, see: Boilerplate content CSS.
- Self-hosting TinyMCE, see: Installing TinyMCE.
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.