TinyMCE

https://www.tiny.cloud/docs/tinymce/latest/
Admin
TinyMCE is a rich text editor that provides WYSIWYG editing capabilities with extensive...
Tokens:682,106
Snippets:6,703
Trust Score:10
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Start Server

Source: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-nodejs

Navigate to the project directory, install npm packages, and start the development server.

```bash
$ cd tinydrive-nodejs-starter
$ npm i
$ npm run start
```

--------------------------------

### Install Dependencies and Start Dev Server

Source: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-java

Navigate to the project directory, install NPM packages, and then start the development server using Gradle. Ensure Java 10+ and Gradle 4+ are installed.

```bash
cd tinydrive-java-spring-starter
gradle bootRun
```

--------------------------------

### Initialize Editor with Event Listener using `setup`

Source: https://www.tiny.cloud/docs/tinymce/latest/events

The `setup` option allows binding an event listener, such as 'init', before the editor instance is fully initialized. This example logs a message when the editor is initialized.

```javascript
tinymce.init({
  selector: 'textarea',
  setup: (editor) => {
    editor.on('init', (e) => {
      console.log('Editor is initialized.');
    });
  }
});
```

--------------------------------

### Compare Basic Configurations

Source: https://www.tiny.cloud/docs/tinymce/latest/migration-from-froala

Full page examples showing the transition from a Froala 3 setup to a TinyMCE 8 setup.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <link href='/path/to/froala-editor/base/directory/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
    <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/froala_editor.pkgd.min.js'></script>
    <link href='/path/to/froala-editor/base/directory/css/froala_style.min.css' rel='stylesheet' type='text/css' />
  </head>
  <body>
    <form method='post'>
      <textarea id='basic_froala'>Hello, World! I'm a froala editor!</textarea>
    </form>
    <script>
      const editor = new FroalaEditor('textarea#basic_froala')
    </script>
  </body>
</html>
```

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <script src='https://cdn.tiny.cloud/1/my-api-key/tinymce/5/tinymce.min.js' referrerpolicy='origin' crossorigin='anonymous'></script>
  </head>
  <body>
    <form method='post'>
      <textarea id='tiny_basic'>Hello, World! I'm a tiny editor!</textarea>
    </form>
    <script>
      tinymce.init({ selector: 'textarea#tiny_basic' });
    </script>
  </body>
</html>
```

--------------------------------

### Installation and Configuration

Source: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-mediaembed

Instructions for installing and configuring the Enhanced Media Embed plugin, including cloud and self-hosted setups.

```APIDOC
## Installation

1. Ensure the `media` plugin is added to the `plugins` list.
2. Add the `mediaembed` plugin to the `plugins` list.

### Example Cloud Configuration
Tiny Cloud automatically configures the service URL. Specify the `media` and `mediaembed` plugins, and optionally `mediaembed_max_width`.
```javascript
tinymce.init({
  selector: 'textarea',
  plugins: 'media mediaembed',
  mediaembed_max_width: 450
});
```

### Example Self-hosted Configuration
For self-hosted installations, configure the service URL using the `mediaembed_service_url` parameter.
```javascript
tinymce.init({
  selector: 'textarea',
  plugins: 'media mediaembed',
  mediaembed_service_url: 'SERVICE_URL',
  mediaembed_max_width: 450
});
```
```

--------------------------------

### Project Setup with Composer

Source: https://www.tiny.cloud/docs/tinymce/latest/export-to-pdf-with-jwt-authentication-php

Set up a new project directory and install the firebase/php-jwt package using Composer.

```bash
# Create and enter project directory
mkdir tinymce-app
cd tinymce-app
# Initialize Composer
composer require firebase/php-jwt
```

--------------------------------

### Execute Setup Function Before Render

Source: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref

Use the 'setup' attribute to execute a JavaScript callback function before the editor instance is rendered. This example logs a message when the editor is clicked.

```javascript
function setupEditor(editor) {
    editor.on('click', function () {
      console.log('Editor was clicked');
    });
  }
```

```html
<tinymce-editor setup="setupEditor"></tinymce-editor>
```

--------------------------------

### Example: Sidebar within `tinymce.init`

Source: https://www.tiny.cloud/docs/tinymce/latest/customsidebar

Demonstrates how to register and configure a sidebar directly within the `tinymce.init` configuration using the `setup` callback.

```APIDOC
## Example: Sidebar within `tinymce.init`

### Description
This example shows how to define a custom sidebar, including its `onSetup`, `onShow`, and `onHide` behaviors, directly within the `tinymce.init` configuration. The sidebar is also added to the toolbar.

### Code
```javascript
tinymce.init({
  selector: 'textarea',
  toolbar: 'mysidebar',
  setup: (editor) => {
    editor.ui.registry.addSidebar('mysidebar', {
      tooltip: 'My sidebar',
      icon: 'comment',
      onSetup: (api) => {
        console.log('Render panel', api.element());
        return () => {
          console.log('Removing sidebar');
        };
      },
      onShow: (api) => {
        console.log('Show panel', api.element());
        api.element().innerHTML = 'Hello world!';
      },
      onHide: (api) => {
        console.log('Hide panel', api.element());
      }
    });
  }
});
```
```

