TinyMCE

https://github.com/tinymce/tinymce-docs
Admin
TinyMCE rich text editor documentation — setup, configuration, plugins, APIs, and integration guides
Tokens:945,692
Snippets:8,714
Trust Score:9.4
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Install dependencies and start the Tiny Drive Node.js dev server

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinydrive-nodejs.adoc

Navigates into the cloned project directory, installs npm packages, and starts the development server. After running these commands, open http://localhost:3000 to view the example project.

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

```

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

### Setup commands: bun install, bun run dev, bun run build, bun oxide-start

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/creating-a-skin.adoc

Commands to install dependencies, build the project, and start the development server for previewing skins. Run these in the downloaded TinyMCE source directory.

```sh
bun install && bun run dev && bun run build
```

```sh
bun oxide-start
```

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

### Start the .NET dev server with dotnet run

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinydrive-dotnet.adoc

Navigates into the cloned starter project directory and starts the development server. After running these commands, open the example project at http://localhost:3000.

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

```

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

### Initialize project and install dependencies

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/partials/auth/document-converters/nodejs/initial-project-setup.adoc

Sets up a new Node.js project directory, initializes it with npm, and installs the required packages (express, cors, jsonwebtoken) for the TinyMCE authentication example.

```bash
# Create and enter project directory
mkdir tinymce-my-app
cd tinymce-my-app

# Initialize project
npm init -y

# Install required packages
npm install express cors jsonwebtoken
```

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

### Install and configure MySQL on Debian/Ubuntu

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinymceai-on-premises-database.adoc

Commands to install MySQL server, enable it to start on boot, run the secure installation, and create the 'ai_service' database and user with the required privileges.

```bash
sudo apt update
sudo apt install -y mysql-server
sudo systemctl enable --now mysql
sudo mysql_secure_installation
sudo mysql <<'SQL'
CREATE DATABASE ai_service;
CREATE USER 'ai_service'@'%' IDENTIFIED BY '<strong-password>';
GRANT SELECT, INSERT, UPDATE, DELETE, ALTER, CREATE, DROP,
      INDEX, TRIGGER, LOCK TABLES, REFERENCES
  ON ai_service.* TO 'ai_service'@'%';
FLUSH PRIVILEGES;
SQL
```

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

### Install Node.js dependencies

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinymceai-on-premises-jwt.adoc

Install dependencies for the Node.js token endpoint example.

```bash
npm install express jsonwebtoken
```

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

### Install and configure MySQL on macOS

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinymceai-on-premises-database.adoc

Commands to install MySQL via Homebrew, start the service, run the secure installation, and create the 'ai_service' database and user with the required privileges.

```bash
brew install mysql
brew services start mysql
mysql_secure_installation
mysql -u root -p <<'SQL'
CREATE DATABASE ai_service;
CREATE USER 'ai_service'@'%' IDENTIFIED BY '<strong-password>';
GRANT SELECT, INSERT, UPDATE, DELETE, ALTER, CREATE, DROP,
      INDEX, TRIGGER, LOCK TABLES, REFERENCES
  ON ai_service.* TO 'ai_service'@'%';
FLUSH PRIVILEGES;
SQL
```

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

### Install and configure PostgreSQL on macOS

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinymceai-on-premises-database.adoc

Commands to install PostgreSQL 16 via Homebrew, start the service, create the 'ai_service' user and database, and create the 'cs-on-premises' schema.

```bash
brew install postgresql@16
brew services start postgresql@16
createuser -P ai_service
createdb -O ai_service ai_service
psql -d ai_service -c 'CREATE SCHEMA "cs-on-premises" AUTHORIZATION ai_service;'
```

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

### Quick start with demo identity service

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinymceai-jwt-authentication-intro.adoc

Quick start for the demo identity service. Replace `{apiKey}` with the trial API key from the Customer Portal. In production, scope the user session to the page, not a specific TinyMCE instance; this example places it in the `tinymceai_token_provider` option for ease of use, which may cause unexpected behavior if there are multiple TinyMCE instances on the page.

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

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

