TinyMCE

https://www.tiny.cloud/docs/
Admin
TinyMCE is a powerful, open-source rich text editor for web applications, offering extensive...
Tokens:716,545
Snippets:7,695
Trust Score:10
Update:5 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 and run these commands to install NPM packages and start the Gradle bootRun.

```bash
$ cd tinydrive-java-spring-starter
$ gradle bootRun
shCopied!

```

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

### Execute Setup Function Before Render

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

Use the `setup` attribute to provide a JavaScript callback function that executes 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>
```

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

### Project Setup with Composer

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

Set up your project directory and install the firebase/php-jwt library using Composer.

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

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

### Bind Editor Click Event using Setup Attribute

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

Use the `setup` attribute to bind events by providing a function that receives the editor instance. This example logs 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"/>
```

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

### Initialize TinyMCE with Demo Identity Service (Quick Start)

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

This example demonstrates the simplest way to integrate TinyMCE AI with the demo identity service. Replace `{apiKey}` with your trial API key. Note that in production, user sessions should be scoped to the page, not individual instances.

```javascript
tinymce.init({
  selector: "textarea",
  plugins: "tinymceai",
  toolbar: "tinymceai-chat tinymceai-review tinymceai-quickactions",
  sidebar_show: 'aichat',
  tinymceai_token_provider: async () => {
	await fetch(`https://demo.api.tiny.cloud/1/no-api-key/auth/random`, { method: "POST", credentials: "include" });
	return await fetch(`https://demo.api.tiny.cloud/1/no-api-key/jwt/tinymceai`, { credentials: "include" })
	  .then(resp => resp.text())
	  .then(token => ({ token }))
  }
});
```

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

### Complete TinyMCE AI Plugin Setup with Custom Toolbar

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

This example demonstrates a complete setup with a custom toolbar string. To use the default toolbar, omit the `toolbar` option. It includes configurations for authentication, default model, model selection, and custom chat fetchers and quick actions.

```javascript
tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  content_id: 'document-123',
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  },
  tinymceai_default_model: 'agent-1',
  tinymceai_allow_model_selection: true,
  tinymceai_chat_fetch_sources: async () => [
    {
      label: 'My Documents',
      sources: [
        { id: 'doc-1', label: 'Document 1', type: 'file' },
        { id: 'url-1', label: 'Web Page', type: 'web-resource' }
      ]
    }
  ],
  tinymceai_chat_fetch_source: async (id) => {
    const res = await fetch(`/api/documents/
${id}`);
    const blob = await res.blob();
    const filename = `
${id}.pdf`;
    return { type: 'file', file: new File([blob], filename, { type: blob.type }) };
  },
  tinymceai_quickactions_custom: [
    { title: 'Explain like I am five', prompt: 'Explain the following text in simple terms.', type: 'chat' }
  ]
});
```

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

### Setup postinstall Script for Copying Packages

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

Configures a postinstall script to copy necessary package files into a public directory after dependency installation.

```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 });
```

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

### Menu Button Example

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

A simple example demonstrating 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.
```

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

### Run React Development Server

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

Start the development server to view the TinyMCE editor in your React application. This command assumes the project has been set up and dependencies installed.

```bash
npm run dev
```

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

### Configuration Example

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

Example of how to initialize TinyMCE with the `advlist_number_styles` option to customize numbered list styles.

```APIDOC
## Configuration Example

### Description
Example of how to initialize TinyMCE with the `advlist_number_styles` option to customize numbered list styles.

### Method
`tinymce.init`

### Endpoint
N/A

### Parameters
#### Configuration Options
- **selector** (string) - Required - The CSS selector for the element to initialize the editor on.
- **plugins** (string) - Required - Specifies the plugins to load, including 'lists' and 'advlist'.
- **toolbar** (string) - Required - Defines the toolbar buttons, including 'numlist'.
- **advlist_number_styles** (string) - Optional - Defines the available number styles for the `numlist` button. Example: `'lower-alpha'`

### Request Example
```javascript
tinymce.init({
  selector: 'textarea',
  plugins: 'lists advlist',
  toolbar: 'numlist',
  advlist_number_styles: 'lower-alpha'
});
```

### Response
N/A
```

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

### Required Files for Example Skin

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

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

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

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

### Install TinyMCE

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

Install the TinyMCE library as a project dependency.

```bash
npm install tinymce
```

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

### Installation

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

Instructions for installing the TinyMCE React integration package using NPM or Yarn.

