diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 1d67a4003a..d19b489a3f 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -1,58 +1,74 @@ * xref:getting-started.adoc[Getting started] ** xref:introduction-to-tinymce.adoc[Introduction to {productname}] ** xref:installation.adoc[Installation] -*** Cloud -**** xref:cloud-quick-start.adoc[Quick start] -**** xref:react-cloud.adoc[React] -**** xref:angular-cloud.adoc[Angular] -**** xref:vue-cloud.adoc[Vue.js] -**** xref:blazor-cloud.adoc[Blazor] -**** xref:svelte-cloud.adoc[Svelte] -**** xref:webcomponent-cloud.adoc[Web Component] -**** xref:jquery-cloud.adoc[jQuery] -**** xref:bootstrap-cloud.adoc[Bootstrap] -**** xref:django-cloud.adoc[Django] -**** xref:laravel-tiny-cloud.adoc[Laravel] -**** xref:rails-cloud.adoc[Ruby on Rails] -*** 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:zip-install.adoc[{productname} .zip deployments] +*** xref:installation-cloud.adoc[Cloud] +**** xref:cloud-quick-start.adoc[Quick start guide] +**** Supported Integrations +***** xref:react-cloud.adoc[React] +***** xref:angular-cloud.adoc[Angular] +***** xref:vue-cloud.adoc[Vue.js] +***** xref:blazor-cloud.adoc[Blazor] +***** xref:svelte-cloud.adoc[Svelte] +***** xref:webcomponent-cloud.adoc[Web Component] +***** xref:jquery-cloud.adoc[jQuery] +**** Backend Integrations +***** xref:django-cloud.adoc[Django] +***** xref:laravel-tiny-cloud.adoc[Laravel] +***** xref:rails-cloud.adoc[Ruby on Rails] +**** Other Integrations +***** xref:bootstrap-cloud.adoc[Bootstrap] +*** xref:installation-self-hosted.adoc[Self-hosted] +**** xref:npm-projects.adoc[Quick start guide] +**** Supported Integrations +***** React +****** xref:react-pm-host.adoc[Using a package manager with hosting] +****** xref:react-pm-bundle.adoc[Using a package manager with bundling] +***** Angular +****** xref:angular-pm.adoc[Using a package manager] +***** Vue.js +****** xref:vue-pm.adoc[Using a package manager] +***** Blazor +****** xref:blazor-pm.adoc[Using a package manager] +***** Svelte +****** xref:svelte-pm.adoc[Using a package manager] +***** Web Component +****** xref:webcomponent-pm.adoc[Using a package manager] +***** xref:jquery-pm.adoc[jQuery] +***** xref:swing.adoc[Java Swing] +**** Backend Integrations +***** Laravel +****** xref:laravel-composer-install.adoc[Using the Composer package] +***** Ruby on Rails +****** xref:rails-third-party.adoc[Using a package manager] +***** xref:expressjs-pm.adoc[Node.js + Express] +**** Other Integrations +***** xref:shadow-dom.adoc[Shadow DOM] +***** xref:php-projects.adoc[PHP projects] +***** xref:dotnet-projects.adoc[.NET projects] +***** xref:wordpress.adoc[WordPress] +*** xref:installation-zip.adoc[ZIP] +**** xref:zip-install.adoc[Quick start guide] +**** Supported Integrations +***** 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:swing.adoc[Java Swing] +**** Backend Integrations +***** xref:django-zip.adoc[Django] +***** xref:laravel-zip-install.adoc[Laravel] +***** xref:rails-zip.adoc[Ruby on Rails] +**** Other Integrations +***** xref:bootstrap-zip.adoc[Bootstrap] ** xref:upgrading.adoc[Upgrading {productname}] * xref:how-to-guides.adoc[How-to guides] ** Learn the basics @@ -63,64 +79,6 @@ *** xref:spell-checking.adoc[Spell checking] *** xref:editor-content-css.adoc[CSS for rendering content] *** xref:userlookup.adoc[Using the UserLookup API] -** Environment setup guides -*** React framework -**** xref:react-cloud.adoc[Using the Tiny Cloud] -**** 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] -**** xref:react-ref.adoc[Technical reference] -*** Angular framework -**** xref:angular-cloud.adoc[Using the Tiny Cloud] -**** xref:angular-pm.adoc[Using a package manager] -**** xref:angular-zip.adoc[Using a .zip package] -**** xref:angular-ref.adoc[Technical reference] -*** Vue.js framework -**** xref:vue-cloud.adoc[Using the Tiny Cloud] -**** xref:vue-pm.adoc[Using a package manager] -**** xref:vue-zip.adoc[Using a .zip package] -**** xref:vue-ref.adoc[Technical reference] -*** Blazor framework -**** xref:blazor-cloud.adoc[Using the Tiny Cloud] -**** xref:blazor-pm.adoc[Using a package manager] -**** xref:blazor-zip.adoc[Using a .zip package] -**** xref:blazor-ref.adoc[Technical reference] -*** Svelte framework -**** xref:svelte-cloud.adoc[Using the Tiny Cloud] -**** xref:svelte-pm.adoc[Using a package manager] -**** xref:svelte-zip.adoc[Using a .zip package] -**** xref:svelte-ref.adoc[Technical reference] -*** Web Component -**** xref:webcomponent-cloud.adoc[Using the Tiny Cloud] -**** xref:webcomponent-pm.adoc[Using a package manager] -**** xref:webcomponent-zip.adoc[Using a .zip package] -**** xref:webcomponent-ref.adoc[Technical reference] -*** xref:swing.adoc[Java Swing] -*** jQuery -**** xref:jquery-cloud.adoc[Using the Tiny Cloud] -**** xref:jquery-pm.adoc[Using a package manager] -*** Bootstrap framework -**** xref:bootstrap-cloud.adoc[Using the Tiny Cloud] -**** xref:bootstrap-zip.adoc[Using a .zip package] -*** Django framework -**** xref:django-cloud.adoc[Using the Tiny Cloud] -**** xref:django-zip.adoc[Using a .zip package] -*** xref:expressjs-pm.adoc[Node.js + Express] -*** Laravel framework -**** xref:laravel-tiny-cloud.adoc[Using the Tiny Cloud] -**** xref:laravel-composer-install.adoc[Using the Composer package] -**** xref:laravel-zip-install.adoc[Using a .zip package] -*** Ruby on Rails framework -**** xref:rails-cloud.adoc[Using the Tiny Cloud] -**** 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:zip-install.adoc[{productname} .zip deployments] ** xref:cloud-deployment-guide.adoc[Cloud deployment guide] *** xref:editor-and-features.adoc[Cloud deployment of editor & plugins] *** xref:features-only.adoc[Cloud deployment of plugins Only] @@ -328,13 +286,13 @@ ***** xref:import-from-word-with-jwt-authentication-nodejs.adoc[Node.js] ***** xref:import-from-word-with-jwt-authentication-php.adoc[PHP] *** xref:editimage.adoc[Image Editing] +*** xref:uploadcare.adoc[Media Optimizer] +**** xref:uploadcare-image.adoc[Image] +**** xref:uploadcare-video.adoc[Video] *** xref:inline-css.adoc[Inline CSS] *** xref:linkchecker.adoc[Link Checker] *** xref:math.adoc[Math] *** xref:markdown.adoc[Markdown] -*** xref:uploadcare.adoc[Media Optimizer] -**** xref:uploadcare-image.adoc[Image] -**** xref:uploadcare-video.adoc[Video] *** xref:mentions.adoc[Mentions] *** xref:mergetags.adoc[Merge Tags] *** xref:moxiemanager.adoc[MoxieManager] diff --git a/modules/ROOT/pages/bower-projects.adoc b/modules/ROOT/pages/bower-projects.adoc deleted file mode 100644 index a609ebcbea..0000000000 --- a/modules/ROOT/pages/bower-projects.adoc +++ /dev/null @@ -1,7 +0,0 @@ -= Installing {productname} with Bower -:navtitle: Bower projects -:description: Learn how to install {productname} using Bower. -:keywords: bower, javascript, install -:productSource: bower - -include::partial$install/basic-quickstart-base.adoc[] diff --git a/modules/ROOT/pages/browserify-cjs-npm.adoc b/modules/ROOT/pages/browserify-cjs-npm.adoc index a2dc765c5e..dc97c892fb 100644 --- a/modules/ROOT/pages/browserify-cjs-npm.adoc +++ b/modules/ROOT/pages/browserify-cjs-npm.adoc @@ -1,7 +1,7 @@ -= Bundling an npm version of {productname} with CommonJS and Browserify += Bundling an NPM version of {productname} with CommonJS and Browserify :navtitle: CommonJS and npm -:description_short: Bundling an npm version of TinyMCE in a project using CommonJS and Browserify -:description: Bundling an npm version of TinyMCE in a project using CommonJS and Browserify +:description_short: Bundling an NPM version of TinyMCE in a project using CommonJS and Browserify +:description: Bundling an NPM version of TinyMCE in a project using CommonJS and Browserify :keywords: browserify, commonjs, cjs, npm, modules, tinymce :installtype: an npm :bundler: https://browserify.org/[Browserify] diff --git a/modules/ROOT/pages/cloud-quick-start.adoc b/modules/ROOT/pages/cloud-quick-start.adoc index 7be7d76e6e..9a49fb1bdc 100644 --- a/modules/ROOT/pages/cloud-quick-start.adoc +++ b/modules/ROOT/pages/cloud-quick-start.adoc @@ -1,10 +1,46 @@ -= Quick start -:navtitle: Quick start += Quick start: {productname} with {cloudname} +:navtitle: Quick start: Cloud :description_short: Setup a basic {productname} {productmajorversion} editor using the {cloudname}. :description: Get an instance of {productname} {productmajorversion} up and running using the {cloudname}. :keywords: tinymce, script, textarea :productSource: cloud -include::partial$install/basic-quickstart-base.adoc[] +== Install {productname} using the {cloudname} -include::partial$misc/admon-account-creation-and-social-option.adoc[] \ No newline at end of file +{productname} {productmajorversion} is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a {productname} editor to a web page using the {cloudname}. + +include::partial$misc/admon-account-creation-and-social-option.adoc[] + +== Include the {productname} script + +Include the following line of code in the `++` of an HTML page: + +[source,html,subs="attributes+"] +---- + +---- + +== Initialize {productname} as part of a web form + +include::partial$install/initialize-editor-cloud.adoc[] + +Adding this content to an HTML file and opening it in a web browser will load a {productname} editor, such as: + +liveDemo::default[] + +== Update the "no-api-key" placeholder with your API key + +To remove the notice: + +[WARNING] +==== +**This domain is not registered with {cloudname}. Please see the quick start guide or create an account.** +==== + +Update the `+no-api-key+` placeholder in the source script (`+ +---- + +== Initialize {productname} as part of a web form + +include::partial$install/initialize-editor-self-hosted.adoc[] + +Adding this content to an HTML file and opening it in a web browser will load a {productname} editor, such as: + +liveDemo::default[] + +include::partial$install/save-content.adoc[] + +include::partial$misc/quickstart-next-steps.adoc[] diff --git a/modules/ROOT/pages/installation-cloud.adoc b/modules/ROOT/pages/installation-cloud.adoc new file mode 100644 index 0000000000..ceeed6a717 --- /dev/null +++ b/modules/ROOT/pages/installation-cloud.adoc @@ -0,0 +1,121 @@ += 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 + +== Cloud quick start guide + +[cols=2*a] +|=== + +| +[.lead] +xref:cloud-quick-start.adoc[Cloud quick start guide] + +Get started with {productname} using the {cloudname} in minutes. +| +|=== + +== Integrations + +Get started with {productname} in your preferred integration: + +=== Supported Integrations + +The following packages are thin wrappers around {productname} to make it easier to integrate into your project: + +[cols=2*a] +|=== + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/react-cloud/[React] + +Integrate {productname} into your React application using the {cloudname}. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/[Angular] + +Integrate {productname} into your Angular application using the {cloudname}. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/[Vue.js] + +Integrate {productname} into your Vue.js application using the {cloudname}. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/[Blazor] + +Integrate {productname} into your Blazor application using the {cloudname}. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/svelte-cloud/[Svelte] + +Integrate {productname} into your Svelte application using the {cloudname}. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/[Web Component] + +Integrate {productname} as a web component using the {cloudname}. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/jquery-cloud/[jQuery] + +Integrate {productname} with the jQuery JavaScript library using the {cloudname}. + +// Empty cell to even out rows +| + +|=== + +=== Backend Integrations + +[cols=2*a] +|=== + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/django-cloud/[Django] + +Integrate {productname} into your Django application using the {cloudname}. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/laravel-tiny-cloud/[Laravel] + +Integrate {productname} into your Laravel application using the {cloudname}. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/rails-cloud/[Ruby on Rails] + +Integrate {productname} into your Ruby on Rails application using the {cloudname}. + +// Empty cell to even out rows +| + +|=== + +=== Other Integrations + +[cols=2*a] +|=== + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/bootstrap-cloud/[Bootstrap] + +Integrate {productname} with the Bootstrap CSS framework using the {cloudname}. + +// Empty cell to even out rows +| + +|=== + +include::partial$misc/admon-account-creation-and-social-option.adoc[] \ No newline at end of file diff --git a/modules/ROOT/pages/installation-self-hosted.adoc b/modules/ROOT/pages/installation-self-hosted.adoc new file mode 100644 index 0000000000..b677cfbdb6 --- /dev/null +++ b/modules/ROOT/pages/installation-self-hosted.adoc @@ -0,0 +1,169 @@ += 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 guide + +[cols=2*a] +|=== + +| +[.lead] +xref:npm-projects.adoc[Quick start: NPM/Yarn] + +Install and configure {productname} using NPM or Yarn. +| +|=== + +== Integrations + +Get started with {productname} in your preferred integration: + +=== Supported Integrations + +The following packages are thin wrappers around {productname} to make it easier to integrate into your project: + +[cols=2*a] +|=== + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/react-pm-host/[React (Hosting)] + +Integrate {productname} into your React application using a package manager with hosting. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/react-pm-bundle/[React (Bundling)] + +Integrate {productname} into your React application using a package manager with bundling. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/angular-pm/[Angular] + +Integrate {productname} into your Angular application using a package manager. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/vue-pm/[Vue.js] + +Integrate {productname} into your Vue.js application using a package manager. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/blazor-pm/[Blazor] + +Integrate {productname} into your Blazor application using a package manager. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/svelte-pm/[Svelte] + +Integrate {productname} into your Svelte application using a package manager. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/webcomponent-pm/[Web Component] + +Integrate {productname} as a web component using a package manager. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/jquery-pm/[jQuery] + +Integrate {productname} with the jQuery JavaScript library using a package manager. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/swing/[Java Swing] + +Integrate {productname} into your Java Swing application using a package manager. + +// Empty cell to even out rows +| + +|=== + +=== Backend Integrations + +[cols=2*a] +|=== + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/laravel-composer-install/[Laravel] + +Integrate {productname} into your Laravel application using Composer. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/rails-third-party/[Ruby on Rails] + +Integrate {productname} into your Ruby on Rails application using a package manager. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/expressjs-pm/[Express.js] + +Integrate {productname} into your Express.js application using a package manager. + +// Empty cell to even out rows +| + +|=== + +=== Other Integrations + +[cols=2*a] +|=== + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/shadow-dom/[Shadow DOM] + +Integrate {productname} with Shadow DOM using a package manager. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/php-projects/[PHP Projects] + +Install and configure {productname} in PHP projects. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/dotnet-projects/[.NET Projects] + +Install and configure {productname} in .NET projects. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/wordpress/[WordPress] + +Integrate {productname} into your WordPress site. + +|=== + +== Package managers + +You can install {productname} using various package managers: + +[cols="1,2"] +|=== +|*Package Manager* +|*Command* + +|link:https://www.npmjs.com/package/tinymce[npm^] +|`npm install tinymce` + +|link:https://classic.yarnpkg.com/en/package/tinymce[Yarn^] +|`yarn add tinymce` + +|link:https://packagist.org/packages/tinymce/tinymce[Composer (PHP)^] +|`composer require tinymce/tinymce` + +|link:https://www.nuget.org/packages/TinyMCE[NuGet (.NET)^] +|`Install-Package tinymce` + +|=== diff --git a/modules/ROOT/pages/installation-zip.adoc b/modules/ROOT/pages/installation-zip.adoc new file mode 100644 index 0000000000..68fd0d4fa3 --- /dev/null +++ b/modules/ROOT/pages/installation-zip.adoc @@ -0,0 +1,126 @@ += 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 guide + +[cols=2*a] +|=== + +| +[.lead] +xref:zip-install.adoc[Quick start guide] + +General guide for installing {productname} using a .zip package. +| + +|=== + +== Integrations + +Get started with {productname} in your preferred integration: + +=== Supported Integrations + +The following packages are thin wrappers around {productname} to make it easier to integrate into your project: + +[cols=2*a] +|=== + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/react-zip-host/[React (Hosting)] + +Integrate {productname} into your React application using a .zip package with hosting. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/react-zip-bundle/[React (Bundling)] + +Integrate {productname} into your React application using a .zip package with bundling. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/angular-zip/[Angular] + +Integrate {productname} into your Angular application using a .zip package. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/vue-zip/[Vue.js] + +Integrate {productname} into your Vue.js application using a .zip package. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/blazor-zip/[Blazor] + +Integrate {productname} into your Blazor application using a .zip package. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/svelte-zip/[Svelte] + +Integrate {productname} into your Svelte application using a .zip package. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/webcomponent-zip/[Web Component] + +Integrate {productname} as a web component using a .zip package. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/swing/[Java Swing] + +Integrate {productname} into your Java Swing application using a .zip package. + +// Empty cell to even out rows +| + +|=== + +=== Backend Integrations + +[cols=2*a] +|=== + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/django-zip/[Django] + +Integrate {productname} into your Django application using a .zip package. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/laravel-zip-install/[Laravel] + +Integrate {productname} into your Laravel application using a .zip package. + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/rails-zip/[Ruby on Rails] + +Integrate {productname} into your Ruby on Rails application using a .zip package. + +// Empty cell to even out rows +| + +|=== + +=== Other Integrations + +[cols=2*a] +|=== + +| +[.lead] +link:https://www.tiny.cloud/docs/tinymce/latest/bootstrap-zip/[Bootstrap] + +Integrate {productname} with the Bootstrap CSS framework using a .zip package. + +// Empty cell to even out rows +| +|=== diff --git a/modules/ROOT/pages/installation.adoc b/modules/ROOT/pages/installation.adoc index 41e54c8271..2adf73388b 100644 --- a/modules/ROOT/pages/installation.adoc +++ b/modules/ROOT/pages/installation.adoc @@ -3,128 +3,115 @@ :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"] +== Quick start guides + +[cols=2*a] |=== -a| +| [.lead] -Quick start +xref:cloud-quick-start.adoc[Cloud 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] +Get started with {productname} using the {cloudname} in minutes. +| +|=== -a| -[.lead] -React +== Integrations -* 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] +Get started with {productname} in your preferred integration: -a| -[.lead] -Angular +=== Supported Integrations -* xref:angular-cloud.adoc[Using the {cloudname}] -* xref:angular-pm.adoc[Using a package manager] -* xref:angular-zip.adoc[{productname} .zip deployments] +The following packages are thin wrappers around {productname} to make it easier to integrate into your project: -a| +[cols=2*a] +|=== + +| [.lead] -Vue.js +xref:react-cloud.adoc[React] -* xref:vue-cloud.adoc[Using the {cloudname}] -* xref:vue-pm.adoc[Using a package manager] -* xref:vue-zip.adoc[{productname} .zip deployments] +Integrate {productname} into your React application using the {cloudname}. -a| +| [.lead] -Blazor +xref:angular-cloud.adoc[Angular] -* xref:blazor-cloud.adoc[Using the {cloudname}] -* xref:blazor-pm.adoc[Using a package manager] -* xref:blazor-zip.adoc[{productname} .zip deployments] +Integrate {productname} into your Angular application using the {cloudname}. -a| +| [.lead] -Svelte +xref:vue-cloud.adoc[Vue.js] -* xref:svelte-cloud.adoc[Using the {cloudname}] -* xref:svelte-pm.adoc[Using a package manager] -* xref:svelte-zip.adoc[{productname} .zip deployments] +Integrate {productname} into your Vue.js application using the {cloudname}. -a| +| [.lead] -Web Component +xref:blazor-cloud.adoc[Blazor] -* xref:webcomponent-cloud.adoc[Using the {cloudname}] -* xref:webcomponent-pm.adoc[Using a package manager] -* xref:webcomponent-zip.adoc[{productname} .zip deployments] +Integrate {productname} into your Blazor application using the {cloudname}. -a| +| [.lead] -Java Swing +xref:svelte-cloud.adoc[Svelte] -* xref:swing.adoc[{productname} .zip deployments] +Integrate {productname} into your Svelte application using the {cloudname}. -a| +| [.lead] -jQuery +xref:webcomponent-cloud.adoc[Web Component] -* xref:jquery-cloud.adoc[Using the {cloudname}] -* xref:jquery-pm.adoc[Using a package manager] +Integrate {productname} as a web component using the {cloudname}. -a| +| [.lead] -Bootstrap +xref:jquery-cloud.adoc[jQuery] -* xref:bootstrap-cloud.adoc[Using the {cloudname}] -* xref:bootstrap-zip.adoc[{productname} .zip deployments] +Integrate {productname} with the jQuery JavaScript library using the {cloudname}. -a| -[.lead] -Django +// Empty cell to even out rows +| +|=== -* xref:django-cloud.adoc[Using the {cloudname}] -* xref:django-zip.adoc[{productname} .zip deployments] +=== Backend Integrations -a| +[cols=2*a] +|=== + +| [.lead] -Node.js + Express +xref:django-cloud.adoc[Django] -* xref:expressjs-pm.adoc[Using a package manager] +Integrate {productname} into your Django application using the {cloudname}. -a| +| [.lead] -Laravel +xref:laravel-tiny-cloud.adoc[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] +Integrate {productname} into your Laravel application using the {cloudname}. -a| +| [.lead] -Ruby on Rails +xref:rails-cloud.adoc[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] +Integrate {productname} into your Ruby on Rails application using the {cloudname}. +// Empty cell to even out rows +| -a| -[.lead] -Wordpress +|=== + +=== Other Integrations + +[cols=2*a] +|=== -* xref:wordpress.adoc[Wordpress plugin] -a| +| +[.lead] +xref:bootstrap-cloud.adoc[Bootstrap] -|=== \ No newline at end of file +Integrate {productname} with the Bootstrap CSS framework using the {cloudname}. +| +|=== diff --git a/modules/ROOT/pages/invalid-api-key.adoc b/modules/ROOT/pages/invalid-api-key.adoc index 949ba08f80..d812f5b76e 100644 --- a/modules/ROOT/pages/invalid-api-key.adoc +++ b/modules/ROOT/pages/invalid-api-key.adoc @@ -40,7 +40,7 @@ The cloud hosted option for {productname} is available under commercial license, If you are receiving an error notification, you are using the cloud-hosted option of {productname} under a commercial license. If you want to continue using {productname} without an API key, you will need to either migrate to the free, open source, self-hosted option or use a 3rd party-hosted CDN option under an MIT license. -== I installed the npm package, which I assumed would be self-hosted. Why am I getting a notification that an API key is required? +== I installed the NPM package, which I assumed would be self-hosted. Why am I getting a notification that an API key is required? Our integrations default to using the {productname} Cloud service. If you’re receiving the notification that an API key is required, it means that you’re using the cloud-hosted option for {productname} under commercial license which requires a valid API key and allows for 1,000 editor loads per month for free. diff --git a/modules/ROOT/pages/npm-projects.adoc b/modules/ROOT/pages/npm-projects.adoc index daf7eb7346..699bcad183 100644 --- a/modules/ROOT/pages/npm-projects.adoc +++ b/modules/ROOT/pages/npm-projects.adoc @@ -1,7 +1,55 @@ -= Installing {productname} from NPM -:navtitle: NPM projects -:description: Learn how to install {productname} from NPM using npm and Yarn. += Quick start: {productname} from NPM or Yarn +:navtitle: Quick start: NPM/Yarn +:description: Learn how to install {productname} from NPM using NPM and Yarn. :keywords: yarn, npm, javascript, install -:productSource: npm -include::partial$install/basic-quickstart-base.adoc[] +== Install {productname} using NPM or Yarn + +{productname} {productmajorversion} is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a {productname} editor to a web page using NPM or Yarn. + +== Prerequisites + +This procedure requires https://nodejs.org/[Node.js (and npm)] to be installed. Ensure you have a project directory with a `+package.json+` file. If you don't have a project yet, initialize one by running `+npm init+` or `+yarn init+` in your project directory. + +== Install {productname} + +To add {productname} to your project, navigate to your project directory and run one of the following commands: + +* *NPM:* ++ +[source,sh,subs="attributes+"] +---- +npm install tinymce@^{productmajorversion} +---- +* *Yarn:* ++ +[source,sh,subs="attributes+"] +---- +yarn add tinymce@^{productmajorversion} +---- + +The location of the main {productname} script will be: `+node_modules/tinymce/tinymce.min.js+`. Ensure the `+tinymce+` directory containing the `+tinymce.min.js+` file is accessible for the target page or application by either: + +* Using a webserver route, or +* Copying the `+tinymce+` directory to a public folder using a build tool such as Gulp or Webpack. + +== Include the {productname} script + +Include the following line of code in the `++` of an HTML page: + +[source,html,subs="attributes+"] +---- + +---- + +== Initialize {productname} as part of a web form + +include::partial$install/initialize-editor-self-hosted.adoc[] + +Adding this content to an HTML file and opening it in a web browser will load a {productname} editor, such as: + +liveDemo::default[] + +include::partial$install/save-content.adoc[] + +include::partial$misc/quickstart-next-steps.adoc[] diff --git a/modules/ROOT/pages/php-projects.adoc b/modules/ROOT/pages/php-projects.adoc index 847d8fc785..6e27351c03 100644 --- a/modules/ROOT/pages/php-projects.adoc +++ b/modules/ROOT/pages/php-projects.adoc @@ -2,6 +2,40 @@ :navtitle: PHP projects :description: Learn how to install {productname} from Packagist using Composer. :keywords: php, composer, packagist, install -:productSource: composer -include::partial$install/basic-quickstart-base.adoc[] +== Install {productname} using the Composer package manager + +{productname} {productmajorversion} is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a {productname} editor to a web page using the Composer package manager. + +To add {productname} to a PHP project using Composer, run the following on a command line: + +[source,sh] +---- +composer require tinymce/tinymce +---- + +The location of the main {productname} script will be: `+vendor/tinymce/tinymce/tinymce.min.js+`. Ensure the `+tinymce+` directory containing the `+tinymce.min.js+` file is accessible for the target page or application by either: + +* Using a webserver route, or +* Copying the `+tinymce+` directory to a public folder using a build tool. + +== Include the {productname} script + +Include the following line of code in the `++` of an HTML page: + +[source,html,subs="attributes+"] +---- + +---- + +== Initialize {productname} as part of a web form + +include::partial$install/initialize-editor-self-hosted.adoc[] + +Adding this content to an HTML file and opening it in a web browser will load a {productname} editor, such as: + +liveDemo::default[] + +include::partial$install/save-content.adoc[] + +include::partial$misc/quickstart-next-steps.adoc[] diff --git a/modules/ROOT/pages/rollup-es6-npm.adoc b/modules/ROOT/pages/rollup-es6-npm.adoc index 14e158f8cb..72bbe63cd5 100644 --- a/modules/ROOT/pages/rollup-es6-npm.adoc +++ b/modules/ROOT/pages/rollup-es6-npm.adoc @@ -1,7 +1,7 @@ -= Bundling an npm version of TinyMCE with ES6 and Rollup.js += Bundling an NPM version of TinyMCE with ES6 and Rollup.js :navtitle: ES6 and npm -:description_short: Bundling an npm version of TinyMCE in a project using ES6 and Rollup.js -:description: Bundling an npm version of TinyMCE in a project using ES6 and Rollup.js +:description_short: Bundling an NPM version of TinyMCE in a project using ES6 and Rollup.js +:description: Bundling an NPM version of TinyMCE in a project using ES6 and Rollup.js :keywords: rollupjs, es6, es2015, npm, modules, tinymce :installtype: an npm :bundler: https://www.rollupjs.org/[Rollup.js] diff --git a/modules/ROOT/pages/tinydrive-java.adoc b/modules/ROOT/pages/tinydrive-java.adoc index 7b5c4bad33..e25e026abc 100644 --- a/modules/ROOT/pages/tinydrive-java.adoc +++ b/modules/ROOT/pages/tinydrive-java.adoc @@ -45,7 +45,7 @@ The API key can be generated using the `+API Key Manager+` {accountpage} page at You get the private RSA key from the `+JWT Key Manager+` {accountpage} page at http://tiny.cloud. [[go-to-the-directory-and-install-npm-packages-and-then-start-the-dev-server]] -==== 4. Go to the directory and install npm packages and then start the dev server +==== 4. Go to the directory and install NPM packages and then start the dev server [source,sh] ---- diff --git a/modules/ROOT/pages/upgrading.adoc b/modules/ROOT/pages/upgrading.adoc index a0b804617f..f3d4c54190 100644 --- a/modules/ROOT/pages/upgrading.adoc +++ b/modules/ROOT/pages/upgrading.adoc @@ -1,7 +1,7 @@ = Upgrading TinyMCE :navtitle: Upgrading TinyMCE :description: How to upgrade TinyMCE via Tiny Cloud, package manager options, and Self-hosted options. -:keywords: npm, bower, composer, nuget, update, updating, upgrade, upgrading +:keywords: npm, composer, nuget, update, updating, upgrade, upgrading [IMPORTANT] https://www.tiny.cloud/long-term-support/[Learn more about TinyMCE 5 LTS] if you need to remain on TinyMCE 5 and continue to receive security updates. diff --git a/modules/ROOT/pages/vite-es6-npm.adoc b/modules/ROOT/pages/vite-es6-npm.adoc index eb2cf0f801..b4676b2032 100644 --- a/modules/ROOT/pages/vite-es6-npm.adoc +++ b/modules/ROOT/pages/vite-es6-npm.adoc @@ -1,7 +1,7 @@ -= Bundling an npm version of TinyMCE with ES6 and Vite += Bundling an NPM version of TinyMCE with ES6 and Vite :navtitle: ES6 and npm -:description_short: Bundling an npm version of TinyMCE in a project using ES6 and Vite -:description: Bundling an npm version of TinyMCE in a project using ES6 and Vite +:description_short: Bundling an NPM version of TinyMCE in a project using ES6 and Vite +:description: Bundling an NPM version of TinyMCE in a project using ES6 and Vite :keywords: vite, es6, es2015, npm, modules, tinymce :installtype: a npm :bundler: https://vitejs.dev[Vite] @@ -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/pages/webpack-cjs-npm.adoc b/modules/ROOT/pages/webpack-cjs-npm.adoc index 4d617a46c4..c440ca86b9 100644 --- a/modules/ROOT/pages/webpack-cjs-npm.adoc +++ b/modules/ROOT/pages/webpack-cjs-npm.adoc @@ -1,7 +1,7 @@ -= Bundling an npm version of TinyMCE with CommonJS and Webpack += Bundling an NPM version of TinyMCE with CommonJS and Webpack :navtitle: CommonJS and npm -:description_short: Bundling an npm version of TinyMCE in a project using CommonJS and Webpack -:description: Bundling an npm version of TinyMCE in a project using CommonJS and Webpack +:description_short: Bundling an NPM version of TinyMCE in a project using CommonJS and Webpack +:description: Bundling an NPM version of TinyMCE in a project using CommonJS and Webpack :keywords: webpack, commonjs, cjs, npm, modules, tinymce :installtype: an npm :bundler: https://webpack.js.org/[Webpack] diff --git a/modules/ROOT/pages/webpack-es6-npm.adoc b/modules/ROOT/pages/webpack-es6-npm.adoc index 608d71cc27..7656eadbbc 100644 --- a/modules/ROOT/pages/webpack-es6-npm.adoc +++ b/modules/ROOT/pages/webpack-es6-npm.adoc @@ -1,7 +1,7 @@ -= Bundling an npm version of TinyMCE with ES6 and Webpack += Bundling an NPM version of TinyMCE with ES6 and Webpack :navtitle: ES6 and npm -:description_short: Bundling an npm version of TinyMCE in a project using ES6 and Webpack -:description: Bundling an npm version of TinyMCE in a project using ES6 and Webpack +:description_short: Bundling an NPM version of TinyMCE in a project using ES6 and Webpack +:description: Bundling an NPM version of TinyMCE in a project using ES6 and Webpack :keywords: webpack, es6, es2015, npm, modules, tinymce :installtype: an npm :bundler: https://webpack.js.org/[Webpack] diff --git a/modules/ROOT/pages/zip-install.adoc b/modules/ROOT/pages/zip-install.adoc index 32c564c3ff..c0a6a86ea1 100644 --- a/modules/ROOT/pages/zip-install.adoc +++ b/modules/ROOT/pages/zip-install.adoc @@ -1,7 +1,42 @@ -= Using {productname} from a .zip file -:navtitle: {productname} .zip deployments += Quick start: {productname} from .zip +:navtitle: Quick start: ZIP :description: Learn how to use {productname} from a .zip archive. :keywords: zip, archive, unzip, install -:productSource: zip -include::partial$install/basic-quickstart-base.adoc[] +== Install {productname} using a .zip package + +{productname} {productmajorversion} is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a {productname} editor to a web page using a {productname} .zip package. + +== Deploy {productname} from a .zip archive + +include::partial$integrations/download-tinymce-zip.adoc[] + +. Unzip the archive into a public folder of your webserver, such as: ++ +[source,sh] +---- +unzip tinymce_latest.zip -d /path/to/webserver/public/ +---- ++ +The location of the main {productname} script will be: `+/path/to/webserver/public/tinymce/js/tinymce/tinymce.min.js+`. + +== Include the {productname} script + +Include the following line of code in the `++` of an HTML page: + +[source,html,subs="attributes+"] +---- + +---- + +== Initialize {productname} as part of a web form + +include::partial$install/initialize-editor-self-hosted.adoc[] + +Adding this content to an HTML file and opening it in a web browser will load a {productname} editor, such as: + +liveDemo::default[] + +include::partial$install/save-content.adoc[] + +include::partial$misc/quickstart-next-steps.adoc[] diff --git a/modules/ROOT/partials/install/basic-quickstart-base.adoc b/modules/ROOT/partials/install/basic-quickstart-base.adoc index 79c886efbd..8d47b0aca3 100644 --- a/modules/ROOT/partials/install/basic-quickstart-base.adoc +++ b/modules/ROOT/partials/install/basic-quickstart-base.adoc @@ -7,11 +7,7 @@ ifeval::["{productSource}" == "composer"] endif::[] ifeval::["{productSource}" == "npm"] -:sourcename: npm or Yarn -endif::[] - -ifeval::["{productSource}" == "bower"] -:sourcename: Bower +:sourcename: NPM or Yarn endif::[] ifeval::["{productSource}" == "nuget"] @@ -69,20 +65,6 @@ yarn add tinymce@^{productmajorversion} The location of the main {productname} script will be: `+node_modules/tinymce/tinymce.min.js+`. Ensure the `+tinymce+` directory containing the `+tinymce.min.js+` file is accessible for the target page or application by either: -* Using a webserver route, or -* Copying the `+tinymce+` directory to a public folder using a build tool such as Gulp or Webpack. -endif::[] -ifeval::["{productSource}" == "bower"] - -To add {productname} to a Bower project, run the following on a command line: - -[source,sh,subs="attributes+"] ----- -bower install tinymce#^{productmajorversion} ----- - -The location of the main {productname} script will be: `+bower_components/tinymce/tinymce.min.js+`. Ensure the `+tinymce+` directory containing the `+tinymce.min.js+` file is accessible for the target page or application by either: - * Using a webserver route, or * Copying the `+tinymce+` directory to a public folder using a build tool such as Gulp or Webpack. endif::[] diff --git a/modules/ROOT/partials/install/initialize-editor-cloud.adoc b/modules/ROOT/partials/install/initialize-editor-cloud.adoc new file mode 100644 index 0000000000..c120a68ee3 --- /dev/null +++ b/modules/ROOT/partials/install/initialize-editor-cloud.adoc @@ -0,0 +1,29 @@ +Initialize {productname} {productmajorversion} on any element (or elements) on the web page by passing an object containing a `+selector+` value to `+tinymce.init()+`. The `+selector+` value can be any valid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors[CSS selector]. + +For example, to replace `+ + + + +---- + diff --git a/modules/ROOT/partials/install/initialize-editor-self-hosted.adoc b/modules/ROOT/partials/install/initialize-editor-self-hosted.adoc new file mode 100644 index 0000000000..c06b0e5816 --- /dev/null +++ b/modules/ROOT/partials/install/initialize-editor-self-hosted.adoc @@ -0,0 +1,30 @@ +Initialize {productname} {productmajorversion} on any element (or elements) on the web page by passing an object containing a `+selector+` value to `+tinymce.init()+`. The `+selector+` value can be any valid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors[CSS selector]. + +For example, to replace `+ + + + +---- + diff --git a/modules/ROOT/partials/install/save-content.adoc b/modules/ROOT/partials/install/save-content.adoc new file mode 100644 index 0000000000..87cc276011 --- /dev/null +++ b/modules/ROOT/partials/install/save-content.adoc @@ -0,0 +1,6 @@ +== Save the content from the editor + +To retrieve content from the editor, either process the content with a form handler or use the xref:apis/tinymce.editor.adoc#getContent[getContent API]. + +If you use a form handler, once the `+
+` is submitted, {productname} {productmajorversion} will `+POST+` the content in the same way as a normal HTML `+