### Create the project folder

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinymceai-on-premises-getting-started.adoc

Create and enter the project directory for the on-premises setup.

```bash
mkdir tinymceai-onpremise && cd tinymceai-onpremise
```

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

### Node.js token endpoint setup

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinymceai-on-premises-jwt.adoc

Starts the Node.js token endpoint example. Reads `AI_ENV_ID` and `AI_API_SECRET` from environment variables and sets up Express.

```javascript
const express = require('express');
const jwt = require('jsonwebtoken');

const app = express();
const ENV_ID = process.env.AI_ENV_ID;
const API_SECRET = process.env.AI_API_SECRET;
```

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

### Streaming response with InvokeModelWithResponseStreamCommand

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/ai-bedrock.adoc

Starts the streaming response integration with Amazon Bedrock using the InvokeModelWithResponseStream command. The snippet is incomplete in the source; it only shows the import and credential setup, and the rest of the example is not displayed.

```javascript
import { BedrockRuntimeClient, InvokeModelWithResponseStreamCommand } from "@aws-sdk/client-bedrock-runtime";

// Providing access credentials within the integration is not recommended for production use.
// It is recommended to set up a proxy server to authenticate requests and provide access.
const AWS_ACCESS_KEY_ID = "<YOUR_ACCESS_KEY_ID>";
const AWS_SECRET_ACCESS_KEY = "<YOUR_SECRET_ACCESS_KEY>";
const AWS_SESSION_TOKEN = "<YOUR_SESSION_TOKEN>";
```

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

### Start the development server with bun oxide-start

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/creating-a-skin.adoc

Start the development server to preview changes. If the server is already running, restart it with Ctrl+C and run the command again.

```sh
bun oxide-start
```

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

### Install script-loader package

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/partials/integrations/react-quick-start.adoc

Installs the script-loader package required for the bundle setup.

```sh
npm install script-loader
```

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

### Start the demo server with npm

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinymceai-on-premises-getting-started.adoc

Starts the Node.js server for the TinyMCE AI demo.

```bash
npm start
```

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

### getContent() method signature and examples

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/apis/tinymce.editor.adoc

Gets the content from the editor instance, cleaning it before returning. The examples show how to get HTML content, plain text, and content from a specific editor.

```javascript
getContent(args: Object): String
```

```javascript
// Get the HTML contents of the currently active editor
console.debug(tinymce.activeEditor.getContent());

// Get the contents of the currently active editor as plain text
tinymce.activeEditor.getContent({ format: 'text' });

// Get content of a specific editor:
tinymce.get('content id').getContent()
```

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

### Initialize editor with setup and init_instance_callback

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/events.adoc

Shows two equivalent ways to run code after the editor is initialized: using the setup option with an init event listener, or using the init_instance_callback option. The init_instance_callback is functionally equivalent to binding to the init event in setup.

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

```js
tinymce.init({
  selector: 'textarea',
  init_instance_callback: (editor) => {
    console.log('Editor is initialized.');
  }
});
```

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

### createRng() example

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/apis/tinymce.dom.domutils.adoc

Example usage of createRng() to create a range and alert its start container and offset.

```javascript
const rng = tinymce.DOM.createRng();
alert(rng.startContainer + "," + rng.startOffset);
```

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

### Install Redis on macOS with Homebrew

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinymceai-on-premises-database.adoc

Commands to install and start Redis as a service on macOS using Homebrew.

```bash
brew install redis
brew services start redis
```

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

### Build and serve the documentation locally

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/README.md

Builds the documentation and starts the development server with hot-reloading. The site is available at http://127.0.0.1:4000.

```bash
yarn build
yarn start-dev
```

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

### get() examples

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/apis/tinymce.root.adoc

Examples of using tinymce.get and tinymce.EditorManager.get to attach an onclick event to an editor by id or index.