```APIDOC
## Installing the TinyMCE React integration using NPM or Yarn

To install the `tinymce-react` package and save it to your `package.json`.

```
npm install @tinymce/tinymce-react
```

or with Yarn

```
yarn add @tinymce/tinymce-react
```
```

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

### TinyMCE Self-hosted Installation Example

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

Integrate the TinyMCE Enterprise Spellchecking plugin with a self-hosted setup. Ensure the server-side component is deployed.

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

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

### Navigate to Project Directory

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

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

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

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

### Basic Setup

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

Demonstrates the basic initialization of the TinyMCE editor with the Save plugin enabled.

```APIDOC
## Basic Setup

This section shows how to integrate the Save plugin into your TinyMCE editor.

### Method

`tinymce.init()`

### Endpoint

N/A (Client-side configuration)

### Request Body

```json
{
  "selector": "textarea",
  "plugins": "save",
  "toolbar": "save"
}
```

### Request Example

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

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

### Basic Setup

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

This snippet shows the basic initialization of TinyMCE with the help plugin enabled.

```APIDOC
## Basic setup
```
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'help',
  toolbar: 'help'
});
```
```

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

### Example Server Logs

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

These logs indicate successful service startup and configuration loading. A warning about 'allowed-origins' is expected if not yet configured.

```log
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/
```

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

### Navigate and Start PHP Dev Server

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

Change directory into the cloned project and start the local development server using PHP's built-in server.

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

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

### TinyMCE Cloud Installation Example

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

Integrate 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
});
```

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

### Expected Docker Container Logs

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

This is an example of the log output you should expect when the Docker container starts successfully. It indicates successful configuration loading and service binding.

```log
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/
```

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

### Start TinyMCE Development Server

Source: https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin

Execute this command to launch the development server for previewing skins. Ensure the server is running to see your skin changes in real-time.

```sh
yarn oxide-start
```

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

### Initialize TinyMCE with Inline CSS Plugin

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

Initializes TinyMCE with the Inline CSS plugin enabled, including custom content styles. This setup is used for the interactive example.

```javascript
const settings = {
  plugins: [
    'advlist', 'anchor', 'autolink', 'charmap', 'code', 'fullscreen',
    'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
    'preview', 'searchreplace', 'table', 'visualblocks', 'inlinecss'
  ],
  toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  content_style: `
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
    .blue-background {
      background-color: blue;
    }
    .red-background {
      background-color: red;
    }
  `
};

tinymce.init({
  selector: 'textarea.classic',
  ...settings
});

const button = document.getElementById('inline-css-btn');
const outputTextArea = document.getElementById('output-text-area');

button.addEventListener('click', () => {
  const pluginAPI = tinymce.get(0).plugins.inlinecss;
  const outputIframe = document.getElementById('outputIframe');
  const rawDoc = outputIframe.contentWindow.document;
  pluginAPI.getContent().then((content) => {
    outputTextArea.value = content.html;

    if (rawDoc) {
      rawDoc.open();
      rawDoc.write(content.html);
      rawDoc.close();
    }
  });
});
```

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

### Example Docker Container Initiation Logs

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

These logs indicate a successful startup of the hyperlinking service container, including configuration loading and service binding.

```log
✔ 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 -

```

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

### Import Multiple Premium Plugins for Bundling

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

This example demonstrates importing multiple premium plugins, including the essential `licensekeymanager`, for direct inclusion in your application bundle. Ensure you have the `tinymce-premium` package installed.

```javascript
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';
```

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

### Configure Import from Word with On-Premise Service URL

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

This example shows how to set the `importword_service_url` for on-premise setups. This option is required for self-hosted deployments and should point to the base URL of your DOCX-to-HTML conversion service.

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

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

### TinyMCE Editor Read-Only Example Setup

Source: https://www.tiny.cloud/docs/tinymce/latest/editor-important-options

Initializes a TinyMCE editor with the `readonly` option set to true, and includes basic content styling. This snippet is part of a live demo for toggling editor modes.

```javascript
tinymce.init({
  selector: 'textarea#readonly-demo',
  readonly: true,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

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

### Toggle Editor Mode (Read-Only/Design)

Source: https://www.tiny.cloud/docs/configure/integration-and-setup

JavaScript functions to get the current editor mode and toggle between read-only and design modes. This example includes HTML for a textarea and a button to control the editor's state.

```javascript
function getEditorStatus (editorId) {
    return tinymce.get(editorId).mode.get();
  }

  function toggleEditorStatus (editorId, currentStatus) {
    if (currentStatus === "design") {
      tinymce.get(editorId).mode.set("readonly");
    } else {
      tinymce.get(editorId).mode.set("design");
    }
  }

  function enableDisable (targetEditor, targetElement) {
    const status = getEditorStatus(targetEditor);
    const button = document.getElementById(targetElement);
    toggleEditorStatus(targetEditor, status);
    if (status === "design") {
      button.innerText = "Enable editor";
    } else {
      button.innerText = "Disable editor";
    }
  }
