DOC-3313: Improve Developer Onboarding and fix broken partials for bundling pages.

modules/ROOT/examples/live-demos/default-editor/example.html

@@ -3,5 +3,6 @@
   when you click submit.
 -->
 <textarea id="default-editor">
-  <p><em>Hello</em>, <span style="text-decoration: underline;"><strong>World!</strong></span></p>
+  <h1>Welcome to TinyMCE!</h1>
+  <p>⭐️ Let's <em>explore</em> some features 🗺️ like <span style="background-color: #bfedd2;">footnotes</span>, <span style="background-color: #c2e0f4;">spellchecking</span> and <span style="background-color: #fbeeb8;">export to PDF</span>...</p>
 </textarea>

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", "exportpdf"
   ],
-  toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
+  toolbar: " exportpdf | spellcheckdialog | styles | bold italic underline strikethrough | align bullist numlist | link image emoticons footnotes checklist formatpainter permanentpen tableofcontents",
 });

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);
 }
 </style>
 
 <textarea id="default-editor">
-  <p><em>Hello</em>, <span style="text-decoration: underline;"><strong>World!</strong></span></p>
+  <h1>Welcome to TinyMCE!</h1>
+  <p>⭐️ Let's <em>explore</em> some features 🗺️ like <span style="background-color: #bfedd2;">footnotes</span>, <span style="background-color: #c2e0f4;">spellchecking</span> and <span style="background-color: #fbeeb8;">export to PDF</span>...</p>
 </textarea>
 <div id="submitContainer">
   <button id="fake-submit" class="live_demo">View HTML Output</button>
 </div>
-<pre id="output-content" class="contentDumpBox">Click the "View HTML Output" button to see the generated HTML content.</pre>
+<pre id="output-content" class="contentDumpBox">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!</pre>
 <script>
   const btn = document.getElementById('fake-submit');
   btn.addEventListener('click', () => {

modules/ROOT/examples/live-demos/default-editor/index.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", "exportpdf"
   ],
-  toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
+  toolbar: "exportpdf | spellcheckdialog | styles | bold italic underline strikethrough | align bullist numlist | link image emoticons footnotes checklist formatpainter permanentpen tableofcontents",
 });

modules/ROOT/nav.adoc

@@ -1,7 +1,7 @@
 * xref:getting-started.adoc[Getting started]
 ** xref:introduction-to-tinymce.adoc[Introduction to {productname}]
 ** xref:installation.adoc[Installation]
-*** Cloud
+*** xref:installation-cloud.adoc[Cloud]
 **** xref:cloud-quick-start.adoc[Quick start]
 **** xref:react-cloud.adoc[React]
 **** xref:angular-cloud.adoc[Angular]
@@ -14,44 +14,51 @@
 **** xref:django-cloud.adoc[Django]
 **** xref:laravel-tiny-cloud.adoc[Laravel]
 **** xref:rails-cloud.adoc[Ruby on Rails]
-*** Self-hosted
+*** xref:installation-self-hosted.adoc[Self-hosted]
 **** React
 ***** 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[Using a .zip package with hosting]
-***** xref:react-zip-bundle.adoc[Using a .zip package with bundling]
 **** Angular
 ***** xref:angular-pm.adoc[Using a package manager]
-***** xref:angular-zip.adoc[Using a .zip package]
 **** Vue.js
 ***** xref:vue-pm.adoc[Using a package manager]
-***** xref:vue-zip.adoc[Using a .zip package]
 **** Blazor
 ***** xref:blazor-pm.adoc[Using a package manager]
-***** xref:blazor-zip.adoc[Using a .zip package]
 **** Svelte
 ***** xref:svelte-pm.adoc[Using a package manager]
-***** xref:svelte-zip.adoc[Using a .zip package]
 **** Web Component
 ***** xref:webcomponent-pm.adoc[Using a package manager]
-***** xref:webcomponent-zip.adoc[Using a .zip package]
-**** xref:swing.adoc[Java Swing]
 **** xref:shadow-dom.adoc[Shadow DOM]
 **** xref:jquery-pm.adoc[jQuery]