```javascript
// Adds an onclick event to an editor by id
tinymce.get('mytextbox').on('click', (e) => {
  ed.windowManager.alert('Hello world!');
});

// Adds an onclick event to an editor by index
tinymce.get(0).on('click', (e) => {
  ed.windowManager.alert('Hello world!');
});

// Adds an onclick event to an editor by id (longer version)
tinymce.EditorManager.get('mytextbox').on('click', (e) => {
  ed.windowManager.alert('Hello world!');
});
```

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

### init() examples

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/apis/tinymce.root.adoc

Examples of initializing editors using tinymce.EditorManager.init and tinymce.init with a promise.

```javascript
// Initializes a editor using the longer method
tinymce.EditorManager.init({
   some_settings : 'some value'
});

// Initializes a editor instance using the shorter version and with a promise
tinymce.init({
  some_settings : 'some value'
}).then((editors) => {
  ...
});
```

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

### Basic setup using Tiny Cloud

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/editimage.adoc

Basic setup for Tiny Cloud. Add 'image' to the toolbar and 'image editimage' to the plugins list.

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

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

### resolve() example

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/apis/tinymce.util.tools.adoc

Example usage of the resolve function. It resolves a dot-separated path into an object reference, starting from the window object by default.

```javascript
// Resolve a path into an object reference
const obj = tinymce.resolve('a.b.c.d');
```

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

### Basic setup for the Help plugin

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/help.adoc

Basic setup for the Help plugin. Add 'help' to the plugins list and 'help' to the toolbar to enable the help button.

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

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

### Expected startup logs for spelling service

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/partials/docker/spelling-service/spelling-service-installation.adoc

Example logs showing successful startup, including reading allowed origins, loading dictionaries, and binding to port 18080. The logs confirm that the configuration and dictionary paths are correct.

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

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

### tinymce.Editor Examples

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/apis/tinymce.editor.adoc

Examples of using the tinymce.Editor class to interact with the active editor, get selection content, and create a new editor instance.

```APIDOC
## tinymce.Editor

### Description
This class contains the core logic for a TinyMCE editor.

### Examples

```javascript
// Add a class to all paragraphs in the editor.
tinymce.activeEditor.dom.addClass(tinymce.activeEditor.dom.select('p'), 'someclass');

// Gets the current editors selection as text
tinymce.activeEditor.selection.getContent({ format: 'text' });

// Creates a new editor instance
const ed = new tinymce.Editor('textareaid', {
  some_setting: 1
}, tinymce.EditorManager);

ed.render();
```

### Properties

- **baseURI** (URI) - URI object to current document that holds the TinyMCE editor instance.
- **contentCSS** (Array) - Array with CSS files to load into the iframe.
- **contentStyles** (Array) - Array of CSS styles to add to head of document when the editor loads.
- **documentBaseURI** (URI) - URI object to document configured for the TinyMCE instance.
- **dom** (DOMUtils) - DOM instance for the editor.
- **editorUid** (String) - A uuid string to uniquely identify an editor across any page.
- **editorUpload** (EditorUpload) - Editor upload API
- **formatter** (Formatter) - Formatter instance.
- **id** (String) - Editor instance id, normally the same as the div/textarea that was replaced.
- **initialized** (Boolean) - Is set to true after the editor instance has been initialized
- **mode** (EditorMode) - Editor mode API
- **notificationManager** (NotificationManager) - Notification manager reference, use this to open new windows and dialogs.
- **options** (EditorOptions) - Editor options API
- **parser** (DomParser) - HTML parser will be used when contents is inserted into the editor.
- **plugins** (Object) - Name/Value object containing plugin instances.
- **schema** (Schema) - Schema instance, enables you to validate elements and its children.
- **selection** (Selection) - Selection instance for the editor.
- **serializer** (Serializer) - DOM serializer for the editor. Will be used when contents is extracted from the editor.
- **theme** (Theme) - Reference to the theme instance that was used to generate the UI.
- **ui** (Ui) - Editor ui components
- **undoManager** (UndoManager) - Undo manager instance, responsible for handling undo levels.
- **userLookup** (UserLookup) - Editor user lookup API
- **windowManager** (WindowManager) - Window manager reference, use this to open new windows and dialogs.
```

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

