TinyMCE (tinymce/tinymce-docs)

TinyMCE

https://github.com/tinymce/tinymce-docs
Admin
TinyMCE rich text editor documentation — setup, configuration, plugins, APIs, and integration guides

Tokens:582,557
Snippets:6,482
Trust Score:9.4
Update:1 day ago
Show doc for...
Context Summary (auto-generated)
Raw
# TinyMCE Documentation

TinyMCE Documentation is the official documentation source repository for TinyMCE, a popular open-source rich text editor used by developers to add WYSIWYG editing capabilities to web applications. This repository contains the configuration and build infrastructure for generating the documentation website hosted at https://www.tiny.cloud/docs, built using Antora static site generator with content written in AsciiDoc format.

The documentation covers multiple major versions of TinyMCE (versions 5, 6, 7, and 8), with version 8 being the current latest release. The repository uses a branch-based versioning strategy where each major version's documentation lives in separate Git branches (tinymce/5, tinymce/6, tinymce/7, tinymce/8). The build system fetches content from these remote branches during the Antora build process, generates API reference documentation using MoxieDoc from the TinyMCE source code, and produces a unified documentation site with version switching capabilities.

## Local Development Setup

Set up a local development environment to preview documentation changes before submitting pull requests.

```bash
# Clone the repository
git clone git@github.com:tinymce/tinymce-docs.git
cd tinymce-docs

# Install dependencies using Yarn
yarn

# Build the documentation site (fetches content from remote branches)
yarn build

# Start the local development server with hot-reloading
yarn start-dev

# Access the documentation at http://127.0.0.1:4000
```

## Building with Local TinyMCE Instance

Generate API documentation from a local TinyMCE source directory for testing unreleased features.

```bash
# Build documentation using a local TinyMCE repository
yarn build-local ../path/to/local/tinymce

# This generates API reference content from local source code
# instead of downloading from npm
```

## Antora Playbook Configuration

The `antora-playbook.yml` configures how Antora builds the documentation site, including version branches and content sources.

```yaml
# antora-playbook.yml
site:
  title: TinyMCE Documentation
  url: https://www.tiny.cloud/docs
  start_page: tinymce::index.adoc
content:
  sources:
  - url: https://github.com/tinymce/tinymce-docs.git
    branches: [ tinymce/5, tinymce/6, tinymce/7, tinymce/8 ]
urls:
  html_extension_style: indexify
  latest_version_segment: latest
ui:
  bundle:
    url: https://tiny-cloud-docs-antora-themes-production.s3.amazonaws.com/ui-bundle.zip
    snapshot: true
asciidoc:
  extensions:
    - '@tinymce/antora-extension-livedemos'
runtime:
  fetch: true
```

## Adding Live Demos

Create interactive code demos that render TinyMCE editors directly in the documentation pages.

```asciidoc
// Add a new live demo directory in modules/ROOT/examples/live-demos/my-demo/
// Then reference it in your documentation:

liveDemo::my-demo[]

// Override the TinyMCE script URL for a specific demo:
liveDemo::my-demo[script_url_override='https://cdn.tiny.cloud/1/no-api-key/tinymce/6-dev/tinymce.min.js']
```

## Global TinyMCE URL Override

Modify the TinyMCE URL for all live demos during development by editing the Antora playbook.

```yaml
# antora-playbook-dev.yml
asciidoc:
  attributes:
    tinymce_live_demo_url: https://cdn.tiny.cloud/1/no-api-key/tinymce/6-dev/tinymce.min.js
```

## AsciiDoc Code Snippets

Write properly formatted code examples following the TinyMCE documentation style guide.

```asciidoc
[source, js]
----
tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'codesample',
  toolbar: 'codesample',
});
----
```

## Page Metadata

Add required metadata to documentation pages for navigation and SEO optimization.

```asciidoc
= Page Title
:navtitle: Navigation Title
:description: Detailed description for the page header section.
:keywords: tinymce, editor, configuration, plugins
```

## URL Redirects Configuration

Configure URL redirects in `redirects.json` for maintaining backward compatibility when pages move.

```json
[
  {
    "location": "/docs/plugins/imagetools/",
    "redirect": "/docs/tinymce/latest/editimage/"
  },
  {
    "location": "/docs/tinymce/8/",
    "pattern": "^/docs/tinymce/8/(.*)$",
    "redirect": "/docs/tinymce/latest/%1"
  }
]
```

## GitHub Actions Deployment

The repository includes automated deployment workflows for staging and production environments.

```yaml
# Deploy to staging or production via workflow dispatch
# .github/workflows/deploy_docs_v2.yml
name: Deploy Tiny Docs v2

on:
  workflow_dispatch:
    inputs:
      environment:
        description: 'Deployment Environment'
        required: true
        default: 'staging'
        type: choice
        options:
        - 'staging'
        - 'production'

# The workflow builds using Antora, uploads to S3, and creates redirects
```

## Updating API Documentation

Update the published API reference documentation by modifying the version file and rebuilding.

```bash
# Update the API version file to target a specific TinyMCE release
echo "7.0.0" > .api-version

# Rebuild - this downloads the specified TinyMCE package
# and regenerates API reference content from source
yarn build

# Commit the updated API documentation
git add .
git commit -m "Update API docs to TinyMCE 7.0.0"
```

## LLM Discoverability Files

The build process copies llms.txt files to the site root for AI/LLM agent discoverability.

```bash
# -scripts/copy-llms-files.sh
# Automatically executed during deployment
# Copies llms.txt and llms-full.txt to site root

BUILD_DIR="${1:-build/site}"
find "$BUILD_DIR" -mindepth 2 \( -name "llms.txt" -o -name "llms-full.txt" \) \
    -exec cp {} "$BUILD_DIR/" \;

# Files accessible at:
# https://www.tiny.cloud/docs/llms.txt
# https://www.tiny.cloud/docs/llms-full.txt
```

## Summary

TinyMCE Documentation serves as the comprehensive knowledge base for TinyMCE integration, providing guides for basic setup through advanced plugin development. The primary use cases include getting started guides for new developers, API reference documentation for the `tinymce` JavaScript object, plugin configuration options, framework integrations (React, Vue, Angular, etc.), and premium features documentation. The documentation supports multiple major versions simultaneously, allowing developers to access version-specific information while maintaining a clear upgrade path.

Integration patterns for this documentation repository focus on the Antora static site generator workflow. Contributors clone the repository, make changes to AsciiDoc content in version-specific branches, preview locally using `yarn start-dev`, and submit pull requests. The build system automatically generates API documentation from TinyMCE source code, processes live demo examples, and deploys to AWS S3 with proper redirects for URL backward compatibility. The versioned branch strategy (tinymce/5, tinymce/6, tinymce/7, tinymce/8) enables maintaining documentation for legacy versions while keeping the `latest` alias pointed at the current stable release (TinyMCE 8).