```

```html
<textarea id="readonly-demo">Hello, World!</textarea>

<button id="enableDisableButton" class="live_demo" onclick="enableDisable('readonly-demo','enableDisableButton')">Enable editor</button>
```

```css
.button {
  display: inline-block;
  min-width: 158px;
  height: 45px;
  line-height: 45px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  padding: 0 25px;
  text-align: center;
}
.button:active {
  transform: translateY(1px);
}

.button-color {
  background-color: #1976D2;
}

.button-color:hover {
  background-color: #1d6abe;
}

.link-text {
  color: #fff;
  font-weight: 600;
}
```

```javascript
tinymce.init({
  selector: 'textarea#readonly-demo',
  readonly: true,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

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

### Navigate to Project Directory

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

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

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

```

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

### Add Custom Keyboard Shortcut for Text Highlight

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

Use the `editor.addShortcut` API within the `setup` function to define custom keyboard shortcuts. This example adds a shortcut to apply a yellow highlight to selected text.

```html
<textarea id="custom-shortcut">
  <p>To add a yellow highlight to this text:</p>
  <ul>
    <li>Select some text
      <ul>
        <li>On PC, press: Ctrl+Alt+Y</li>
        <li>On macOS, press: Command+Option+Y</li>
      </ul>
    </li>
  </ul>
</textarea>
```

```javascript
tinymce.init({
  selector: 'textarea#custom-shortcut',
  height: 300,
  setup: (editor) => {
    editor.addShortcut('meta+alt+y', 'Add yellow highlight to selected text.', () => {
      editor.execCommand('hilitecolor', false , '#FFFF00');
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

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

### Clone Tiny Drive .NET MVC Starter Project

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

Clone the starter project repository to your local machine using Git. This command initializes the project structure.

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

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

### Initialize Editor with Init Event Handler via Setup

Source: https://www.tiny.cloud/docs/advanced/events

Bind an event listener to the 'init' event using the 'setup' option before the editor instance is initialized. This is functionally equivalent to using init_instance_callback.

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

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

### Initialize TinyMCE with a Custom Sidebar

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

This example demonstrates how to initialize TinyMCE and add a custom sidebar using the `setup` callback and `sidebar_show` option. The sidebar is configured with a tooltip, icon, and an `onShow` handler to display content.

```javascript
tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  sidebar_show: 'mysidebar',
  setup: (editor) => {
    editor.ui.registry.addSidebar('mysidebar', {
      tooltip: 'My sidebar',
      icon: 'comment',
      onShow: (api) => {
        api.element().innerHTML = 'Hello world!';
      },
    });
  }
});
```

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

### Configure Templates Plugin for Remote Storage

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

Example configuration for the Templates plugin to enable user-modifiable template lists by interacting with a remote backend service via REST API. Requires setup on both TinyMCE and the backend.

```javascript
tinymce.init({
  selector: 'textarea',
  plugins: 'templates',
  toolbar: 'inserttemplate',
  templates: [
    { title: 'My template 1', description: 'A template description', content: '<p>My template 1</p>' },
    { title: 'My template 2', description: 'Another template description', url: 'development/templates/my_template2.html' }
  ]
});
```

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

### Setup Postinstall Script for TinyMCE

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

Configure a `postinstall` script to copy TinyMCE to the `public` directory, making it available as static assets.

```javascript
import fse from 'fs-extra';
import path from 'path';

const topDir = import.meta.dirname;
fse.emptyDirSync(path.join(topDir, 'public', 'tinymce'));
fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'public', 'tinymce'), { overwrite: true });
```

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

### Expected TinyMCE Image Proxy Docker Logs

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

This is an example of the expected log output when the TinyMCE Image Proxy service starts successfully within a Docker container. Note the warning about `allowed-origins` not being configured, which is expected at this stage.

```log
2025-09-22 00:04:26 [io-compute-8] INFO  emissary - emissary
...
2025-09-22 00:04:26 [io-compute-blocker-8] INFO  emissary - -> Raw Config assembled from various sources: ConfigOrigin(merge of /app/application.conf: 1,system properties,reference.conf @ jar:file:/app/emissary.jar!/reference.conf: 1)
2025-09-22 00:04:26 [io-compute-blocker-8] WARN  c.e.d.config.AllowedOriginsConfig$ - No allowed-origins specified in config!
2025-09-22 00:04:26 [io-compute-blocker-8] INFO  emissary - emissary config loaded successfully: EmissaryConfig(SdkHttpConfig(HttpConfig(100,10,10,3,HttpConfigTimeouts(10,10,10),JvmTrustModel()),None),OriginWhitelist(List(),OriginPrecision(true)),Some(10000000))
2025-09-22 00:04:27 [io-compute-7] INFO  o.h.b.c.nio1.NIO1SocketServerGroup - Service bound to address /[0:0:0:0:0:0:0:0]:19040
2025-09-22 00:04:27 [io-compute-7] INFO  o.h.blaze.server.BlazeServerBuilder - 
  _   _   _        _ _
 | |_| |_| |_ _ __| | | ___ 
 | ' \  _|  _| '_ \_  _(_-<
 |_||_\__| |__| .__/ |_|/__/ 
             |_| 
2025-09-22 00:04:27 [io-compute-7] INFO  o.h.blaze.server.BlazeServerBuilder - http4s v0.23.27 on blaze v0.23.16 started at http://[::]:19040/
```

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

### Initialize TinyMCE with Basic Options

Source: https://www.tiny.cloud/docs/general-configuration-guide/basic-setup

A fundamental TinyMCE initialization example demonstrating selector, plugins, and custom configuration options. Ensure the selector matches your HTML element.

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

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

### Interface with OpenAI Completions API using `ai_request`

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

This example demonstrates how to use the `ai_request` function to send prompts to the OpenAI Completions API. It includes setup for API key, request options, and response handling. Note: Storing API keys client-side is not recommended.

```javascript
// This example stores the API key in the client side integration. This is not recommended for any purpose.
// Instead, an alternate method for retrieving the API key should be used.
const api_key = '<INSERT_API_KEY_HERE>';

const ai_request = (request, respondWith) => {
  const openAiOptions = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${api_key}`
    },
    body: JSON.stringify({
      model: 'gpt-4o',
      temperature: 0.7,
      max_tokens: 800,
      messages: [{ role: 'user', content: request.prompt }],
    })
  };
  respondWith.string((signal) => window.fetch('https://api.openai.com/v1/chat/completions', { signal, ...openAiOptions })
    .then(async (response) => {
      if (response) {
        const data = await response.json();
        if (data.error) {
          throw new Error(`${data.error.type}: ${data.error.message}`);
        } else if (response.ok) {
          // Extract the response content from the data returned by the API
          return data?.choices[0]?.message?.content?.trim();
        }
      } else {
        throw new Error('Failed to communicate with the ChatGPT API');
      }
    })
  );
};

tinymce.init({
  selector: 'textarea',  // Change this value according to your HTML
  plugins: 'ai',
  toolbar: 'aidialog aishortcuts',
  ai_request
});
jsCopied!

```

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

### Split Button Configuration Example

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

This example demonstrates how to configure a split button with a text label and a static dropdown menu. Ensure the 'fetch' and 'onItemAction' callbacks are correctly implemented for menu functionality.

```javascript
tinymce.init({
  selector: 'textarea',
  plugins: 'lists',
  toolbar: 'mySplitButton | bold italic | numlist outdent',
  setup: function (editor) {
    editor.ui.registry.addSplitButton('mySplitButton', {
      text: 'My Button',
      icon: 'checkmark',
      tooltip: 'My custom split button',
      fetch: function (success) {
        var items = [
          { text: 'Item 1', value: '1' },
          { text: 'Item 2', value: '2' },
          { text: 'Item 3', value: '3' }
        ];
        success(items);
      },
      onItemAction: function (api, value) {
        console.log('Item ' + value + ' clicked!');
      }
    });
  }
});
```

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

### Customizing Help Dialog Tabs

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

This example demonstrates how to customize the tabs displayed in the Help dialog using the `help_tabs` option. It includes default tabs, a custom HTML panel tab, overriding an existing tab, and dynamically adding tabs via the `setup` function and a toolbar button.

```javascript
tinymce.init({
  selector: 'textarea',
  plugins: 'help link table code emoticons',
  toolbar: 'help addTab',
  help_tabs: [
    'shortcuts', // the default shortcuts tab
    'keyboardnav', // the default keyboard navigation tab
    'plugins', // the default plugins tab
    {
      name: 'custom1',
      title: 'Custom Tab 1',
      items: [
        {
          type: 'htmlpanel',
          html: '<p>This is a custom tab</p>',
        }
      ]
    },
    {
      name: 'versions', // override the default versions tab
      title: 'Custom Versions',
      items: [
        {
          type: 'htmlpanel',
          html: 'This is a custom versions panel.'
        }
      ]
    },
    'custom2', // new tab custom2 as defined on init in setup() below
    'custom3' // new tab custom3 as defined on button click in setup() below
  ],
  setup: (editor) => {
    // on editor init, add a tab called custom2
    editor.on('init', () => {
      editor.plugins.help.addTab({
        name: 'custom2',
        title: 'Custom Tab 2',
        items: [
          {
            type: 'htmlpanel',
            html: '<p>This is another custom tab</p>',
          }
        ]}
      );
    });

    // add a toolbar button that when clicked adds a tab called custom3
    editor.ui.registry.addButton('addTab', {
      text: 'Add tab',
      onAction: () => {
        editor.plugins.help.addTab({
          name: 'custom3',
          title: 'Custom Tab 3',
          items: [
            {
              type: 'htmlpanel',
              html: '<p>This is yet another custom tab</p>',
            }
          ]
        });
      }
    });
  }
});
```

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

### Basic TinyMCE Setup

Source: https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins

A fundamental HTML file structure to initialize a local TinyMCE instance. Ensure the Tiny Cloud CDN script is included.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: 'textarea'
  });
  </script>
</head>

<body>
  <form method="post">
    <textarea>Hello, World!</textarea>
  </form>
</body>
</html>
```

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

### Install OpenSSL on SUSE/openSUSE

Source: https://www.tiny.cloud/docs/tinymce/latest/generate-rsa-key-pairs

Installs OpenSSL on openSUSE or SUSE Linux Enterprise Server using zypper. Refresh repositories before installing.

```bash
sudo zypper refresh
sudo zypper install openssl
```

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

### Install Premium TinyMCE Plugins

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

Optional: Install premium TinyMCE plugins if required for your project. Ensure the version matches your TinyMCE installation.

```sh
npm install tinymce-premium@^8.3
shCopied!
```

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

### Navigate and Run .NET Development Server

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

Change the directory to the cloned project and start the development server using the .NET CLI. This command compiles and runs the application.

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

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

### Verify Curl Installation

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

After installing curl on Windows, run 'curl --version' in the command prompt to ensure it is installed correctly and to check the version.

```bash
curl --version
```

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

### Display File, Edit, and View Menus

Source: https://www.tiny.cloud/docs/general-configuration-guide/basic-setup

Use the 'menubar' option to specify which default menus to display. This example shows how to include the File, Edit, and View menus.

```javascript
tinymce.init({
  selector: 'textarea',
  menubar: 'file edit view'
});
```

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

### Install OpenSSL on Debian-based Systems

Source: https://www.tiny.cloud/docs/tinymce/latest/generate-rsa-key-pairs

Installs OpenSSL on Debian, Ubuntu, Linux Mint, or other Debian-based distributions using apt. Run update before installing.

```bash
sudo apt update
sudo apt install openssl
```

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

### TinyMCE Initialization with Context Menu

Source: https://www.tiny.cloud/docs/ui-components/contextmenu

Example of initializing TinyMCE with a custom context menu configuration.

```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": "usr_123abc456",
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

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

### Install OpenSSL on RHEL/CentOS 7

Source: https://www.tiny.cloud/docs/tinymce/latest/generate-rsa-key-pairs

Installs OpenSSL on Red Hat Enterprise Linux 7 or CentOS 7 using yum. Ensure your system is up-to-date before installation.

```bash
sudo yum check-update
sudo yum install openssl
```

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

### Basic TinyMCE Initialization with Context Menu

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

This example demonstrates a basic TinyMCE initialization that includes the context menu plugin and specifies which items to display.

```APIDOC
## POST /api/users

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

### Method
POST

### Endpoint
/api/users

### Parameters
#### Query Parameters
- **limit** (integer) - Optional - The maximum number of users to return.

#### 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** (integer) - 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": 123,
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

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

### Installation

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

Install the TinyMCE Angular integration package using NPM.

```APIDOC
## Installing the TinyMCE Angular integration using NPM
To install the `tinymce-angular` package and save it to your `package.json`.
```
npm install @tinymce/tinymce-angular
```
```
Tokens:
Raw