--------------------------------

### Server Setup (jwt.js)

Source: https://www.tiny.cloud/docs/tinymce/latest/export-to-pdf-with-jwt-authentication-nodejs

Example Node.js server setup using Express and JSONwebtoken to create a JWT endpoint.

```javascript
const express = require('express'); // Sets up the web server.
const jwt = require('jsonwebtoken'); // Generates and signs JWTs.
const cors = require('cors'); // Allows cross-origin requests.
const path = require('path'); // Handles file paths.

const app = express();
app.use(cors());

// Your private key (Replace this with your actual key)
const privateKey = `
----BEGIN PRIVATE KEY-----
{Your private PKCS8 key goes here}
-----END PRIVATE KEY-----
`;

app.use(express.static(path.join(__dirname, 'public')));

// JWT token generation endpoint
app.post('/jwt', (req, res) => {
    const payload = {
        aud: 'no-api-key', // Replace with your actual API key
        iat: Math.floor(Date.now() / 1000), // Issue timestamp
        exp: Math.floor(Date.now() / 1000) + (60 * 10) // Expiration time (10 minutes)
    };

    try {
        // Tokens are signed with the RS256 algorithm using your private key
        const token = jwt.sign(payload, privateKey, { algorithm: 'RS256' });
        res.json({ token });
    } catch (error) {
        res.status(500).send('Failed to generate JWT token.');
        console.error(error.message);
    }
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server running at http://localhost:${PORT}`);
});
```

--------------------------------

### Configure URL Dialog Example

Source: https://www.tiny.cloud/docs/tinymce/latest/urldialog

Setup for a toolbar button that opens an external URL in a dialog.

```html
<textarea id="url-dialog">
  <p>Click on the custom {;} toolbar button.</p>