-**** xref:bootstrap-zip.adoc[Bootstrap]
-**** xref:django-zip.adoc[Django]
 **** xref:expressjs-pm.adoc[Node.js + Express]
 **** Laravel
 ***** xref:laravel-composer-install.adoc[Using the Composer package]
-***** xref:laravel-zip-install.adoc[Using a .zip package]
 **** Ruby on Rails
 ***** xref:rails-third-party.adoc[Using a package manager]
-***** xref:rails-zip.adoc[Using a .zip package]
 **** xref:wordpress.adoc[WordPress]
 **** 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:installation-zip.adoc[ZIP]
+**** React
+***** xref:react-zip-host.adoc[Using a .zip package with hosting]
+***** xref:react-zip-bundle.adoc[Using a .zip package with bundling]
+**** Angular
+***** xref:angular-zip.adoc[Using a .zip package]
+**** Vue.js
+***** xref:vue-zip.adoc[Using a .zip package]
+**** Blazor
+***** xref:blazor-zip.adoc[Using a .zip package]
+**** Svelte
+***** xref:svelte-zip.adoc[Using a .zip package]
+**** Web Component
+***** xref:webcomponent-zip.adoc[Using a .zip package]
+**** xref:bootstrap-zip.adoc[Bootstrap]
+**** xref:django-zip.adoc[Django]
+**** xref:laravel-zip-install.adoc[Laravel]
+**** xref:rails-zip.adoc[Ruby on Rails]
+**** xref:swing.adoc[Java Swing]
 **** xref:zip-install.adoc[{productname} .zip deployments]
 ** xref:upgrading.adoc[Upgrading {productname}]
 * xref:how-to-guides.adoc[How-to guides]

modules/ROOT/pages/installation-cloud.adoc

@@ -0,0 +1,135 @@
+= Installing {productname} using the {cloudname}
+:navtitle: Cloud
+:description: Get started with TinyMCE using the Tiny Cloud CDN - the fastest way to get {productname} up and running.
+:keywords: tinymce cloud, cdn, cloud hosting
+
+== Quick start
+
+The easiest way to get started with {productname} is using the {cloudname}. Simply include the TinyMCE script in your HTML:
+
+[source,html]
+----
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="{cdnurl}"></script>
+  </head>
+  <body>
+    <textarea id="mytextarea"></textarea>
+    <script>
+      tinymce.init({
+        selector: '#mytextarea'
+      });
+    </script>
+  </body>
+</html>
+----
+
+== Framework integrations
+
+Get started with {productname} in your preferred framework:
+
+++++
+include::partial$css/installation-cards.css[]
+<div class="tiny-installation-cards">
+<div class="framework-cards">
+  <div class="framework-grid">
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon">⚡</div>
+        <h3 class="framework-name">Quick start</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/react-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/react-color.svg" alt="React"></div>
+        <h3 class="framework-name">React</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/angular-color.svg" alt="Angular"></div>
+        <h3 class="framework-name">Angular</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/vue-color.svg" alt="Vue"></div>
+        <h3 class="framework-name">Vue.js</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/blazor-color.svg" alt="Blazor"></div>
+        <h3 class="framework-name">Blazor</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/svelte-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/svelte-color.svg" alt="Svelte"></div>
+        <h3 class="framework-name">Svelte</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/web-components-color.svg" alt="Web Components"></div>
+        <h3 class="framework-name">Web Component</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/jquery-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/jquery-color.svg" alt="jQuery"></div>
+        <h3 class="framework-name">jQuery</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/bootstrap-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/bootstrap-color.svg" alt="Bootstrap"></div>
+        <h3 class="framework-name">Bootstrap</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/django-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/django-color.svg" alt="Django"></div>
+        <h3 class="framework-name">Django</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/laravel-tiny-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/laravel-color.svg" alt="Laravel"></div>
+        <h3 class="framework-name">Laravel</h3>
+      </div>
+    </a>
+
+    <a href="https://www.tiny.cloud/docs/tinymce/latest/rails-cloud/" class="framework-card-link">
+      <div class="framework-card">
+        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/rails-color.svg" alt="Rails"></div>
+        <h3 class="framework-name">Ruby on Rails</h3>
+      </div>
+    </a>
+  </div>
+</div>
+</div>
+++++
+
+== 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[]