Skip to content

Latest commit

 

History

History
74 lines (51 loc) · 3 KB

quick-start.md

File metadata and controls

74 lines (51 loc) · 3 KB
Raw
layout title title_nav description_short description keywords
default
Quick start
Quick start
Setup a basic TinyMCE 5 editor using the Tiny Cloud.
Get an instance of TinyMCE 5 up and running using the Tiny Cloud.
tinymce script textarea

{{site.productname}} {{site.productmajorversion}} is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a {{site.productname}} editor to a web page using the {{site.cloudname}}.

Step 1: Include the TinyMCE script

Include the following line of code in the <head> of a HTML page.

<script src="{{ site.cdnurl }}" referrerpolicy="origin"></script>

Step 2: Initialize TinyMCE as part of a web form

Initialize {{site.productname}} {{site.productmajorversion}} 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 {{site.productname}} {{site.productmajorversion}} 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="{{ site.cdnurl }}" referrerpolicy="origin"></script>

    <script>
      tinymce.init({
        selector: '#mytextarea'
      });
    </script>

  </head>

  <body>
  <h1>{{site.productname}} 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:

{% include live-demo.html id="default" %}

Step 3: Add your API key

To remove the notice:

warning iconThis domain is not registered with {{site.cloudname}}. Please see the quick start guide or create an account.

Replace no-api-key in the source script (<script src=...) with a {{site.cloudname}} API key, which is created when signing up to the {{site.cloudname}}.

Signing up for a {{site.cloudname}} 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, {{site.productname}} {{site.productmajorversion}} 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>.

{% include misc/quickstart-next-steps.md %}