### 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
```
```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
```
--------------------------------
### 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
```
```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 `
`.
### 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: ``.
### 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
```
```
--------------------------------
### 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
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.
If you think you have found a bug please create an issue on the GitHub repo to report it to the developers.
Finally ...
Need file uploads in your app? Consider using Uploadcare with TinyMCE for a fast, modern upload experience.
Thanks for supporting TinyMCE! We hope it helps you and your users create great content. All the best from the TinyMCE team.
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: '' // 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(' Primary button clicked! ');
},
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(' Menu item ' + value + ' clicked! ');
}
});
}
});
```
--------------------------------
### 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
```
--------------------------------
### 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
```
```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
```
```html
```
--------------------------------
### 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
```
--------------------------------
### 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: ''
});
```
--------------------------------
### 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': '/advcode/plugin.min.js',
// 'tinycomments': '/tinycomments/plugin.min.js'
// 'licensekeymanager': '/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
```
