diff --git a/modules/ROOT/examples/live-demos/default/index.html b/modules/ROOT/examples/live-demos/default/index.html index 091533cd79..928896280b 100644 --- a/modules/ROOT/examples/live-demos/default/index.html +++ b/modules/ROOT/examples/live-demos/default/index.html @@ -1 +1,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/default/index.js b/modules/ROOT/examples/live-demos/default/index.js index 5031ce09cf..db603556e8 100644 --- a/modules/ROOT/examples/live-demos/default/index.js +++ b/modules/ROOT/examples/live-demos/default/index.js @@ -1,3 +1,12 @@ tinymce.init({ - selector: 'textarea#default' + selector: 'textarea#default', + plugins: [ + "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: "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/nav.adoc b/modules/ROOT/nav.adoc index 1e899f2647..1dffe24cd5 100644 --- a/modules/ROOT/nav.adoc +++ b/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] diff --git a/modules/ROOT/pages/installation-cloud.adoc b/modules/ROOT/pages/installation-cloud.adoc new file mode 100644 index 0000000000..bf37a2c0ac --- /dev/null +++ b/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] +---- + + + + + + + + + + +---- + +== 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..dcbd028eee --- /dev/null +++ b/modules/ROOT/pages/installation-self-hosted.adoc @@ -0,0 +1,204 @@ += 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}.0.0 + +# Using Yarn +yarn add tinymce@^{productmajorversion}.0.0 +---- + +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

+
+ +
+
NPM
+

NPM Projects

+
+ + +
+
PHP
+

PHP Projects

+
+ + +
+
.NET
+

.NET Projects

+
+ + +
+
Bower
+

Bower Projects

+
+ + +
+
WordPress
+

WordPress

+
+ + +
+
Java
+

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..d0cb97d83d --- /dev/null +++ b/modules/ROOT/pages/installation-zip.adoc @@ -0,0 +1,140 @@ += 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
+

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..1b18720378 100644 --- a/modules/ROOT/pages/installation.adoc +++ b/modules/ROOT/pages/installation.adoc @@ -3,128 +3,108 @@ :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.

+
+ 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 β†’ +
+
+
+++++ + +== Browse by Framework + +++++ +include::partial$css/installation-cards.css[] +
+
+
+ +
+
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/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..9903d8f4d8 --- /dev/null +++ b/modules/ROOT/partials/css/installation-cards.css @@ -0,0 +1,360 @@ + + 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..661a54b196 100644 --- a/modules/ROOT/partials/what-is-tinymce.adoc +++ b/modules/ROOT/partials/what-is-tinymce.adoc @@ -1,6 +1,5 @@ {productname} is a rich-text editor that allows users to create formatted content within a user-friendly interface. -include::partial$misc/admon-account-creation-and-social-option.adoc[] liveDemo::default-editor[] @@ -10,13 +9,102 @@ liveDemo::default-editor[] == Integration Options -{productname} integrates with frameworks and Content Management Systems (CMSs) through multiple deployment methods: +Deploy {productname} 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 β†’ +
+
+
+++++ -* **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 +=== Supported frameworks +The below frameworks are the official supported frameworks for {productname}. + +++++ +include::partial$css/installation-cards.css[] +
+
+
+ +
+
React
+

React

+
+ + +
+
Angular
+

Angular

+
+ + +
+
Vue
+

Vue.js

+
+ + +
+
Blazor
+

Blazor

+
+ + +
+
Svelte
+

Svelte

+
+ + +
+
Web Components
+

Web Component

+
+ + +
+
jQuery
+

jQuery

+
+ +
+
+
+++++ 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[]