</textarea>
```

```javascript
tinymce.init({
  selector: 'textarea#url-dialog',
  toolbar: 'urldialog',
  height: 300,
  setup: (editor) => {
    editor.ui.registry.addButton('urldialog', {
      icon: 'code-sample',
      onAction: () => editor.windowManager.openUrl({
        title: 'URL Dialog Demo',
        url: 'external-page.html',
        height: 640,
        width: 640
      })
    })
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

--------------------------------

### Example Skin Required Files

Source: https://www.tiny.cloud/docs/tinymce/latest/bundling-skins

These are the essential files for the 'example' skin. Ensure these are included when bundling.

```text
./skins/ui/example/content.css
./skins/ui/example/skin.css
```

--------------------------------

### Configure package.json for Post-Install Script

Source: https://www.tiny.cloud/docs/tinymce/latest/jquery-pm

Add a 'postinstall' script to your package.json to automatically run the setup script after npm installations. This ensures assets are always up-to-date.

```json
{
  // ... snip ...
  "scripts": {
    "postinstall": "node ./postinstall.js"
  }
}
```

--------------------------------

### Basic TinyMCE Setup with Accordion Plugin

Source: https://www.tiny.cloud/docs/tinymce/latest/accordion

This example demonstrates the minimal configuration required to enable the Accordion plugin and its toolbar button in TinyMCE.

```javascript
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'accordion',
  toolbar: 'accordion',
});
```

--------------------------------

### Full Example Initialization

Source: https://www.tiny.cloud/docs/tinymce/latest/anchor

A comprehensive example of initializing TinyMCE with the Anchor plugin and other common plugins.

```APIDOC
```javascript
tinymce.init({
  selector: 'textarea#anchor-demo',
  height: 500,
  plugins: [
    "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "anchor |undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  menubar: "file edit view insert format tools table help",
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```
```

--------------------------------

### start()

Source: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.writer

Writes a start element tag.

```APIDOC
## start()

### Description
Writes a start element, such as `<p id="a">`.

### Method
`start(name: String, attrs: Array, empty: Boolean)`

### Parameters
#### Path Parameters
- **name** (String) - Required - Name of the element.
- **attrs** (Array) - Optional - Array of objects containing an attribute name and value, or undefined if the element has no attributes.
- **empty** (Boolean) - Optional - Empty state if the tag should serialize as a void element. For example: `<img />`.

### Request Example
```javascript
const writer = tinymce.html.Writer();
writer.start('p', [{ key: 'id', value: 'a' }]);
writer.start('img', null, true);
console.log(writer.getContent());
```

### Response Example
```html
<p id="a"></p>
<img />
```
```

--------------------------------

### Menu Button Example

Source: https://www.tiny.cloud/docs/tinymce/latest/custom-menu-toolbar-button

A basic example demonstrating the implementation of a toolbar menu button.

```APIDOC
## Menu button example and explanation

The following is a simple toolbar menu button example:
  * TinyMCE
  * HTML
  * JS
  * Edit on CodePen

<p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p> <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2> <p>Select a menu item from the listbox above and it will insert contents into the editor at the caret position.</p> <h2>Got questions or need help?</h2> <ul> 
<li>Our <a href="https://www.tiny.cloud/docs/tinymce/8/">documentation</a> is a great resource for learning how to configure TinyMCE.</li> 
<li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li> 
<li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li> 
</ul> 

<h2>Found a bug?</h2> 
<p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p> 

<h2>Finally ...</h2> 
<p>Need file uploads in your app? Consider using <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> with TinyMCE for a fast, modern upload experience.</p> 
<p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content. <br>All the best from the TinyMCE team.</p>
My button
## Welcome to the TinyMCE editor demo!
Select a menu item from the listbox above and it will insert contents into the editor at the caret position.
## Got questions or need help?
  * Our documentation is a great resource for learning how to configure TinyMCE.
  * Have a specific question? Try the `tinymce` tag at Stack Overflow.
  * We also offer enterprise grade support as part of TinyMCE premium plans.


## Found a bug?
If you think you have found a bug please create an issue on the GitHub repo to report it to the developers.
```

--------------------------------

### Install dependencies

Source: https://www.tiny.cloud/docs/tinymce/latest/react-zip-bundle

Install the TinyMCE React component and the script-loader package.

```bash
cd tinymce-react-demo && npm install @tinymce/tinymce-react
```

```bash
npm install script-loader
```

--------------------------------

### Navigate to Project Directory

Source: https://www.tiny.cloud/docs/tinymce/latest/vue-cloud

Change into the newly created project directory to proceed with setup.

```bash
cd tinymce-vue-demo
```

--------------------------------

### Basic Setup

Source: https://www.tiny.cloud/docs/tinymce/latest/help

Demonstrates how to initialize TinyMCE with the Help plugin enabled.

```APIDOC
## Basic Setup

```javascript
tinymce.init({
  selector: 'textarea',
  plugins: 'help',
  toolbar: 'help'
});
```
```

--------------------------------

### Spelling Service Startup Logs

Source: https://www.tiny.cloud/docs/tinymce/latest/individual-spelling-container

Example output showing successful service initialization and configuration loading.

```text
2025-09-15 05:31:43.758Z [io-compute-8] INFO  ironbark - ironbark
...
2025-09-15 05:31:44.093Z [io-compute-blocker-8] INFO  ironbark - -> Raw Config assembled from various sources: ConfigOrigin(merge of /app/application.conf: 1,system properties,reference.conf @ jar:file:/app/ironbark.jar!/reference.conf: 1)
2025-09-15 05:31:44.120Z [io-compute-blocker-8] WARN  c.e.d.config.AllowedOriginsConfig$ - No allowed-origins specified in config!
2025-09-15 05:31:44.128Z [io-compute-blocker-8] INFO  ironbark - ironbark config loaded successfully: IronbarkConfig(Logger[ironbark],SpellingConfig(None,200,None,5,0.8,500),OriginWhitelist(List(),OriginPrecision(true)),None,None,StaticCustomDictionaryScanConfig)
2025-09-15 05:31:44.178Z [io-compute-blocker-8] INFO  com.ephox.nectar.data.Bees$ - Loading all dictionaries from WinterTree
2025-09-15 05:31:44.680Z [io-compute-blocker-4] INFO  com.ephox.nectar.data.Bees$ - Loading all dictionaries from WinterTree
2025-09-15 05:31:45.415Z [io-compute-blocker-8] INFO  o.h.b.c.nio1.NIO1SocketServerGroup - Service bound to address /[0:0:0:0:0:0:0:0]:18080
2025-09-15 05:31:45.425Z [io-compute-blocker-8] INFO  o.h.blaze.server.BlazeServerBuilder -
  _   _   _        _ _
 | |_| |_| |_ _ __| | | ___
 | ' \  _|  _| '_ \_  _(_-<
 |_||_\__|\__| .__/ |_|/__/
             |_|
2025-09-15 05:31:45.434Z [io-compute-blocker-8] INFO  o.h.blaze.server.BlazeServerBuilder - http4s v0.23.27 on blaze v0.23.16 started at http://[::]:18080/
```

--------------------------------

### TinyMCE Self-hosted Installation Example

Source: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker?keyword=docs

Use this configuration for self-hosted TinyMCE installations. Ensure the server-side component is deployed and accessible via `spellchecker_rpc_url`.

```javascript
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_rpc_url: 'localhost/ephox-spelling',
  spellchecker_language: 'en-US'  // Note: Using RFC5646 format with hyphen
});
```

--------------------------------

### Start the development server

Source: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-dotnet

Navigate to the project directory and execute the .NET run command to start the local server.

```sh
$ cd tinydrive-dotnet-starter
$ dotnet run
```

--------------------------------

### Navigate to Project Directory

Source: https://www.tiny.cloud/docs/tinymce/latest/vue-zip

Change into the newly created project directory to proceed with installations.

```bash
cd tinymce-vue-demo
shCopied!
```

--------------------------------

### Start the local development server

Source: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-php

Navigate to the project directory and launch the PHP built-in server to test the implementation.

```sh
$ cd tinydrive-php-starter
$ php -S localhost:3000
```

--------------------------------

### Basic Setup

Source: https://www.tiny.cloud/docs/tinymce/latest/save

Demonstrates how to initialize TinyMCE with the save plugin and add the save button to the toolbar.

```APIDOC
## POST /api/users

### Description
This endpoint allows for the creation of new user accounts.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Query Parameters
- **fields** (string) - Optional - Comma-separated list of fields to include in the response.

#### Request Body
- **username** (string) - Required - The desired username for the new account.
- **email** (string) - Required - The email address for the new account.
- **password** (string) - Required - The password for the new account.

### Request Example
```json
{
  "username": "johndoe",
  "email": "john.doe@example.com",
  "password": "securepassword123"
}
```

### Response
#### Success Response (201)
- **id** (string) - The unique identifier for the newly created user.
- **username** (string) - The username of the created user.
- **email** (string) - The email address of the created user.

#### Response Example
```json
{
  "id": "user_abc123",
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

--------------------------------

### Basic `importword_service_url` Configuration

Source: https://www.tiny.cloud/docs/tinymce/latest/importword?keyword=docs

Example of setting the `importword_service_url` option for on-premise setups. This option is required for self-hosted configurations.

```javascript
tinymce.init({
  selector: 'textarea',
  plugins: 'importword',
  toolbar: 'importword',
  importword_service_url: '<service-URL>' // required for On-premise setups only
});
```

--------------------------------

### Run the development server

Source: https://www.tiny.cloud/docs/tinymce/latest/react-cloud

Starts the local development server to preview the application.

```bash
npm run dev
```

--------------------------------

### Configure a split button in TinyMCE

Source: https://www.tiny.cloud/docs/tinymce/latest/custom-split-toolbar-button

Example demonstrating the setup of a split button with a text label and a static dropdown menu.

```javascript
tinymce.init({
  selector: 'textarea',
  toolbar: 'mybutton',
  setup: (editor) => {
    editor.ui.registry.addSplitButton('mybutton', {
      text: 'My Button',
      onAction: () => {
        editor.insertContent('&nbsp;<strong>Primary button clicked!</strong>&nbsp;');
      },
      fetch: (callback) => {
        const items = [
          { type: 'choiceitem', text: 'Menu item 1', value: '1' },
          { type: 'choiceitem', text: 'Menu item 2', value: '2' }
        ];
        callback(items);
      },
      onItemAction: (api, value) => {
        editor.insertContent('&nbsp;<strong>Menu item ' + value + ' clicked!</strong>&nbsp;');
      }
    });
  }
});
```

--------------------------------

### Create Project Files

Source: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-with-jwt-authentication-php

Commands to generate the initial web and server files.

```bash
# Create the public folder for web files
touch index.html
touch jwt.php
```

--------------------------------

### Bind TinyMCE Events using 'setup' Attribute

Source: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref

Bind events for the TinyMCE Web Component using the 'setup' attribute, which accepts a function that receives the editor instance. This allows for custom event handling logic. The example shows how to log a message when the editor is clicked.

```html
<script>
  function setupEditor(editor) {
    editor.on('click', function () {
      console.log('Editor was clicked');
    });
  }
</script>
<tinymce-editor setup="setupEditor"/>
```

--------------------------------

### Hyperlinking Service Startup Logs

Source: https://www.tiny.cloud/docs/tinymce/latest/individual-hyperlinking-container

Example output from the service logs indicating successful startup and configuration loading.

```text
2025-09-15 04:46:17 [io-compute-3] INFO  navi - navi
...
2025-09-15 04:46:17 [io-compute-blocker-3] INFO  navi - -> Raw Config assembled from various sources: ConfigOrigin(merge of /app/application.conf: 1,system properties,reference.conf @ jar:file:/app/navi.jar!/reference.conf: 1)
2025-09-15 04:46:17 [io-compute-blocker-3] WARN  c.e.d.config.AllowedOriginsConfig$ - No allowed-origins specified in config!
2025-09-15 04:46:17 [io-compute-blocker-3] WARN  c.e.d.config.AllowedOriginsConfig$ - No allowed-origins specified in config!
2025-09-15 04:46:17 [io-compute-blocker-3] INFO  navi - navi config loaded successfully: NaviConfig(LinkCheckerConfig(true,ReturnUnknown),true,CacheConfig(10000,86400 seconds,3600 seconds),SdkServiceWithClientConfig(HttpConfig(100,10,10,3,HttpConfigTimeouts(10,10,10),JvmTrustModel()),None,OriginWhitelist(List(),OriginPrecision(true))),SelfHostedMediaSourcesConfig(CustomEmbedPlugins(UrlTrie(Branch(None,TreeMap()),Branch(None,TreeMap()))),None),OriginWhitelist(List(),OriginPrecision(true)),Logger[navi])
2025-09-15 04:46:18 [io-compute-blocker-3] INFO  o.h.b.c.nio1.NIO1SocketServerGroup - Service bound to address /[0:0:0:0:0:0:0:0]:19100
2025-09-15 04:46:18 [io-compute-blocker-3] INFO  o.h.blaze.server.BlazeServerBuilder -
  _   _   _        _ _
 | |_| |_| |_ _ __| | | ___
 | ' \  _|  _| '_ \_  _(_-<
 |_||_\__|\__| .__/ |_|/__/
             |_|
2025-09-15 04:46:18 [io-compute-blocker-3] INFO  o.h.blaze.server.BlazeServerBuilder - http4s v0.23.27 on blaze v0.23.16 started at http://[::]:19100/
```

--------------------------------

### TinyMCE Cloud Installation Example

Source: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker?keyword=docs

Use this configuration to enable the TinyMCE Enterprise Spellchecking plugin with Tiny Cloud. The server-side component is automatically configured.

```javascript
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_language: 'en-US'  // Note: Using RFC5646 format with hyphen
});
```

--------------------------------

### View Initiation Logs

Source: https://www.tiny.cloud/docs/tinymce/latest/individual-spelling-container

Example of successful service startup logs indicating correct configuration loading.

```log
 ✔ Container spelling-tiny-spelling-tiny-1                                                                                                                         Created            0.1s
Attaching to spelling-tiny-1
spelling-tiny-1  | 2025-09-15 05:37:52.505Z [io-compute-0] INFO  ironbark - ironbark
...
spelling-tiny-1  | 2025-09-15 05:37:52.816Z [io-compute-blocker-0] INFO  ironbark - -> Raw Config assembled from various sources: ConfigOrigin(merge of /app/application.conf: 1,system properties,reference.conf @ jar:file:/app/ironbark.jar!/reference.conf: 1)
spelling-tiny-1  | 2025-09-15 05:37:52.874Z [io-compute-blocker-0] INFO  c.e.d.config.AllowedOriginsConfig$ - Read allowed-origins config (ignoring ports = true) as:
spelling-tiny-1  |  - localhost:8000
spelling-tiny-1  |  - example.com
spelling-tiny-1  |  - good.com
spelling-tiny-1  |  - my.company.org
spelling-tiny-1  | 2025-09-15 05:37:52.877Z [io-compute-blocker-0] INFO  ironbark - ironbark config loaded successfully: IronbarkConfig(Logger[ironbark],SpellingConfig(None,200,None,5,0.8,500),OriginWhitelist(List(localhost:8000, example.com, good.com, my.company.org),OriginPrecision(true)),Some(CustomDictionaryPath(/app/resources/custom-dictionaries)),Some(HunspellDictionaryPath(/app/resources/hunspell-dictionaries)),StaticCustomDictionaryScanConfig)
spelling-tiny-1  | 2025-09-15 05:37:52.959Z [io-compute-6] INFO  com.ephox.nectar.data.Bees$ - Loading all dictionaries from WinterTree
spelling-tiny-1  | 2025-09-15 05:37:54.143Z [io-compute-blocker-0] INFO  o.h.b.c.nio1.NIO1SocketServerGroup - Service bound to address /[0:0:0:0:0:0:0:0]:18080
spelling-tiny-1  | 2025-09-15 05:37:54.149Z [io-compute-blocker-0] INFO  o.h.blaze.server.BlazeServerBuilder -
spelling-tiny-1  |   _   _   _        _ _
spelling-tiny-1  |  | |_| |_| |_ _ __| | | ___
spelling-tiny-1  |  | ' \  _|  _| '_ \_  _(_-<
spelling-tiny-1  |  |_||_\__|\__| .__/ |_|/__/
spelling-tiny-1  |              |_|
spelling-tiny-1  | 2025-09-15 05:37:54.157Z [io-compute-blocker-0] INFO  o.h.blaze.server.BlazeServerBuilder - http4s v0.23.27 on blaze v0.23.16 started at http://[::]:18080/
```

--------------------------------

### Initialize Merge Tags with HTML content

Source: https://www.tiny.cloud/docs/tinymce/latest/mergetags?keyword=docs

Example showing the HTML textarea setup and the corresponding TinyMCE initialization with specific merge tag configurations.

```html
<textarea id="mergetags">
  <h1>Proposal for Services — {*Client.Name*}</h1>
  <h2>Prepared on {*Proposal.SubmissionDate*}</h2>
  <p>{*Client.Name*},</p>
  <p>As per our discussions on {*Client.LastCallDate*}, please find attached our formal Services Proposal.
  <p>{*Salutation*},</p>
  <p>{*Consultant*}.</p>
</textarea>
```

```javascript
tinymce.init({
  selector: "textarea#mergetags",
  plugins: "powerpaste a11ychecker linkchecker wordcount table advtable editimage autosave advlist anchor advcode image link lists media mediaembed searchreplace visualblocks mergetags",
  toolbar: "mergetags | undo redo | styles | bold italic underline | link | align bullist numlist",
  mergetags_prefix: '{*',
  mergetags_suffix: '*}',
  mergetags_list: [
    {
      title: 'Client',
      menu: [
        {
          value: 'Client.LastCallDate',
          title: 'Call date'
        },
        {
          value: 'Client.Name',
          title: 'Client name'
        }
      ]
    },
    {
      title: 'Proposal',
      menu: [
        {
          value: 'Proposal.SubmissionDate',
          title: 'Submission date'
        }
      ]
    },
    {
      value: 'Consultant',
      title: 'Consultant'
    },
    {
      value: 'Salutation',
      title: 'Salutation'
    }
  ]
});
```

--------------------------------

### Configure license key

Source: https://www.tiny.cloud/docs/tinymce/latest/vue-ref

Examples for setting commercial or GPL license keys.

```html
<editor
  licenseKey="T8LK:..."
/>
```

```html
<editor
  licenseKey="gpl"
/>
```

--------------------------------

### View Initiation Logs

Source: https://www.tiny.cloud/docs/tinymce/latest/individual-hyperlinking-container

Example output logs indicating successful service startup and configuration loading.

```text
✔ Container hyperlinking-tiny-hyperlinking-tiny-1                                                                                                                         Created        0.1s
Attaching to hyperlinking-tiny-1
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-7] INFO  navi - navi
...
-> Found value for property: /app/application.conf
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  navi -       * Parsing config defined by /app/application.conf from property: ephox.config.file
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  navi -         -> Processing file: /app/application.conf
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  navi -   * External application.conf => /opt/ephox/application.conf
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  navi -     * Optional File (/opt/ephox/application.conf). Defaults to empty if file not found
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  navi - * Internal Configuration
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  navi -   -> No extra internal configuration specified - skipping
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  navi - * Default (Reference) Configuration
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  navi -   * Loading configuration files from classpath (reference.conf and integration.conf). Neither is required.
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  navi - -> Raw Config assembled from various sources: ConfigOrigin(merge of /app/application.conf: 1,system properties,reference.conf @ jar:file:/app/navi.jar!/reference.conf: 1)
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  c.e.d.config.AllowedOriginsConfig$ - Read allowed-origins config (ignoring ports = true) as:
hyperlinking-tiny-1  |  - localhost:8000
hyperlinking-tiny-1  |  - example.com
hyperlinking-tiny-1  |  - good.com
hyperlinking-tiny-1  |  - my.company.org
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  c.e.d.config.AllowedOriginsConfig$ - Read allowed-origins config (ignoring ports = true) as:
hyperlinking-tiny-1  |  - localhost:8000
hyperlinking-tiny-1  |  - example.com
hyperlinking-tiny-1  |  - good.com
hyperlinking-tiny-1  |  - my.company.org
hyperlinking-tiny-1  | 2025-09-15 04:57:29 [io-compute-blocker-7] INFO  navi - navi config loaded successfully: NaviConfig(LinkCheckerConfig(true,ReturnUnknown),true,CacheConfig(10000,86400 seconds,3600 seconds),SdkServiceWithClientConfig(HttpConfig(100,10,10,3,HttpConfigTimeouts(15,15,15),JvmTrustModel()),None,OriginWhitelist(List(localhost:8000, example.com, good.com, my.company.org),OriginPrecision(true))),SelfHostedMediaSourcesConfig(CustomEmbedPlugins(UrlTrie(Branch(None,TreeMap()),Branch(None,TreeMap(org -> Branch(None,TreeMap(wikipedia -> Branch(None,TreeMap(en -> Branch(Some(PathMatcher(List((wiki/.*,WikipediaEmbedPlugin(https://en.wikipedia.org/w/api.php,10))))),TreeMap()))))))))),None),OriginWhitelist(List(localhost:8000, example.com, good.com, my.company.org),OriginPrecision(true)),Logger[navi])
hyperlinking-tiny-1  | 2025-09-15 04:57:30 [io-compute-blocker-7] INFO  o.h.b.c.nio1.NIO1SocketServerGroup - Service bound to address /[0:0:0:0:0:0:0:0]:19100
hyperlinking-tiny-1  | 2025-09-15 04:57:30 [io-compute-blocker-7] INFO  o.h.blaze.server.BlazeServerBuilder -
```

--------------------------------

### Example Usage: Creating Links to Anchors

Source: https://www.tiny.cloud/docs/tinymce/latest/anchor

A step-by-step guide on how to create links that navigate to specific anchors within the document using the TinyMCE editor.

```APIDOC
## How to Create Links to Anchors
To create a link that jumps to an anchor:
  1. Select the text you want to turn into a link
  2. Click the link button in the toolbar or use Insert → Link from the menu
  3. In the Insert/Edit Link dialog, click the "Anchors" dropdown list
  4. Select the anchor you want to link to from the dropdown
  5. Click Save to create the link

After creating anchors and links, you can test them by clicking on the links. The editor will automatically scroll to the anchor location in the document.
```

--------------------------------

### Initialize Project Scaffolding

Source: https://www.tiny.cloud/docs/tinymce/latest/vite-es6-npm

Create a new project directory with Vite and install the TinyMCE package.

```shell
npm create vite@5 . && npm install tinymce
```

--------------------------------

### Configure TinyMCE with Commercial License Key

Source: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref

Example of setting a commercial license key for TinyMCE when using a self-hosted deployment. This is required for commercial TinyMCE installations.

```html
<script>
  var editorConfig= {
    license_key: 'T8LK:...' 
  }
</script>
<tinymce-editor config="editorConfig"></tinymce-editor>
```

--------------------------------

### Basic Setup

Source: https://www.tiny.cloud/docs/tinymce/latest/code

This section shows how to initialize TinyMCE with the Code plugin enabled.

```APIDOC
## Basic setup

```javascript
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'code',
  toolbar: 'code',
});
```
```

--------------------------------

### Basic Setup

Source: https://www.tiny.cloud/docs/tinymce/latest/anchor

This snippet shows the minimal configuration required to enable the Anchor plugin and its associated toolbar button.

```APIDOC
## Basic setup
```javascript
tinymce.init({
  selector: "textarea",
  plugins: [
    "anchor", "link", // Link plugin is required for linking to anchors
  ],
  toolbar: "link | anchor",
});
```
```

--------------------------------

### Configure a Dialog Footer Submit Button

Source: https://www.tiny.cloud/docs/tinymce/latest/dialog-footer-buttons

Example configuration for a submit type footer button. This button is styled as primary, aligned to the start, and active only in design mode.

```javascript
{
  type: 'submit', // button type
  name: 'submitButton', // identifying name
  text: 'Submit', // text for the button
  // icon: 'checkmark', // will replace the text if configured
  enabled: true, // button is active when the dialog opens
  buttonType: 'primary', // style the button as a primary button
  align: 'start', // align the button to the left of the dialog footer
  context: 'mode:design' // button is active when the editor is in design mode, only effective if enabled is true
}
```

--------------------------------

### Configure TinyMCE Editor in JavaScript

Source: https://www.tiny.cloud/docs/tinymce/latest/webpack-cjs-download

Imports and initializes TinyMCE with specified themes, models, skins, and plugins. This example demonstrates how to bundle TinyMCE assets for a self-hosted setup.

```javascript
/* Import TinyMCE */
const tinymce = require('../tinymce/js/tinymce/tinymce.js');

/* Default icons are required. After that, import custom icons if applicable */
require('../tinymce/js/tinymce/icons/default/icons.js');

/* Required TinyMCE components */
require('../tinymce/js/tinymce/themes/silver/theme.js');
require('../tinymce/js/tinymce/models/dom/model.js');

/* Import the default skin (oxide). Replace with a custom skin if required. */
require('../tinymce/js/tinymce/skins/ui/oxide/skin.css');

/* Import plugins - include the relevant plugin in the 'plugins' option. */
require('../tinymce/js/tinymce/plugins/advlist');
require('../tinymce/js/tinymce/plugins/code');
require('../tinymce/js/tinymce/plugins/emoticons');
require('../tinymce/js/tinymce/plugins/emoticons/js/emojis');
require('../tinymce/js/tinymce/plugins/link');
require('../tinymce/js/tinymce/plugins/lists');
require('../tinymce/js/tinymce/plugins/table');
require('../tinymce/js/tinymce/plugins/help');
require('../tinymce/js/tinymce/plugins/help/js/i18n/keynav/en');

/* content UI CSS is required (using the default oxide skin) */
const contentUiSkinCss = require('../tinymce/js/tinymce/skins/ui/oxide/content.css');

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
const contentCss = require('../tinymce/js/tinymce/skins/content/default/content.css');

/* Initialize TinyMCE */
exports.render = () => {
  tinymce.init({
    selector: 'textarea#editor',
    /* All plugins need to be imported and added to the plugins option. */
    plugins: 'advlist code emoticons link lists table help',
    toolbar: 'bold italic | bullist numlist | link emoticons',
    skin: false,
    content_css: false,
    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(),
    /* Optional: Configure external_plugins for lazy loading premium plugins
     * Remove the import or require statement for any premium plugin you want to lazy load,
     * then uncomment and configure external_plugins below:
    */
    // external_plugins: {
    //   'advcode': '/plugins/advcode/plugin.min.js',
    //   'tinycomments': '/plugins/tinycomments/plugin.min.js'
    // },

  });
};
```

--------------------------------

### Clone the Tiny Drive .NET starter repository

Source: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-dotnet

Use this command to download the starter project from GitHub.

```sh
$ git clone git@github.com:tinymce/tinydrive-dotnet-starter.git
```

--------------------------------

### Setup Post-Install Script for Copying Packages

Source: https://www.tiny.cloud/docs/tinymce/latest/jquery-pm

This JavaScript script copies installed packages from node_modules to a public directory. It ensures TinyMCE and its jQuery integration are accessible for the frontend.

```javascript
const fse = require('fs-extra');
const path = require('path');

const nodeModulesDir = path.join(__dirname, 'node_modules');
const publicDir = path.join(__dirname, 'public');

fse.emptyDirSync(path.join(publicDir, 'jquery'));
fse.emptyDirSync(path.join(publicDir, 'tinymce'));
fse.emptyDirSync(path.join(publicDir, 'tinymce-jquery'));
fse.copySync(path.join(nodeModulesDir, 'jquery', 'dist'), path.join(publicDir, 'jquery'), { overwrite: true });
fse.copySync(path.join(nodeModulesDir, 'tinymce'), path.join(publicDir, 'tinymce'), { overwrite: true });
fse.copySync(path.join(nodeModulesDir, '@tinymce', 'tinymce-jquery', 'dist'), path.join(publicDir, 'tinymce-jquery'), { overwrite: true });
```

--------------------------------

### Basic Full Page HTML Plugin Setup

Source: https://www.tiny.cloud/docs/tinymce/latest/fullpagehtml

Add 'fullpagehtml' to the plugins and toolbar options to enable the Full Page HTML plugin. This example sets a default doctype.

```javascript
tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  toolbar: 'fullpagehtml',
  fullpagehtml_default_doctype: '<!DOCTYPE html>'
});
```

--------------------------------

### Initialize TinyMCE with Quickbars

Source: https://www.tiny.cloud/docs/tinymce/latest/quickbars

Configuration examples for initializing TinyMCE with the Quickbars plugin in different editor modes.

```javascript
tinymce.init({
  selector: 'textarea#iframe',
  plugins: 'quickbars table image link lists media autoresize help',
  toolbar: 'undo redo | blocks | bold italic | alignleft aligncentre alignright alignjustify | indent outdent | bullist numlist',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

tinymce.init({
  selector: 'div#inline-distraction-free',
  menubar: false,
  inline: true,
  plugins: [
    'autolink', 'autoresize', 'codesample', 'link', 'lists', 'media',
    'powerpaste', 'table', 'image', 'quickbars', 'codesample', 'help'
  ],
  toolbar: false,
  quickbars_insert_toolbar: 'quicktable image media codesample',
  quickbars_selection_toolbar: 'bold italic underline | blocks | bullist numlist | blockquote quicklink',
  contextmenu: 'undo redo | inserttable | cell row column deletetable | help',
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
});
```

```javascript
tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'quickbars'
});
```

--------------------------------

### Clone the Tiny Drive PHP starter repository

Source: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-php

Use this command to download the starter project from GitHub.

```sh
$ git clone git@github.com:tinymce/tinydrive-php-starter.git
```

--------------------------------

### Configure TinyMCE Editor Initialization

Source: https://www.tiny.cloud/docs/tinymce/latest/rollup-es6-npm

Imports required TinyMCE components, themes, models, skins, and plugins for editor setup. This example includes premium plugins and custom content styling.

```javascript
/* Import TinyMCE */
import tinymce from 'tinymce';

/* Default icons are required. After that, import custom icons if applicable */
import 'tinymce/icons/default';

/* Required TinyMCE components */
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

/* Import the default skin (oxide). Replace with a custom skin if required. */
import 'tinymce/skins/ui/oxide/skin.css';

/* Import plugins */
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/code';
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/emoticons/js/emojis';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/help';
import 'tinymce/plugins/help/js/i18n/keynav/en';

// Import premium plugins from NPM
import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
// Always include the licensekeymanager plugin when using premium plugins with a commercial license.
import 'tinymce-premium/plugins/licensekeymanager';

/* content UI CSS is required (using the default oxide skin) */
import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.css';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import contentCss from 'tinymce/skins/content/default/content.css';

/* Initialize TinyMCE */
export function render () {
  tinymce.init({
    selector: 'textarea#editor',
    plugins: 'advlist code emoticons link lists table help',
    toolbar: 'bold italic | bullist numlist | link emoticons',
    skin: false,
    content_css: false,
    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(),
    /* Alternatively to importing premium plugins directly, you can configure external_plugins to load premium plugins in a different location.
     * Remember to include the licensekeymanager plugin when using premium plugins.
    */
    // external_plugins: {
    //   'advcode': '<path_to_premium_plugins>/advcode/plugin.min.js',
    //   'tinycomments': '<path_to_premium_plugins>/tinycomments/plugin.min.js'
    //   'licensekeymanager': '<path_to_premium_plugins>/licensekeymanager/plugin.min.js',
    // },

  });
};

```

--------------------------------

### Bind `ResizeEditor` Event Before Initialization

Source: https://www.tiny.cloud/docs/tinymce/latest/events

This example demonstrates binding an editor core event like `ResizeEditor` using the `setup` option. The `e` parameter is not used as this event does not return data.

```javascript
tinymce.init({
  selector: 'textarea',
  setup: (editor) => {
    editor.on('ResizeEditor', (e) => {
      console.log('Editor was resized.');
    });
  }
});
```

--------------------------------

### Start the development server

Source: https://www.tiny.cloud/docs/tinymce/latest/laravel-tiny-cloud

Launch the local Laravel development server to preview the application.

```sh
php artisan serve
```
Tokens:
Raw