### Basic setup using Tiny Cloud

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/linkchecker.adoc

Basic setup for Tiny Cloud users. Add the 'linkchecker' plugin to the plugins list; the service is automatically configured.

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

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

### Example: Using the 7-testing Release Channel

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/editor-plugin-version.adoc

Loads the current release candidate from the 7-testing channel. Replace 'no-api-key' with your own API key.

```html
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/{productmajorversion}-testing/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
```

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

### Start the .NET development server

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/partials/integrations/blazor-quick-start.adoc

Run this command in the project's root directory to start the development server. The server will be accessible at http://localhost:{PORT}, where {PORT} is specified in the project's Properties/launchSettings.json file.

```sh
dotnet watch run
```

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

### getStart(real: Boolean): Element

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/apis/tinymce.dom.selection.adoc

Returns the start element of a selection range. If the start is in a text node, the parent element is returned. The real parameter gets the real parent when collapsed.

```javascript
getStart(real: Boolean): Element
```

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

### Using the setup option to add a click event

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/partials/configuration/setup.adoc

Use the setup option to register an editor event before the editor is rendered. The callback receives the editor instance, and here a click event logs a message to the console.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  setup: (editor) => {
    editor.on('click', () => {
      console.log('Editor was clicked');
    });
  }
});
```

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

### Old documentBaseUrl usage

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/migration-from-7x.adoc

Example of the old, removed way to get the document base URL.

```javascript
const baseUrl = editor.documentBaseUrl;
```

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

### Basic setup with plugins and toolbar options

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/a11ychecker.adoc

Adds the a11ychecker plugin to the editor and includes the a11ycheck toolbar button.

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck'
});
```

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

### Example: Using tinymce.activeEditor.userLookup

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/apis/tinymce.userlookup.adoc

Shows how to get the current user's ID and fetch user information by IDs using the UserLookup API. The example demonstrates accessing individual promises and waiting for all promises with Promise.all.

```javascript
// Get the current user's ID from the editor options, or defaults to 'Anonymous'.
tinymce.activeEditor.userLookup.userId;

// Fetch user information by IDs which returns a record of promises
const userPromises = tinymce.activeEditor.userLookup.fetchUsers(['user-1', 'user-2']);

// Access individual promises by user ID
userPromises['user-1'].then(user => console.log('User 1:', user));
userPromises['user-2'].then(user => console.log('User 2:', user));

// Or wait for all promises
Promise.all(Object.values(userPromises)).then((users) => {
  users.forEach(user => console.log('User found:', user));
}).catch((error) => {
  console.error('Error fetching users:', error);
});
```

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

### Basic Media plugin setup

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/media.adoc

Basic setup for the Media plugin. Initializes TinyMCE with the media plugin and adds the media toolbar button.

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

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

### New documentBaseURI usage

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/migration-from-7x.adoc

Example of the new way to get the document base URL using the documented documentBaseURI property.

```javascript
const baseUrl = tinymce.activeEditor.editorManager.documentBaseURI.getURI();
```

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

### Basic self-hosted setup

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/editimage.adoc

