Skip to content

basic-quickstart-base.adoc

Latest commit

 

History

History
225 lines (169 loc) · 7 KB

basic-quickstart-base.adoc

File metadata and controls

225 lines (169 loc) · 7 KB

Install {productname} using {sourcename}

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

Include the {productname} script

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

<script src="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>

Initialize {productname} as part of a web form

Initialize {productname} {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 {productname} {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="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script>
      tinymce.init({
        selector: '#mytextarea',
        license_key: 'gpl' // gpl for open source, T8LK:... for commercial
      });
    </script>
  </head>

  <body>
    <h1>{productname} Quick Start Guide</h1>
    <form method="post">
      <textarea id="mytextarea">Hello, World!</textarea>
    </form>
  </body>
</html>

Adding this content to an HTML file and opening it in a web browser will load a {productname} editor, such as:

liveDemo::default[]

Configure plugins and toolbar

To enable specific plugins and customize the toolbar, use the plugins and toolbar options. For example, to add the image and code plugins with their toolbar buttons:

tinymce.init({
  selector: '#mytextarea',
  plugins: 'image code',
  toolbar: 'undo redo | image code'
});

Plugin names are space-separated. Toolbar items can include plugin-provided buttons (such as image and code) and separators (|). For a full list of available plugins, see Plugins.

For more information on licensing, see the License Key guide.

Save the content from the editor

To retrieve content from the editor, either process the content with a form handler or use the getContent API.

If you use a form handler, once the <form> is submitted, {productname} {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>.