From 6279be02fd5abf2543b790aef21e33ce27a27275 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 28 Oct 2025 17:45:40 +1000 Subject: [PATCH 01/12] DOC-3313: Improve Developer Onboarding and fix broken partials for bundling pages. --- .../live-demos/default-editor/example.html | 3 +- .../live-demos/default-editor/index.html | 20 +- .../live-demos/default-editor/index.js | 11 +- modules/ROOT/nav.adoc | 35 +- modules/ROOT/pages/installation-cloud.adoc | 133 +++++ .../ROOT/pages/installation-self-hosted.adoc | 202 +++++++ modules/ROOT/pages/installation-zip.adoc | 138 +++++ modules/ROOT/pages/installation.adoc | 235 ++++---- modules/ROOT/pages/vite-es6-npm.adoc | 6 +- .../ROOT/partials/css/installation-cards.css | 354 ++++++++++++ modules/ROOT/partials/css/what-is-tinymce.css | 506 ++++++++++++++++++ ...ndling-vite-es6-npm_vite-dependencies.adoc | 20 + .../webpack-dev-dependencies.adoc | 19 +- modules/ROOT/partials/what-is-tinymce.adoc | 149 +++++- 14 files changed, 1651 insertions(+), 180 deletions(-) create mode 100644 modules/ROOT/pages/installation-cloud.adoc create mode 100644 modules/ROOT/pages/installation-self-hosted.adoc create mode 100644 modules/ROOT/pages/installation-zip.adoc create mode 100644 modules/ROOT/partials/css/installation-cards.css create mode 100644 modules/ROOT/partials/css/what-is-tinymce.css create mode 100644 modules/ROOT/partials/module-loading/bundling-vite-es6-npm_vite-dependencies.adoc diff --git a/modules/ROOT/examples/live-demos/default-editor/example.html b/modules/ROOT/examples/live-demos/default-editor/example.html index 7b19da7b08..e1c0390561 100644 --- a/modules/ROOT/examples/live-demos/default-editor/example.html +++ b/modules/ROOT/examples/live-demos/default-editor/example.html @@ -3,5 +3,6 @@ when you click submit. --> \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/default-editor/index.html b/modules/ROOT/examples/live-demos/default-editor/index.html index 352438d67d..97e6985bc3 100644 --- a/modules/ROOT/examples/live-demos/default-editor/index.html +++ b/modules/ROOT/examples/live-demos/default-editor/index.html @@ -14,26 +14,34 @@ } .live_demo { background-color: #335dff; - color: #fafafa; + color: #fafafa !important; cursor: pointer; font-size: 1em; + font-weight: 600; line-height: 1.15; margin: 0; - padding: .5rem; - border-radius: 6px; + padding: 0.625rem 1.5rem; + border-radius: 8px; + border: none; + transition: all 0.3s ease; + box-shadow: 0 2px 8px rgba(51, 93, 255, 0.2); } .live_demo:hover { - background-color: #2a4fd8; + background-color: #f5f5f5 !important; + color: #0c132c !important; + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(51, 93, 255, 0.3); }
-
Click the "View HTML Output" button to see the generated HTML content.
+
Click the "View HTML Output" button to see the generated HTML content. Try editing the text above to see how TinyMCE preserves your formatting and styles!
+ + + + + + +---- + +== Framework integrations + +Get started with {productname} in your preferred framework: + +++++ +include::partial$css/installation-cards.css[] +
+
+ +
+
⚑
+

Quick start

+
+ + + +
+
React
+

React

+
+ + + +
+
Angular
+

Angular

+
+ + + +
+
Vue
+

Vue.js

+
+ + + +
+
Blazor
+

Blazor

+
+ + + +
+
Svelte
+

Svelte

+
+ + + +
+
Web Components
+

Web Component

+
+ + + +
+
jQuery
+

jQuery

+
+ + + +
+
Bootstrap
+

Bootstrap

+
+ + + +
+
Django
+

Django

+
+ + + +
+
Laravel
+

Laravel

+
+ + + +
+
Rails
+

Ruby on Rails

+
+ +
+
+++++ + +== Benefits of the {cloudname} + +Using the {cloudname} provides several advantages: + +* **Zero configuration** - No server setup required +* **Always up-to-date** - Access to the latest {productname} features automatically +* **Global CDN** - Fast loading times worldwide +* **Optimized assets** - Automatically minified and optimized for production +* **Premium features** - Access to premium plugins with cloud API key + +include::partial$misc/admon-account-creation-and-social-option.adoc[] diff --git a/modules/ROOT/pages/installation-self-hosted.adoc b/modules/ROOT/pages/installation-self-hosted.adoc new file mode 100644 index 0000000000..46b49bd5a2 --- /dev/null +++ b/modules/ROOT/pages/installation-self-hosted.adoc @@ -0,0 +1,202 @@ += Installing {productname} using a package manager +:navtitle: Self-hosted +:description: Install {productname} using npm, Yarn, or other package managers for self-hosted deployments. +:keywords: npm, yarn, tinymce install, self-hosted + +== Quick start + +Install {productname} using npm or Yarn: + +[source,sh] +---- +# Using npm +npm install tinymce@^{productmajorversion} + +# Using Yarn +yarn add tinymce@^{productmajorversion} +---- + +Then configure {productname} to use the local installation: + +[source,html] +---- + + + + + + + + + + +---- + +== Framework integrations + +Get started with {productname} in your preferred framework: + +++++ +include::partial$css/installation-cards.css[] +
+
+

Frontend Frameworks

+
+ +
+
React
+

React (Hosting)

+
+ + +
+
React
+

React (Bundling)

+
+ + +
+
Angular
+

Angular

+
+ + +
+
Vue
+

Vue.js

+
+ + +
+
Blazor
+

Blazor

+
+ + +
+
Svelte
+

Svelte

+
+ + +
+
Web Components
+

Web Component

+
+ + +
+
+

Shadow DOM

+
+ + +
+
jQuery
+

jQuery

+
+ +
+
+ +
+

Backend Frameworks

+
+ +
+
Laravel
+

Laravel

+
+ + +
+
Rails
+

Ruby on Rails

+
+ + +
+
Node.js
+

Express.js

+
+ +
+
+ +
+

General Integration

+
+ +
+
Node.js
+

NPM Projects

+
+ + +
+
🐘
+

PHP Projects

+
+ + +
+
πŸ’Ό
+

.NET Projects

+
+ + +
+
πŸ₯ƒ
+

Bower Projects

+
+ + +
+
WordPress
+

WordPress

+
+ + +
+
β˜•
+

Java Swing

+
+ +
+
+
+++++ + +== Package managers + +You can install {productname} using various package managers: + +[cols="1,2"] +|=== +|Package Manager +|Command + +|npm +|`npm install tinymce` + +|Yarn +|`yarn add tinymce` + +|Bower +|`bower install tinymce` + +|Composer (PHP) +|`composer require tinymce/tinymce` + +|NuGet (.NET) +|`Install-Package tinymce` + +|=== + +== npm package + +View the {productname} package on npm: https://www.npmjs.com/package/tinymce[npmjs.com/package/tinymce] diff --git a/modules/ROOT/pages/installation-zip.adoc b/modules/ROOT/pages/installation-zip.adoc new file mode 100644 index 0000000000..f9bb70fc06 --- /dev/null +++ b/modules/ROOT/pages/installation-zip.adoc @@ -0,0 +1,138 @@ += Installing {productname} using a .zip file +:navtitle: ZIP +:description: Download and install {productname} from a .zip archive for traditional web deployments. +:keywords: zip download, tinymce zip, archive install +:productSource: zip + +== Quick start + +Download the {productname} .zip package from the link:{download-community}[official download page]. + +Extract the archive and include the TinyMCE script: + +[source,html] +---- + + + + + + + + + + +---- + +== Framework integrations + +Get started with {productname} in your preferred framework: + +++++ +include::partial$css/installation-cards.css[] +
+
+

Frontend Frameworks

+
+ +
+
React
+

React (Hosting)

+
+ + +
+
React
+

React (Bundling)

+
+ + +
+
Angular
+

Angular

+
+ + +
+
Vue
+

Vue.js

+
+ + +
+
Blazor
+

Blazor

+
+ + +
+
Svelte
+

Svelte

+
+ + +
+
Web Components
+

Web Component

+
+ +
+
+ +
+

Backend Frameworks

+
+ +
+
Bootstrap
+

Bootstrap

+
+ + +
+
Django
+

Django

+
+ + +
+
Laravel
+

Laravel

+
+ + +
+
Rails
+

Ruby on Rails

+
+ + +
+
πŸ“¦
+

General ZIP Install

+
+ + +
+
β˜•
+

Java Swing

+
+ +
+
+
+++++ + +== Installation steps + +1. Download the {productname} .zip package +2. Extract the archive to your project directory +3. Copy the `+tinymce+` folder to your web-accessible location +4. Include the TinyMCE script in your HTML: `++` +5. Initialize {productname} on a textarea or div element + +include::partial$install/basic-quickstart-base.adoc[] \ No newline at end of file diff --git a/modules/ROOT/pages/installation.adoc b/modules/ROOT/pages/installation.adoc index 41e54c8271..c4f64b9a24 100644 --- a/modules/ROOT/pages/installation.adoc +++ b/modules/ROOT/pages/installation.adoc @@ -3,128 +3,113 @@ :description: Learn how to install {productname} via {cloudname}, package managers, self-hosted zips for various integration options. :page-aliases: integrations.adoc -There are multiple ways to install {productname}. This section lists the various installation and integration options for installing {productname} using the {cloudname}, package managers or self-hosted downloads. - -[cols="1,1"] -|=== - -a| -[.lead] -Quick start - -* xref:cloud-quick-start.adoc[Using the {cloudname}] -* xref:npm-projects.adoc[NPM projects] -* xref:php-projects.adoc[PHP projects] -* xref:dotnet-projects.adoc[.NET projects] -* xref:bower-projects.adoc[Bower projects] -* xref:zip-install.adoc[{productname} .zip deployments] - -a| -[.lead] -React - -* xref:react-cloud.adoc[Using the {cloudname}] -* xref:react-pm-host.adoc[Using a package manager with hosting] -* xref:react-pm-bundle.adoc[Using a package manager with bundling] -* xref:react-zip-host.adoc[{productname} .zip deployments with hosting] -* xref:react-zip-bundle.adoc[{productname} .zip deployments with bundling] - -a| -[.lead] -Angular - -* xref:angular-cloud.adoc[Using the {cloudname}] -* xref:angular-pm.adoc[Using a package manager] -* xref:angular-zip.adoc[{productname} .zip deployments] - -a| -[.lead] -Vue.js - -* xref:vue-cloud.adoc[Using the {cloudname}] -* xref:vue-pm.adoc[Using a package manager] -* xref:vue-zip.adoc[{productname} .zip deployments] - -a| -[.lead] -Blazor - -* xref:blazor-cloud.adoc[Using the {cloudname}] -* xref:blazor-pm.adoc[Using a package manager] -* xref:blazor-zip.adoc[{productname} .zip deployments] - -a| -[.lead] -Svelte - -* xref:svelte-cloud.adoc[Using the {cloudname}] -* xref:svelte-pm.adoc[Using a package manager] -* xref:svelte-zip.adoc[{productname} .zip deployments] - -a| -[.lead] -Web Component - -* xref:webcomponent-cloud.adoc[Using the {cloudname}] -* xref:webcomponent-pm.adoc[Using a package manager] -* xref:webcomponent-zip.adoc[{productname} .zip deployments] - -a| -[.lead] -Java Swing - -* xref:swing.adoc[{productname} .zip deployments] - -a| -[.lead] -jQuery - -* xref:jquery-cloud.adoc[Using the {cloudname}] -* xref:jquery-pm.adoc[Using a package manager] - -a| -[.lead] -Bootstrap - -* xref:bootstrap-cloud.adoc[Using the {cloudname}] -* xref:bootstrap-zip.adoc[{productname} .zip deployments] - -a| -[.lead] -Django - -* xref:django-cloud.adoc[Using the {cloudname}] -* xref:django-zip.adoc[{productname} .zip deployments] - -a| -[.lead] -Node.js + Express - -* xref:expressjs-pm.adoc[Using a package manager] - -a| -[.lead] -Laravel - -* xref:laravel-tiny-cloud.adoc[Using the {cloudname}] -* xref:laravel-composer-install.adoc[Using a package manager] -* xref:laravel-zip-install.adoc[{productname} .zip deployments] - -a| -[.lead] -Ruby on Rails - -* xref:rails-cloud.adoc[Using the {cloudname}] -* xref:rails-third-party.adoc[Using a package manager] -* xref:rails-zip.adoc[{productname} .zip deployments] - - -a| -[.lead] -Wordpress - -* xref:wordpress.adoc[Wordpress plugin] - -a| - -|=== \ No newline at end of file +There are multiple ways to install {productname}. Choose your installation method below: + +++++ +include::partial$css/installation-cards.css[] +
+
+ +
+
+
☁️
+
+

Cloud CDN

+

Load from the Tiny Cloud CDN for automatic updates to the latest version with zero maintenance overhead.

+
+ Recommended +
+
+ + + +
+
+
πŸ“¦
+
+

Package Manager

+

Install locally using npm, composer, or yarn for self-hosted solutions with complete control.

+
+ Self-hosted +
+
+ + + +
+
+
⬇️
+
+

Direct Download

+

Extract from .zip files for maximum control, offline deployments, and air-gapped environments.

+
+ Enterprise +
+
+ +
+ +

Browse by Framework

+ +
+
+ +
+
React
+

React

+
+ + +
+
Angular
+

Angular

+
+ + +
+
Vue
+

Vue.js

+
+ + +
+
Blazor
+

Blazor

+
+ + +
+
Svelte
+

Svelte

+
+ + +
+
Web Components
+

Web Component

+
+ + +
+
jQuery
+

jQuery

+
+ + +
+
Laravel
+

Laravel

+
+ + +
+
Rails
+

Ruby on Rails

+
+ +
+
+
+ +include::partial$css/installation-cards.css[] +++++ diff --git a/modules/ROOT/pages/vite-es6-npm.adoc b/modules/ROOT/pages/vite-es6-npm.adoc index eb2cf0f801..72e744390d 100644 --- a/modules/ROOT/pages/vite-es6-npm.adoc +++ b/modules/ROOT/pages/vite-es6-npm.adoc @@ -29,9 +29,9 @@ When self-hosting TinyMCE 8: == Procedures -:is_zip_install: vite -// use new vite dev-dependencies -include::partial$module-loading/webpack-dev-dependencies.adoc[] +:is_zip_install: false + +include::partial$module-loading/bundling-vite-es6-npm_vite-dependencies.adoc[] include::partial$module-loading/bundling-vite-es6-npm_editor.adoc[] diff --git a/modules/ROOT/partials/css/installation-cards.css b/modules/ROOT/partials/css/installation-cards.css new file mode 100644 index 0000000000..20898739a1 --- /dev/null +++ b/modules/ROOT/partials/css/installation-cards.css @@ -0,0 +1,354 @@ + + diff --git a/modules/ROOT/partials/css/what-is-tinymce.css b/modules/ROOT/partials/css/what-is-tinymce.css new file mode 100644 index 0000000000..6c2d95dc83 --- /dev/null +++ b/modules/ROOT/partials/css/what-is-tinymce.css @@ -0,0 +1,506 @@ + + diff --git a/modules/ROOT/partials/module-loading/bundling-vite-es6-npm_vite-dependencies.adoc b/modules/ROOT/partials/module-loading/bundling-vite-es6-npm_vite-dependencies.adoc new file mode 100644 index 0000000000..1000340cad --- /dev/null +++ b/modules/ROOT/partials/module-loading/bundling-vite-es6-npm_vite-dependencies.adoc @@ -0,0 +1,20 @@ +ifeval::[{is_zip_install} == false] +. Create scaffolding for your project. ++ +[source,sh] +---- +npm create vite@5 . && npm install tinymce +---- ++ +. Or add `+tinymce+` and the following development dependencies to your existing project. +* https://vitejs.dev[`+Vite+`] ++ +For example: ++ +[source,sh] +---- +npm install tinymce && npm install --save-dev vite +---- + +endif::[] + diff --git a/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc b/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc index 236f1c7972..920eb5bebf 100644 --- a/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc +++ b/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc @@ -19,7 +19,7 @@ npm install --save-dev \ ---- endif::[] -ifeval::[{is_zip_install} != true && != vite] +ifeval::[{is_zip_install} != true] . Add `+tinymce+` and the following development dependencies to the project. * https://www.npmjs.com/package/webpack[`+webpack+`] * https://www.npmjs.com/package/webpack-cli[`+webpack-cli+`] @@ -41,20 +41,3 @@ npm install --save-dev \ ---- endif::[] -ifeval::[{is_zip_install} == vite] -. Create scaffolding for your project. -+ -[source,sh] ----- -npm create vite@5 . && npm install tinymce ----- -+ -. Or add `+tinymce+` and the following development dependencies to your existing project. -* https://vitejs.dev[`+Vite+`] -+ -For example: -+ -[source,sh] ----- -npm install tinymce && npm install --save-dev vite ----- diff --git a/modules/ROOT/partials/what-is-tinymce.adoc b/modules/ROOT/partials/what-is-tinymce.adoc index 16210c748f..d523f2e474 100644 --- a/modules/ROOT/partials/what-is-tinymce.adoc +++ b/modules/ROOT/partials/what-is-tinymce.adoc @@ -1,22 +1,153 @@ -{productname} is a rich-text editor that allows users to create formatted content within a user-friendly interface. +++++ +include::partial$css/what-is-tinymce.css[] -include::partial$misc/admon-account-creation-and-social-option.adoc[] +
+
Trusted by millions of developers worldwide
+

The rich text editor that powers exceptional content experiences

+

Start with a robust open-source editor and scale with enterprise-grade features, AI capabilities, suggested edits, document conversion capabilities, and more.

+ +
+
+
9M+
+
Weekly npm downloads
+
+
+
60+
+
Total plugins
+
+
+
7
+
Framework integrations
+
+
+
+++++ + +++++ +
+
+

Try TinyMCE Now

+

+++++ liveDemo::default-editor[] +++++ +

+
+++++ + == Overview -{productname} generates HTML5 output and supports various content elements including lists, tables, and other formatting options. The editor's functionality can be extended through plugins and customizations, or restricted to meet specific requirements. The user interface can be customized to integrate seamlessly with applications or webpages. +TinyMCE generates HTML5 output and supports various content elements including lists, tables, and other formatting options. The editor's functionality can be extended through plugins and customizations, or restricted to meet specific requirements. The user interface can be customized to integrate seamlessly with applications or webpages. + +== Why Developers Choose {productname} + +++++ +
+
+
✨
+

Powerful & Flexible

+

Comprehensive rich text editing with 50+ plugins, customizable UI, and extensive API's. Build exactly what you need with plugins and configuration options.

+
+ +
+
🎨
+

Fully Customizable

+

Complete control over UI, functionality, and integrations. Seamless integration with any framework. Customize UI components to match your design.

+
-== Integration Options +
+
πŸ€–
+

AI Assistant

+

Built-in AI assistance, smart suggestions, and content generation. Powered by OpenAI, Azure, Bedrock, and Gemini. Learn more about the AI Assistant plugin.

+
-{productname} integrates with frameworks and Content Management Systems (CMSs) through multiple deployment methods: +
+
πŸ’¬
+

Comments & Mentions

+

Add comments with @mentions, track feedback, and collaborate on content. Notify team members and review comments with ease. Learn more about Tiny Comments.

+
-* **Cloud CDN**: Load from the {cloudname} CDN for automatic updates to the latest version -* **Package Manager**: Install locally using package managers for self-hosted solutions -* **Direct Download**: Extract from .zip files for self-hosted installations +
+
✏️
+

Suggested Edits

+

Collaborate with suggested changes, track revisions, and review edits before accepting or rejecting. Explore Suggested Edits for collaborative workflows.

+
+
+
πŸ“„
+

Export to PDF & Word Document Converters

+

Import from Word, export to Word and export to PDF formats with professional document conversion capabilities. Learn more about Import from Word, Export to Word, and Export to PDF.

+
+
+++++ + +== Deployment Options + +Deploy TinyMCE however you want - from the cloud with zero configuration to self-hosted with full control. + +++++ +include::partial$css/installation-cards.css[] +
+
+
+
☁️
+
+

Cloud CDN

+

Load from the Tiny Cloud CDN for automatic updates to the latest version with zero maintenance overhead.

+
+ Learn More β†’ +
+
+ +
+
+
πŸ“¦
+
+

Package Manager

+

Install locally using npm, composer, or yarn for self-hosted solutions with complete control.

+
+ Learn More β†’ +
+
+ +
+
+
⬇️
+
+

Direct Download

+

Extract from .zip files for maximum control, offline deployments, and air-gapped environments.

+
+ Learn More β†’ +
+
+
+++++ include::partial$misc/admon-getting-started-with-tinymce.adoc[] -include::partial$misc/admon-account-creation-and-social-option.adoc[] \ No newline at end of file +include::partial$misc/admon-account-creation-and-social-option.adoc[] + +++++ +
+
+

Explore pricing options that include a commercial license, cloud hosting, and professional support. All plans come with a 14-day free trial to test everything.

+ View Pricing Plans β†’ +
+
+++++ + +++++ +
+

Ready to get started?

+

Explore TinyMCE's capabilities using the interactive demos throughout this documentation. The editor works seamlessly across all modern browsers and can be integrated with any framework or CMS.

+
+ Get Started β†’ + Developer Center β†’ +
+
+++++ From a96b9b8a450de2dc73be2fa40296447b85382eb0 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 28 Oct 2025 19:22:12 +1000 Subject: [PATCH 02/12] DOC-3313: fix css issue causing text alignment issue. --- modules/ROOT/partials/css/what-is-tinymce.css | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/ROOT/partials/css/what-is-tinymce.css b/modules/ROOT/partials/css/what-is-tinymce.css index 6c2d95dc83..e7cbceab23 100644 --- a/modules/ROOT/partials/css/what-is-tinymce.css +++ b/modules/ROOT/partials/css/what-is-tinymce.css @@ -302,7 +302,6 @@ font-size: 1rem; color: #64748b; margin: 0 0 1.5rem 0; - max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.6; From 6848650171edf7fef47ec9315f3aa74b1928b3b0 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 28 Oct 2025 19:38:06 +1000 Subject: [PATCH 03/12] DOC-3313: update demo config. --- .../examples/live-demos/default-editor/example.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/modules/ROOT/examples/live-demos/default-editor/example.js b/modules/ROOT/examples/live-demos/default-editor/example.js index 304a4e1ff7..e92bf1efc8 100644 --- a/modules/ROOT/examples/live-demos/default-editor/example.js +++ b/modules/ROOT/examples/live-demos/default-editor/example.js @@ -1,9 +1,12 @@ tinymce.init({ selector: 'textarea#default-editor', plugins: [ - "advlist", "anchor", "autolink", "charmap", "code", "fullscreen", - "help", "image", "insertdatetime", "link", "lists", "media", - "preview", "searchreplace", "table", "visualblocks", + "advlist", "autolink", "charmap", "codesample", "emoticons", "help", + "image", "link", "lists", "searchreplace", "table", "wordcount", + // Premium features + "advcode", "autocorrect", "footnotes", "mediaembed", + "powerpaste", "tinymcespellchecker", "casechange", "checklist", + "formatpainter", "permanentpen", "advtable", "tableofcontents" ], - toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", + toolbar: "spellcheckdialog | styles | bold italic underline strikethrough | align bullist numlist | link image emoticons footnotes checklist formatpainter permanentpen tableofcontents", }); \ No newline at end of file From e59812352aa9234772306c0976a555c0e3dee7ed Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 29 Oct 2025 11:32:58 +1000 Subject: [PATCH 04/12] DOC-3313: Remove various elements, cleanup css and streamline styles to use unified color palette. --- .../live-demos/default-editor/example.js | 4 +- .../live-demos/default-editor/index.js | 4 +- modules/ROOT/pages/installation.adoc | 187 ++++--- modules/ROOT/partials/css/what-is-tinymce.css | 505 ------------------ modules/ROOT/partials/what-is-tinymce.adoc | 111 +--- 5 files changed, 100 insertions(+), 711 deletions(-) delete mode 100644 modules/ROOT/partials/css/what-is-tinymce.css diff --git a/modules/ROOT/examples/live-demos/default-editor/example.js b/modules/ROOT/examples/live-demos/default-editor/example.js index e92bf1efc8..046da8474f 100644 --- a/modules/ROOT/examples/live-demos/default-editor/example.js +++ b/modules/ROOT/examples/live-demos/default-editor/example.js @@ -6,7 +6,7 @@ tinymce.init({ // Premium features "advcode", "autocorrect", "footnotes", "mediaembed", "powerpaste", "tinymcespellchecker", "casechange", "checklist", - "formatpainter", "permanentpen", "advtable", "tableofcontents" + "formatpainter", "permanentpen", "advtable", "tableofcontents", "exportpdf" ], - toolbar: "spellcheckdialog | styles | bold italic underline strikethrough | align bullist numlist | link image emoticons footnotes checklist formatpainter permanentpen tableofcontents", + toolbar: " exportpdf | spellcheckdialog | styles | bold italic underline strikethrough | align bullist numlist | link image emoticons footnotes checklist formatpainter permanentpen tableofcontents", }); \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/default-editor/index.js b/modules/ROOT/examples/live-demos/default-editor/index.js index e92bf1efc8..4e8bde18e8 100644 --- a/modules/ROOT/examples/live-demos/default-editor/index.js +++ b/modules/ROOT/examples/live-demos/default-editor/index.js @@ -6,7 +6,7 @@ tinymce.init({ // Premium features "advcode", "autocorrect", "footnotes", "mediaembed", "powerpaste", "tinymcespellchecker", "casechange", "checklist", - "formatpainter", "permanentpen", "advtable", "tableofcontents" + "formatpainter", "permanentpen", "advtable", "tableofcontents", "exportpdf" ], - toolbar: "spellcheckdialog | styles | bold italic underline strikethrough | align bullist numlist | link image emoticons footnotes checklist formatpainter permanentpen tableofcontents", + toolbar: "exportpdf | spellcheckdialog | styles | bold italic underline strikethrough | align bullist numlist | link image emoticons footnotes checklist formatpainter permanentpen tableofcontents", }); \ No newline at end of file diff --git a/modules/ROOT/pages/installation.adoc b/modules/ROOT/pages/installation.adoc index c4f64b9a24..733dde5da3 100644 --- a/modules/ROOT/pages/installation.adoc +++ b/modules/ROOT/pages/installation.adoc @@ -7,109 +7,102 @@ There are multiple ways to install {productname}. Choose your installation metho ++++ include::partial$css/installation-cards.css[] -
-
- -
-
-
☁️
-
-

Cloud CDN

-

Load from the Tiny Cloud CDN for automatic updates to the latest version with zero maintenance overhead.

-
- Recommended -
-
- - - -
-
-
πŸ“¦
-
-

Package Manager

-

Install locally using npm, composer, or yarn for self-hosted solutions with complete control.

-
- Self-hosted -
-
- - - -
-
-
⬇️
-
-

Direct Download

-

Extract from .zip files for maximum control, offline deployments, and air-gapped environments.

-
- Enterprise -
-
- +
+
+
+
☁️
+
+

Cloud CDN

+

Load from the Tiny Cloud CDN for automatic updates to the latest version with zero maintenance overhead.

+
+ Learn More β†’ +
-

Browse by Framework

+
+
+
πŸ“¦
+
+

Package Manager

+

Install locally using npm, composer, or yarn for self-hosted solutions with complete control.

+
+ Learn More β†’ +
+
-
-
- -
-
React
-

React

-
- - -
-
Angular
-

Angular

-
- - -
-
Vue
-

Vue.js

-
- - -
-
Blazor
-

Blazor

-
- - -
-
Svelte
-

Svelte

-
- - -
-
Web Components
-

Web Component

-
- - -
-
jQuery
-

jQuery

-
- - -
-
Laravel
-

Laravel

-
- - -
-
Rails
-

Ruby on Rails

-
- +
+
+
⬇️
+
+

Direct Download

+

Extract from .zip files for maximum control, offline deployments, and air-gapped environments.

+
+ Learn More β†’
+++++ +++++ include::partial$css/installation-cards.css[] +

Browse by Framework

+ +
+
+ +
+
React
+

React

+
+ + +
+
Angular
+

Angular

+
+ + +
+
Vue
+

Vue.js

+
+ + +
+
Blazor
+

Blazor

+
+ + +
+
Svelte
+

Svelte

+
+ + +
+
Web Components
+

Web Component

+
+ + +
+
jQuery
+

jQuery

+
+ + +
+
Laravel
+

Laravel

+
+ + +
+
Rails
+

Ruby on Rails

+
+ +
+
++++ diff --git a/modules/ROOT/partials/css/what-is-tinymce.css b/modules/ROOT/partials/css/what-is-tinymce.css deleted file mode 100644 index e7cbceab23..0000000000 --- a/modules/ROOT/partials/css/what-is-tinymce.css +++ /dev/null @@ -1,505 +0,0 @@ - - diff --git a/modules/ROOT/partials/what-is-tinymce.adoc b/modules/ROOT/partials/what-is-tinymce.adoc index d523f2e474..b019f2eb2d 100644 --- a/modules/ROOT/partials/what-is-tinymce.adoc +++ b/modules/ROOT/partials/what-is-tinymce.adoc @@ -1,94 +1,15 @@ -++++ -include::partial$css/what-is-tinymce.css[] +{productname} is a rich-text editor that allows users to create formatted content within a user-friendly interface. -
-
Trusted by millions of developers worldwide
-

The rich text editor that powers exceptional content experiences

-

Start with a robust open-source editor and scale with enterprise-grade features, AI capabilities, suggested edits, document conversion capabilities, and more.

- -
-
-
9M+
-
Weekly npm downloads
-
-
-
60+
-
Total plugins
-
-
-
7
-
Framework integrations
-
-
-
-++++ - -++++ -
-
-

Try TinyMCE Now

-

-++++ liveDemo::default-editor[] -++++ -

-
-++++ - == Overview -TinyMCE generates HTML5 output and supports various content elements including lists, tables, and other formatting options. The editor's functionality can be extended through plugins and customizations, or restricted to meet specific requirements. The user interface can be customized to integrate seamlessly with applications or webpages. - -== Why Developers Choose {productname} - -++++ -
-
-
✨
-

Powerful & Flexible

-

Comprehensive rich text editing with 50+ plugins, customizable UI, and extensive API's. Build exactly what you need with plugins and configuration options.

-
- -
-
🎨
-

Fully Customizable

-

Complete control over UI, functionality, and integrations. Seamless integration with any framework. Customize UI components to match your design.

-
- -
-
πŸ€–
-

AI Assistant

-

Built-in AI assistance, smart suggestions, and content generation. Powered by OpenAI, Azure, Bedrock, and Gemini. Learn more about the AI Assistant plugin.

-
- -
-
πŸ’¬
-

Comments & Mentions

-

Add comments with @mentions, track feedback, and collaborate on content. Notify team members and review comments with ease. Learn more about Tiny Comments.

-
- -
-
✏️
-

Suggested Edits

-

Collaborate with suggested changes, track revisions, and review edits before accepting or rejecting. Explore Suggested Edits for collaborative workflows.

-
- -
-
πŸ“„
-

Export to PDF & Word Document Converters

-

Import from Word, export to Word and export to PDF formats with professional document conversion capabilities. Learn more about Import from Word, Export to Word, and Export to PDF.

-
-
-++++ +{productname} generates HTML5 output and supports various content elements including lists, tables, and other formatting options. The editor's functionality can be extended through plugins and customizations, or restricted to meet specific requirements. The user interface can be customized to integrate seamlessly with applications or webpages. -== Deployment Options +== Integration Options -Deploy TinyMCE however you want - from the cloud with zero configuration to self-hosted with full control. +Deploy {productname} however you want - from the cloud with zero configuration to self-hosted with full control. ++++ include::partial$css/installation-cards.css[] @@ -105,7 +26,7 @@ include::partial$css/installation-cards.css[]
-
+
πŸ“¦

Package Manager

@@ -116,7 +37,7 @@ include::partial$css/installation-cards.css[]
-
+
⬇️

Direct Download

@@ -131,23 +52,3 @@ include::partial$css/installation-cards.css[] include::partial$misc/admon-getting-started-with-tinymce.adoc[] include::partial$misc/admon-account-creation-and-social-option.adoc[] - -++++ -
-
-

Explore pricing options that include a commercial license, cloud hosting, and professional support. All plans come with a 14-day free trial to test everything.

- View Pricing Plans β†’ -
-
-++++ - -++++ -
-

Ready to get started?

-

Explore TinyMCE's capabilities using the interactive demos throughout this documentation. The editor works seamlessly across all modern browsers and can be integrated with any framework or CMS.

-
- Get Started β†’ - Developer Center β†’ -
-
-++++ From 0ac46a27c9ca27f5e10b1fd20bab72bc60337b8b Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Thu, 30 Oct 2025 14:33:29 +1000 Subject: [PATCH 05/12] DOC-3313: update css varables, refactor content changes and add supported framework icons to landing page. --- modules/ROOT/pages/installation-cloud.adoc | 2 + .../ROOT/pages/installation-self-hosted.adoc | 2 + modules/ROOT/pages/installation-zip.adoc | 2 + modules/ROOT/pages/installation.adoc | 28 ++- .../ROOT/partials/css/installation-cards.css | 233 ++++++++++++------ modules/ROOT/partials/what-is-tinymce.adoc | 59 ++++- 6 files changed, 229 insertions(+), 97 deletions(-) diff --git a/modules/ROOT/pages/installation-cloud.adoc b/modules/ROOT/pages/installation-cloud.adoc index 8224d31f60..bf37a2c0ac 100644 --- a/modules/ROOT/pages/installation-cloud.adoc +++ b/modules/ROOT/pages/installation-cloud.adoc @@ -31,6 +31,7 @@ Get started with {productname} in your preferred framework: ++++ include::partial$css/installation-cards.css[] +
@@ -118,6 +119,7 @@ include::partial$css/installation-cards.css[]
+
++++ == Benefits of the {cloudname} diff --git a/modules/ROOT/pages/installation-self-hosted.adoc b/modules/ROOT/pages/installation-self-hosted.adoc index 46b49bd5a2..ca3a21d9b1 100644 --- a/modules/ROOT/pages/installation-self-hosted.adoc +++ b/modules/ROOT/pages/installation-self-hosted.adoc @@ -42,6 +42,7 @@ Get started with {productname} in your preferred framework: ++++ include::partial$css/installation-cards.css[] +

Frontend Frameworks

@@ -169,6 +170,7 @@ include::partial$css/installation-cards.css[]
+
++++ == Package managers diff --git a/modules/ROOT/pages/installation-zip.adoc b/modules/ROOT/pages/installation-zip.adoc index f9bb70fc06..53c82f7a17 100644 --- a/modules/ROOT/pages/installation-zip.adoc +++ b/modules/ROOT/pages/installation-zip.adoc @@ -34,6 +34,7 @@ Get started with {productname} in your preferred framework: ++++ include::partial$css/installation-cards.css[] +

Frontend Frameworks

@@ -125,6 +126,7 @@ include::partial$css/installation-cards.css[]
+
++++ == Installation steps diff --git a/modules/ROOT/pages/installation.adoc b/modules/ROOT/pages/installation.adoc index 733dde5da3..3f8d71ba1b 100644 --- a/modules/ROOT/pages/installation.adoc +++ b/modules/ROOT/pages/installation.adoc @@ -9,7 +9,7 @@ There are multiple ways to install {productname}. Choose your installation metho include::partial$css/installation-cards.css[]
-
+
☁️

Cloud CDN

@@ -20,7 +20,7 @@ include::partial$css/installation-cards.css[]
-
+
πŸ“¦

Package Manager

@@ -31,7 +31,7 @@ include::partial$css/installation-cards.css[]
-
+
⬇️

Direct Download

@@ -45,64 +45,66 @@ include::partial$css/installation-cards.css[] ++++ include::partial$css/installation-cards.css[] -

Browse by Framework

+

Browse by Framework

+
-
React
+
React

React
-
Angular
+
Angular

Angular
-
Vue
+
Vue

Vue.js
-
Blazor
+
Blazor

Blazor
-
Svelte
+
Svelte

Svelte
-
Web Components
+
Web Components

Web Component
-
jQuery
+
jQuery

jQuery
-
Laravel
+
Laravel

Laravel
-
Rails
+
Rails

Ruby on Rails
+
++++ diff --git a/modules/ROOT/partials/css/installation-cards.css b/modules/ROOT/partials/css/installation-cards.css index 20898739a1..b84992f93b 100644 --- a/modules/ROOT/partials/css/installation-cards.css +++ b/modules/ROOT/partials/css/installation-cards.css @@ -1,12 +1,60 @@ +
-
Click the "View HTML Output" button to see the generated HTML content. Try editing the text above to see how TinyMCE preserves your formatting and styles!
+
Click the "View HTML Output" button to see the generated HTML content.