Basic self-hosted setup. Add 'image' to the toolbar and 'image editimage' to the plugins list, and enable editimage_cors_hosts and editimage_proxy_service_url options as required.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_cors_hosts: [ 'example.com', 'example.net' ],
  editimage_proxy_service_url: 'http://example.com/ephox-image-proxy/'
});
```

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

### Build the project with bun run build

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/creating-a-skin.adoc

Rebuild the project to recognize the newly created content skin.

```sh
bun run build
```

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

### Example: Using tinymce.html.Writer

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/apis/tinymce.html.writer.adoc

Creates a writer with indentation enabled, writes a start and end element, and logs the serialized content to the console.

```javascript
const writer = tinymce.html.Writer({ indent: true });
writer.start('node', { attr: 'value' });
writer.end('node');
console.log(writer.getContent());
```

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

### Install and configure PostgreSQL on Debian/Ubuntu

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/tinymceai-on-premises-database.adoc

Commands to install PostgreSQL and contrib packages, enable the service, create the 'ai_service' user and database, and create the 'cs-on-premises' schema.

```bash
sudo apt update
sudo apt install -y postgresql postgresql-contrib
sudo systemctl enable --now postgresql
sudo -u postgres psql <<'SQL'
CREATE USER ai_service WITH PASSWORD '<strong-password>';
CREATE DATABASE ai_service OWNER ai_service;
SQL
sudo -u postgres psql -d ai_service \
  -c 'CREATE SCHEMA "cs-on-premises" AUTHORIZATION ai_service;'
```

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

### Dialog footer button configuration example

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/dialog-footer-buttons.adoc

Example configuration object for a dialog footer button, showing the available properties such as type, name, text, icon, enabled, buttonType, align, and context. The button is a primary submit button aligned to the start, enabled in design mode.

```js
{
  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
}
```

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

### Package-manager jQuery integration setup

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/partials/integrations/jquery-quick-start.adoc

For package-manager installations, this workflow installs jQuery, TinyMCE, the jQuery integration, and fs-extra, then sets up a postinstall script to copy packages into a public directory. It includes the HTML source scripts, an initialization textarea, and the jQuery init script with a license_key setting.

```shell
npm install --save jquery tinymce @tinymce/tinymce-jquery fs-extra
```

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

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

```shell
npm run postinstall
```

```html
<script src="/public/jquery/jquery.min.js"></script>
<script src="/public/tinymce/tinymce.min.js"></script>
<script src="/public/tinymce-jquery/tinymce-jquery.min.js"></script>
```

```html
<div>
  <textarea id="tiny">&lt;p&gt;Encoded HTML content&lt;/p&gt;</textarea>
</div>
```

```html
<script>
  $('textarea#tiny').tinymce({
    height: 500,
    license_key: 'gpl'
    /* other settings... */,
  });
</script>
```

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

### Build the application for production

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/pages/svelte-pm-bundle.adoc

Create an optimized production bundle in the dist directory.

```sh
npm run build
```

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

### Example: using sidebar_min_width

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/partials/configuration/sidebar_min_width.adoc

Initializes TinyMCE with a resizable sidebar and sets sidebar_min_width to 400. The sidebar is registered with resizable: true, and the example includes a setup function that adds the sidebar with a tooltip, icon, and onShow handler. Note that the editable area cannot shrink below 280 pixels, which takes precedence over this option.

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

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

### Initialize project and install firebase/php-jwt with Composer

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/partials/auth/tinymceai/php/initial-project-setup.adoc

Create and enter the project directory, then initialize Composer and install the firebase/php-jwt package. This sets up the PHP environment for JWT authentication.

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

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

### Expected Log Output from Spelling Service

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/partials/docker/spelling-service/spelling-service-installation.adoc

Example log output when the service starts successfully. Note the warning about 'allowed-origins' not being configured, which is expected and will be set up in the next step.

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

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

### Example configuration for tinymceai_reviews

Source: https://github.com/tinymce/tinymce-docs/blob/tinymce/8/modules/ROOT/partials/configuration/tinymceai_options.adoc

Example TinyMCE init configuration that sets the tinymceai_reviews option to a subset of built-in reviews and includes the required tinymceai_token_provider for authentication.

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_reviews: [
    'ai-reviews-proofread',
    'ai-reviews-improve-clarity',
    'ai-reviews-change-tone'
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});
```
Tokens:
Raw