diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 65573e7804..a418437ba1 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -57,6 +57,7 @@ ****** xref:react-zip-bundle.adoc[Using a .zip package with bundling] ***** Angular ****** xref:angular-zip.adoc[Using a .zip package] +****** xref:angular-zip-bundle.adoc[Bundle TinyMCE from a .zip package] ***** Vue.js ****** xref:vue-zip.adoc[Using a .zip package] ***** Blazor diff --git a/modules/ROOT/pages/angular-cloud.adoc b/modules/ROOT/pages/angular-cloud.adoc index 979d6a7f57..254d78d0ec 100644 --- a/modules/ROOT/pages/angular-cloud.adoc +++ b/modules/ROOT/pages/angular-cloud.adoc @@ -1,7 +1,10 @@ -= Using {productname} from the Tiny Cloud CDN with the Angular framework += Using {productname} from Tiny Cloud in Angular :navtitle: Angular -:description: A guide on integrating TinyMCE from the Tiny Cloud into the Angular framework. +:description: A guide on using TinyMCE from the Tiny Cloud in a Angular project. :keywords: integration, integrate, angular :productSource: cloud +This guide shows how to integrate {productname} from Tiny Cloud into an Angular application using https://github.com/tinymce/tinymce-angular[{productname} Angular component]. + + include::partial$integrations/angular-quick-start.adoc[] diff --git a/modules/ROOT/pages/angular-pm-bundle.adoc b/modules/ROOT/pages/angular-pm-bundle.adoc index f44c680e5f..24889c8c3b 100644 --- a/modules/ROOT/pages/angular-pm-bundle.adoc +++ b/modules/ROOT/pages/angular-pm-bundle.adoc @@ -1,13 +1,11 @@ -= Bundling TinyMCE with an Angular application += Bundling TinyMCE from NPM in an Angular application :navtitle: Using a package manager with bundling -:description: A guide on bundling TinyMCE with an Angular application using Vite. +:description: A guide on bundling TinyMCE in an Angular application using Vite. :keywords: integration, integrate, angular, bundle, vite, npm, tinymce :productSource: package-manager :packageName: @tinymce/tinymce-angular -The https://github.com/tinymce/tinymce-angular[Official {productname} Angular component] integrates {productname} into Angular projects. This procedure creates a https://angular.dev/tools/cli/setup-local[basic Angular application] containing a bundled {productname} editor. - -For examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook]. +This guide shows how to integrate the NPM version of {productname} in an Angular application. == Prerequisites @@ -15,39 +13,29 @@ This procedure requires https://nodejs.org/[Node.js (and NPM)]. == Procedure -. On a command line or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] package. +. From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] globally. + [source,sh] ---- npm install -g @angular/cli ---- + . Create a new Angular project named `+tinymce-angular-demo+`. + [source,sh] ---- ng new --defaults --skip-git tinymce-angular-demo ---- -. Change into the newly created directory. -+ -[source,sh] ----- -cd tinymce-angular-demo ----- -. Install the `+tinymce+` and `+@tinymce/tinymce-angular+` packages. + +. Go to the newly project directory and install `+tinymce+` and `+@tinymce/tinymce-angular+`. + [source,sh] ---- -npm install tinymce @tinymce/tinymce-angular +cd tinymce-angular-demo && npm install tinymce @tinymce/tinymce-angular ---- -+ -include::partial$integrations/premium-plugins-install-step-link.adoc[] -+ -[NOTE] -==== -For information on configuring premium plugins when bundling, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins]. -==== -+ -. Using a text editor, create `+src/app/editor.component.ts+` and set the contents to: + + +. Create `+src/app/editor.component.ts+`. + [source,ts] ---- @@ -74,11 +62,10 @@ import 'tinymce/plugins/lists'; import 'tinymce/plugins/table'; import 'tinymce/plugins/code'; import 'tinymce/plugins/help'; -import 'tinymce/plugins/help/js/en.js'; +// Include resources that a plugin lazy-loads at the run-time +import 'tinymce/plugins/help/js/i18n/keynav/en.js'; import 'tinymce/plugins/wordcount'; -include::partial$integrations/premium-plugins-bundling.adoc[] - // Content styles, including inline UI like fake cursors import 'tinymce/skins/content/default/content.js'; import 'tinymce/skins/ui/oxide/content.js'; @@ -103,7 +90,8 @@ export class MyEditorComponent { } ---- + -. Using a text editor, open `+src/app/app.component.ts+` and update it to use the editor component: + +. Open `+src/app/app.component.ts+` and update it to use `MyEditorComponent`: + [source,ts] ---- @@ -121,32 +109,12 @@ import { MyEditorComponent } from './editor.component'; }) export class AppComponent {} ---- -+ -. Run `+ng serve+` to start a dev server -+ -[source,sh] ----- -ng serve ----- -+ -. Build the application for production: +. Run the Angular development server + [source,sh] ---- -ng build +ng serve ---- -+ -This command creates an optimized production bundle in the `+dist+` directory. - -. If premium plugins are included, update the `+licenseKey+` option in the editor component and include your xref:license-key.adoc[License Key]. - -== Next Steps -* For information on bundling, see: xref:introduction-to-bundling-tinymce.adoc[] -* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook]. -* For information on customizing: -** {productname} integration, see: xref:angular-ref.adoc[Angular framework Technical Reference]. -** {productname}, see: xref:basic-setup.adoc[Basic setup]. -** The Angular application, see: https://angular.dev[the Angular documentation]. -* For a complete example, see: https://github.com/tinymce/tinymce-angular-integration-examples/tree/self-hosted-with-npm-premium-plugins[the Angular bundling example repository]. +include::partial$integrations/angular-other-resources.adoc[] \ No newline at end of file diff --git a/modules/ROOT/pages/angular-pm.adoc b/modules/ROOT/pages/angular-pm.adoc index 378db8bd37..18ce6e1951 100644 --- a/modules/ROOT/pages/angular-pm.adoc +++ b/modules/ROOT/pages/angular-pm.adoc @@ -1,7 +1,9 @@ -= Using the {productname} package with the Angular framework += Using {productname} from NPM in Angular :navtitle: Using a package manager -:description: A guide on integrating the TinyMCE package into the Angular framework. +:description: A guide on integrating the TinyMCE package into an Angular application. :keywords: integration, integrate, angular :productSource: package-manager +This guide shows how to integrate the NPM version of {productname} in an Angular application. + include::partial$integrations/angular-quick-start.adoc[] diff --git a/modules/ROOT/pages/angular-zip-bundle.adoc b/modules/ROOT/pages/angular-zip-bundle.adoc new file mode 100644 index 0000000000..15136a6eb5 --- /dev/null +++ b/modules/ROOT/pages/angular-zip-bundle.adoc @@ -0,0 +1,119 @@ += Bundling TinyMCE from .zip package in Angular +:navtitle: Using a package manager with bundling +:description: A guide on bundling TinyMCE from a .zip package in an Angular application. +:keywords: integration, integrate, angular, bundle, vite, npm, tinymce +:productSource: package-manager +:packageName: @tinymce/tinymce-angular + +This guide shows how to integrate {productname} from a `.zip` package in an Angular application. + +== Prerequisites + +This procedure requires https://nodejs.org/[Node.js (and NPM)]. + +== Procedure + +. From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] globally. ++ +[source,sh] +---- +npm install -g @angular/cli +---- + +. Create a new Angular project named `+tinymce-angular-demo+`. ++ +[source,sh] +---- +ng new --defaults --skip-git tinymce-angular-demo +---- + +. Go to the new project directory and `+@tinymce/tinymce-angular+`. ++ +[source,sh] +---- +cd tinymce-angular-demo && npm install @tinymce/tinymce-angular +---- + +. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder. + +. Create `+src/app/editor.component.ts+` with the following: ++ +[source,ts] +---- +import { Component } from '@angular/core'; +import { EditorComponent } from '@tinymce/tinymce-angular'; + +// Ensure you import TinyMCE to register the global variable required by other components +import '../tinymce/tinymce'; +// DOM model +import '../tinymce/models/dom/model'; +// Theme +import '../tinymce/themes/silver'; +// Toolbar icons +import '../tinymce/icons/default'; +// Editor styles +import '../tinymce/skins/ui/oxide/skin.js'; +// Content styles, including inline UI like fake cursors +import '../tinymce/skins/content/default/content.js'; +import '../tinymce/skins/ui/oxide/content.js'; + +// Import plugins +import '../tinymce/plugins/advlist'; +import '../tinymce/plugins/autolink'; +import '../tinymce/plugins/link'; +import '../tinymce/plugins/image'; +import '../tinymce/plugins/lists'; +import '../tinymce/plugins/table'; +import '../tinymce/plugins/code'; +import '../tinymce/plugins/help'; +// Include resources that a plugin lazy-loads at the run-time +import '../tinymce/plugins/help/js/i18n/keynav/en.js'; +import '../tinymce/plugins/wordcount'; + +@Component({ + selector: 'app-editor', + standalone: true, + imports: [EditorComponent], + template: ` + + ` +}) +export class MyEditorComponent { + init: EditorComponent['init'] = { + height: 500, + plugins: 'advlist autolink lists link image table code help wordcount', + toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | help' + }; +} +---- + +. Update `+src/app/app.component.ts+` to use `MyEditorComponent`. ++ +[source,ts] +---- +import { Component } from '@angular/core'; +import { MyEditorComponent } from './editor.component'; + +@Component({ + selector: 'app-root', + standalone: true, + imports: [MyEditorComponent], + template: ` +

TinyMCE Angular Demo

+ + ` +}) +export class AppComponent {} +---- + +. Run the Angular development server ++ +[source,sh] +---- +ng serve +---- + +include::partial$integrations/angular-other-resources.adoc[] \ No newline at end of file diff --git a/modules/ROOT/pages/angular-zip.adoc b/modules/ROOT/pages/angular-zip.adoc index 8de91e7b6a..ab5143020a 100644 --- a/modules/ROOT/pages/angular-zip.adoc +++ b/modules/ROOT/pages/angular-zip.adoc @@ -1,7 +1,9 @@ -= Using the {productname} .zip package with the Angular framework += Lazy-load {productname} from .zip package in Angular :navtitle: Using a .zip package -:description: A guide on integrating a .zip version of TinyMCE into the Angular framework. +:description: A guide on integrating a .zip version of TinyMCE into an Angular application. :keywords: integration, integrate, angular :productSource: zip +This guide shows how to self-host and lazy-load {productname} from a `.zip` package into an Angular application. + include::partial$integrations/angular-quick-start.adoc[] diff --git a/modules/ROOT/pages/cloud-quick-start.adoc b/modules/ROOT/pages/cloud-quick-start.adoc index 38d0fcbb70..1458a66601 100644 --- a/modules/ROOT/pages/cloud-quick-start.adoc +++ b/modules/ROOT/pages/cloud-quick-start.adoc @@ -1,11 +1,10 @@ -= Quick start: {productname} with {cloudname} += Quick start: {productname} from {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 -== Install {productname} using the {cloudname} {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}. @@ -13,32 +12,32 @@ include::partial$misc/admon-account-creation-and-social-option.adoc[] == Include the {productname} script -Include the following line of code in the `++` of a HTML page: +Include the following script tag in the `++` of a HTML file: [source,html,subs="attributes+"] ---- ---- -== Initialize {productname} as part of a web form +== Initialize {productname} 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: +Adding this content to the 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 +== Update the "no-api-key" placeholder -To remove the notice: +Update the `+no-api-key+` placeholder in the source script URL (`+ + + + +

{productname} Quick Start Guide

+ - - - -

{productname} Quick Start Guide

-
- -
---- diff --git a/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc b/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc new file mode 100644 index 0000000000..af6ca2542b --- /dev/null +++ b/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc @@ -0,0 +1,54 @@ + ++ +. There are two options for including {productname} into the application: +.. Lazy load {productname} using the provided `TINYMCE_SCRIPT_SRC` dependency provider. ++ +[source,ts] +---- +import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'; + +@Component({ + /* ... */ + standalone: true, + imports: [EditorComponent], + providers: [ + { provide: TINYMCE_SCRIPT_SRC, useValue: '/tinymce/tinymce.min.js' } + ] +}) +---- + +.. Add {productname} to the _global scripts_ tag via `+angular.json+`. ++ +[source,json] +---- +"scripts": [ + "/tinymce.min.js" +] +---- + +. Then update `+angular.json+` to include {productname} and other components as `+assets+`. This will make them available to the application as static assets. ++ +[source,json] +---- +"assets": [ + { + "glob": "**/*", + "input": "/tinymce", + "output": "/tinymce" + } +] +---- + +. Update the `+base_url+` and `+suffix+` options to configurate the location of other components like skins, icons, plugins, etc. ++ +[source,ts] +---- +export class AppComponent { + /* ... */ + init: EditorComponent['init'] = { + /* ... */ + base_url: '/tinymce', // Root for resources + suffix: '.min' // Suffix to use when loading resources + }; +} +---- diff --git a/modules/ROOT/partials/integrations/angular-other-resources.adoc b/modules/ROOT/partials/integrations/angular-other-resources.adoc new file mode 100644 index 0000000000..c26df0d094 --- /dev/null +++ b/modules/ROOT/partials/integrations/angular-other-resources.adoc @@ -0,0 +1,8 @@ +== Other resources + +* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook]. +* For guides on integrating {productname} premium plugins, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins]. +* For information on customizing: +** {productname} integration, see: xref:angular-ref.adoc[Angular framework Technical Reference]. +** {productname}, see: xref:basic-setup.adoc[Basic setup]. +** The Angular application, see: https://angular.dev[the Angular documentation]. \ No newline at end of file diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc index b987085cde..ecad469418 100644 --- a/modules/ROOT/partials/integrations/angular-quick-start.adoc +++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc @@ -1,56 +1,48 @@ :packageName: tinymce-angular -The https://github.com/tinymce/tinymce-angular[Official {productname} Angular component] integrates {productname} into Angular projects. This procedure creates a https://angular.dev/tools/cli/setup-local[basic Angular application] containing a {productname} editor. - -This procedure uses standalone components. If using Angular Modules, see xref:angular-modules[Angular Modules]. - -For examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook]. +The steps below use standalone components. If using Angular Modules, see xref:angular-modules[Angular Modules]. == Prerequisites -This procedure requires https://nodejs.org/[Node.js (and npm)]. +This procedure requires https://nodejs.org/[Node.js (and NPM)]. == Procedure -. On a command line or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] package. +. From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] globally. + [source,sh] ---- npm install -g @angular/cli ---- -. Create a new Angular project named `+tinymce-angular-demo+`. + +. Create a new Angular project named `+tinymce-angular-demo+` using default settings and without Git initialization. + [source,sh] ---- ng new --defaults --skip-git tinymce-angular-demo ---- -. Change into the newly created directory. + +. Move into the project directory and install `+tinymce-angular+`. + [source,sh] ---- -cd tinymce-angular-demo +cd tinymce-angular-demo && npm install @tinymce/tinymce-angular ---- + ifeval::["{productSource}" == "package-manager"] -. Install the `+tinymce+` and `+tinymce-angular+` packages. + +. Install the `+tinymce+`. + [source,sh] ---- -npm install tinymce @tinymce/tinymce-angular +npm install tinymce ---- + -include::partial$integrations/premium-plugins-install-step-link.adoc[] -endif::[] -ifeval::["{productSource}" != "package-manager"] -. Install the `+tinymce-angular+` package. -+ -[source,sh] ----- -npm install @tinymce/tinymce-angular ----- endif::[] -. Using a text editor, open `+/path/to/tinymce-angular-demo/src/app/app.component.ts+` and replace the contents with: -+ + +. Update the root component `+src/app/app.component.ts+` to import and use the `EditorComponent`. ifeval::["{productSource}" == "cloud"] ++ [source,ts,subs="attributes+"] ---- import { Component } from '@angular/core'; @@ -75,9 +67,11 @@ export class AppComponent { } ---- + -. Update the `+apiKey+` option in the editor element to include your link:{accountsignup}/[{cloudname} API key]. +. Update the `+apiKey+` with your own link:{accountsignup}/[{cloudname} API key]. endif::[] ifeval::["{productSource}" != "cloud"] + ++ [source,ts,subs="attributes+"] ---- import { Component } from '@angular/core'; @@ -100,131 +94,20 @@ export class AppComponent { }; } ---- -endif::[] -ifeval::["{productSource}" == "package-manager"] -. Using a text editor, open `+angular.json+` and add {productname} to the `+assets+` property. -+ -[source,json] ----- -"assets": [ - { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" } -] ----- -. Load {productname}. -* To load {productname} when the editor is initialized (also known as lazy loading), add a dependency provider to the component using the `+TINYMCE_SCRIPT_SRC+` token. -+ -[source,ts] ----- -import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'; -/* ... */ -@Component({ - /* ... */ - standalone: true, - imports: [EditorComponent], - providers: [ - { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' } - ] -}) ----- -+ -[NOTE] -==== -When using `+TINYMCE_SCRIPT_SRC+` to lazy load TinyMCE, you can not import premium plugins directly. This will trigger a `tinymce not defined` error in your application because the plugins need to access `tinymce` global variable which doesn't exist at that time. -==== -* To load {productname} when the page or application is loaded: -.. Open `+angular.json+` and add {productname} to the _global scripts_ tag. -+ -[source,json] ----- -"scripts": [ - "node_modules/tinymce/tinymce.min.js" -] ----- -.. Update the editor configuration to include the `+base_url+` and `+suffix+` options. -+ -[source,ts] ----- -export class AppComponent { - /* ... */ - init: EditorComponent['init'] = { - /* ... */ - base_url: '/tinymce', // Root for resources - suffix: '.min' // Suffix to use when loading resources - }; -} ----- endif::[] -ifeval::["{productSource}" == "zip"] -. Add the `+tinymce+` global to the application by: Deploying {productname} independent of the Angular application, or bundling {productname} with the Angular application. -* Deploy {productname} independent of the Angular application -+ -To use an independent deployment of {productname}, add a script to either the `++` or the end of the `++` of the HTML file, such as: -+ -[source,html] ----- - ----- +ifeval::["{productSource}" == "zip"] +. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder. endif::[] -. Run `+ng serve+` to start a dev server +include::partial$integrations/angular-load-tinymce-independently.adoc[] + +. Run the Angular a development server + [source,sh] ---- ng serve ---- -[[angular-modules]] -== Angular Modules -`+EditorModule+` is available to import from `+@tinymce/tinymce-angular+`. Which should be included in your `+my.module.ts+` file. - -ifeval::["{productSource}" == "package-manager"] - -[source,ts] ----- -import { NgModule } from '@angular/core'; -import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'; - -@NgModule({ - /* ... */ - imports: [ - EditorModule - ], - providers: [ - // If you're self hosting and lazy loading TinyMCE from node_modules: - { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' } - ], - /* ... */ -}) -export class MyModule {} ----- - -endif::[] - -ifeval::["{productSource}" != "package-manager"] - -[source,ts] ----- -import { NgModule } from '@angular/core'; -import { EditorModule } from '@tinymce/tinymce-angular'; - -@NgModule({ - /* ... */ - imports: [ - EditorModule - ], - /* ... */ -}) -export class MyModule {} ----- - -endif::[] - -== Next Steps - -* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook]. -* For information on customizing: -** {productname} integration, see: xref:angular-ref.adoc[Angular framework Technical Reference]. -** {productname}, see: xref:basic-setup.adoc[Basic setup]. -** The Angular application, see: https://angular.dev[the Angular documentation]. +include::partial$integrations/angular-other-resources.adoc[] \ No newline at end of file diff --git a/modules/ROOT/partials/integrations/react-quick-start.adoc b/modules/ROOT/partials/integrations/react-quick-start.adoc index 384eddf4ed..e162e411e1 100644 --- a/modules/ROOT/partials/integrations/react-quick-start.adoc +++ b/modules/ROOT/partials/integrations/react-quick-start.adoc @@ -1,38 +1,27 @@ :packageName: tinymce-react -The link:https://github.com/tinymce/tinymce-react[Official {productname} React component] integrates {productname} into React projects. This procedure creates a link:https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc[React SWC plugin] containing a {productname} editor. - -For examples of the {productname} integration, visit https://tinymce.github.io/tinymce-react/[the tinymce-react storybook]. - == Prerequisites -This procedure requires https://nodejs.org/[Node.js (and npm)]. +This procedure requires https://nodejs.org/[Node.js (and NPM)]. == Procedure -. Use the https://github.com/vitejs/vite[Vite] package and the link:https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc[React SWC plugin] to create a new React project named `+tinymce-react-demo+`. +. Use https://github.com/vitejs/vite[Vite] and link:https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc[React SWC] to create a new React project named `+tinymce-react-demo+`. + [source,sh] ---- # NPM 7+, extra double-dash is needed npm create vite@5 tinymce-react-demo -- --template react-swc ---- -. Change to the newly created directory. +. Go to the project directory and install `+@tinymce/tinymce-react+` + [source,sh] ---- -cd tinymce-react-demo +cd tinymce-react-demo && npm install @tinymce/tinymce-react ---- ifeval::["{productSource}" == "cloud"] -. Install the `+@tinymce/tinymce-react+` package. -+ -[source,sh] ----- -npm install @tinymce/tinymce-react ----- - -. Using a text editor, open `+./src/App.jsx+` and replace the contents with: +. Add `Editor` component to `+./src/App.jsx+`. By default, it will fetch {productname} from Tiny Cloud: + [source,jsx] ---- @@ -58,9 +47,9 @@ export default function App() { height: 500, menubar: false, plugins: [ - 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', + 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', - 'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount' + 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount', ], toolbar: 'undo redo | blocks | ' + 'bold italic forecolor | alignleft aligncenter ' + @@ -75,25 +64,17 @@ export default function App() { } ---- + -This JavaScript file will create a component "`+App+`" containing a {productname} editor configured with basic features. - -. Update the `+apiKey+` option in the editor element and include your link:{accountsignup}/[{cloudname} API key]. +. Update the `+apiKey+` prop with your link:{accountsignup}/[{cloudname} API key]. endif::[] ifeval::["{productSource}" == "package-manager"] ifeval::["{productUse}" == "host"] -. Install the `+tinymce+` and `+@tinymce/tinymce-react+` packages. +. Install the `+tinymce+` package. + [source,sh] ---- -npm install tinymce @tinymce/tinymce-react +npm install tinymce ---- + -include::partial$integrations/premium-plugins-install-step-link.adoc[] -[NOTE] -==== -For information on configuring premium plugins when hosting (using `+external_plugins+`), see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins]. -==== -+ . Install `+fs-extra+` as a development dependency: + [source,sh] @@ -101,22 +82,22 @@ For information on configuring premium plugins when hosting (using `+external_pl npm install -D fs-extra ---- + -. Setup a `postinstall` script to copy {productname} to the public directory for hosting + +. Setup a `postinstall` script to copy {productname} to `public` directory, which automatically makes {productname} and other components available as static assets after each installation. + -.postinstall.js +.Add `postinstall.js` file. [source,js] ---- import fse from 'fs-extra'; import path from 'path'; + const topDir = import.meta.dirname; fse.emptyDirSync(path.join(topDir, 'public', 'tinymce')); fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'public', 'tinymce'), { overwrite: true }); -// Only when using tinymce-premium plugins -// fse.emptyDirSync(path.join(topDir, 'public', 'tinymce-premium')); -// fse.copySync(path.join(topDir, 'node_modules', 'tinymce-premium'), path.join(topDir, 'public', 'tinymce-premium'), { overwrite: true }); ---- + + -.package.json +.Update `postinstall` target in `package.json` to run the `postinstall.js` script. [source,json] ---- { @@ -127,22 +108,23 @@ fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'pu } } ---- + +. Exclude `+public/tinymce+` from Git tracking + -..gitignore [source,.gitignore] ---- # ... other rules omitted for brevity ... /public/tinymce/ ---- -. Run the `postinstall` to copy {productname} to the `public` directory +. In this instance, run the `postinstall` to copy {productname} to the `public` directory. + [source,sh] ---- npm run postinstall ---- -. Using a text editor, open `+./src/App.jsx+` and replace the contents with: +. Add `Editor` component to `+./src/App.jsx+` and point `tinymceScriptSrc` to the `tinymce` location. + [source,jsx] ---- @@ -165,18 +147,18 @@ export default function App() { onInit={(_evt, editor) => editorRef.current = editor} initialValue='

This is the initial content of the editor.

' init={{ - height: 500, - menubar: false, - plugins: [ - 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', - 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', - 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount' - ], - toolbar: 'undo redo | blocks | ' + - 'bold italic forecolor | alignleft aligncenter ' + - 'alignright alignjustify | bullist numlist outdent indent | ' + - 'removeformat | help', - content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' + height: 500, + menubar: false, + plugins: [ + 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', + 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', + 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount' + ], + toolbar: 'undo redo | blocks | ' + + 'bold italic forecolor | alignleft aligncenter ' + + 'alignright alignjustify | bullist numlist outdent indent | ' + + 'removeformat | help', + content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' }} /> @@ -185,30 +167,24 @@ export default function App() { } ---- - endif::[] + ifeval::["{productUse}" == "bundle"] -. Install the `+tinymce+` and `+@tinymce/tinymce-react+` packages +. Install the `+tinymce+` package. + [source,sh] ---- -npm install tinymce @tinymce/tinymce-react +npm install tinymce ---- + -include::partial$integrations/premium-plugins-install-step-link.adoc[] -+ -[NOTE] -==== -For information on configuring premium plugins when bundling, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins]. -==== -+ -. Using a text editor, create `+./src/BundledEditor.jsx+` and set the contents to: + +. Add `+./src/BundledEditor.jsx+` and add `Editor` component as below: + [source,jsx] ---- import { Editor } from '@tinymce/tinymce-react'; - -// TinyMCE so the global var exists +// Ensure to import tinymce first as other components expect +// a global variable `tinymce` to exist import 'tinymce/tinymce'; // DOM model import 'tinymce/models/dom/model' @@ -218,48 +194,31 @@ import 'tinymce/themes/silver'; import 'tinymce/icons/default'; // Editor styles import 'tinymce/skins/ui/oxide/skin'; +// Content styles, including inline UI like fake cursors +import 'tinymce/skins/content/default/content'; +import 'tinymce/skins/ui/oxide/content'; -// importing the plugin js. -// if you use a plugin that is not listed here the editor will fail to load -import 'tinymce/plugins/advlist'; +// Import plugins import 'tinymce/plugins/anchor'; +import 'tinymce/plugins/advlist'; import 'tinymce/plugins/autolink'; -import 'tinymce/plugins/autoresize'; -import 'tinymce/plugins/autosave'; import 'tinymce/plugins/charmap'; import 'tinymce/plugins/code'; -import 'tinymce/plugins/codesample'; -import 'tinymce/plugins/directionality'; -import 'tinymce/plugins/emoticons'; +import 'tinymce/plugins/media'; +import 'tinymce/plugins/visualblocks'; import 'tinymce/plugins/fullscreen'; +import 'tinymce/plugins/insertdatetime'; +import 'tinymce/plugins/preview'; import 'tinymce/plugins/help'; +// Include resources that a plugin lazy-loads at the run-time import 'tinymce/plugins/help/js/i18n/keynav/en'; import 'tinymce/plugins/image'; -import 'tinymce/plugins/importcss'; -import 'tinymce/plugins/insertdatetime'; import 'tinymce/plugins/link'; import 'tinymce/plugins/lists'; -import 'tinymce/plugins/media'; -import 'tinymce/plugins/nonbreaking'; -import 'tinymce/plugins/pagebreak'; -import 'tinymce/plugins/preview'; -import 'tinymce/plugins/quickbars'; -import 'tinymce/plugins/save'; import 'tinymce/plugins/searchreplace'; import 'tinymce/plugins/table'; -import 'tinymce/plugins/visualblocks'; -import 'tinymce/plugins/visualchars'; import 'tinymce/plugins/wordcount'; -// importing plugin resources -import 'tinymce/plugins/emoticons/js/emojis'; - -include::partial$integrations/premium-plugins-bundling.adoc[] - -// Content styles, including inline UI like fake cursors -import 'tinymce/skins/content/default/content'; -import 'tinymce/skins/ui/oxide/content'; - export default function BundledEditor(props) { return ( `tree -L 2 public` -[source,text] ----- -public -├── favicon.ico -├── index.html -├── logo192.png -├── logo512.png -├── manifest.json -├── robots.txt -└── tinymce - ├── icons - ├── langs - ├── license.txt - ├── models - ├── plugins - ├── skins - ├── themes - ├── tinymce.d.ts - └── tinymce.min.js ----- -+ -. Using a text editor, open `+./eslint.config.js` and add `+'src/tinymce'+` to the `+ignores+` array. + +. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+public+` folder + +. Add `+'public/tinymce'+` to the `+ignores+` array to `+./eslint.config.js+` file. + .Diff of `.eslint.config.js` [source,patch] ---- export default tseslint.config( - { ignores: ['dist'] }, -+ { ignores: ['dist', 'src/tinymce'] }, ++ { ignores: ['dist', 'public/tinymce'] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ['**/*.{ts,tsx}'], ---- -+ -. Using a text editor, open `+./src/App.jsx+` and replace the contents with: + +. Update `+./src/App.jsx+` as below. *Note*: Remember to point `tinymceScriptSrc` the `tinymce` location. + [source,jsx] ---- @@ -381,64 +315,38 @@ export default function App() { onInit={(_evt, editor) => editorRef.current = editor} initialValue='

This is the initial content of the editor.

' init={{ - height: 500, - menubar: false, - plugins: [ - 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', - 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', - 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount' - ], - toolbar: 'undo redo | blocks | ' + - 'bold italic forecolor | alignleft aligncenter ' + - 'alignright alignjustify | bullist numlist outdent indent | ' + - 'removeformat | help', - content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' - }} + height: 500, + menubar: false, + plugins: [ + 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', + 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', + 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount' + ], + toolbar: 'undo redo | blocks | ' + + 'bold italic forecolor | alignleft aligncenter ' + + 'alignright alignjustify | bullist numlist outdent indent | ' + + 'removeformat | help', + content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' + }} /> ); } ---- -+ -. Update the `+licenseKey+` option in the editor element and include your xref:license-key.adoc[License Key]. endif::[] ifeval::["{productUse}" == "bundle"] -. Install the `+@tinymce/tinymce-react+` and `+script-loader+` packages. +. Install `+script-loader+` package. + [source,sh] ---- -npm install @tinymce/tinymce-react script-loader +npm install script-loader ---- -+ -. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder. Afterwards the directory listing should be similar to below: -+ -.> `tree -L 2 src` -[source,text] ----- -src -├── App.css -├── App.js -├── App.test.js -├── index.css -├── index.js -├── logo.svg -├── reportWebVitals.js -├── setupTests.js -└── tinymce - ├── icons - ├── langs - ├── license.txt - ├── models - ├── plugins - ├── skins - ├── themes - ├── tinymce.d.ts - └── tinymce.min.js ----- -+ -. Using a text editor, open `+./eslint.config.js+` and add `+'src/tinymce'+` to the `+ignores+` array. + +. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder. + +. Add `+'src/tinymce'+` to the `+ignores+` array to `+./eslint.config.js` file. + .Diff of `.eslint.config.js` [source,patch] @@ -457,62 +365,61 @@ index 092408a..1ab8db4 100644 extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ['**/*.{ts,tsx}'], ---- + +. Install `+vite-plugin-commonjs+` and update `vite.config.ts` file to enable support for `+CommonJS+` modules. + -. Using a text editor, create `+./src/BundledEditor.jsx+` and set the contents to: +[source,typescript] +---- +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import commonjs from 'vite-plugin-commonjs'; + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react(), commonjs()], +}); +---- + +. Create `+./src/BundledEditor.jsx+` and set the contents to: + [source,jsx] ---- import { Editor } from '@tinymce/tinymce-react'; - -// TinyMCE so the global var exists -import './tinymce/tinymce.min.js'; +// Ensure to import `tinymce` first as other components expect +// a global variable `tinymce` to exist +import './tinymce/tinymce'; // DOM model -import './tinymce/models/dom/model.min.js' +import './tinymce/models/dom/model' // Theme -import './tinymce/themes/silver/theme.min.js'; +import './tinymce/themes/silver'; // Toolbar icons -import './tinymce/icons/default/icons.min.js'; +import './tinymce/icons/default'; // Editor styles -import './tinymce/skins/ui/oxide/skin.min.js'; - -// importing the plugin index.js file. -// if you use a plugin that is not listed here the editor will fail to load -import './tinymce/plugins/advlist'; +import './tinymce/skins/ui/oxide/skin'; +// Content styles, including inline UI like fake cursors +import './tinymce/skins/content/default/content'; +import './tinymce/skins/ui/oxide/content'; +// Import plugins import './tinymce/plugins/anchor'; +import './tinymce/plugins/advlist'; import './tinymce/plugins/autolink'; -import './tinymce/plugins/autoresize'; -import './tinymce/plugins/autosave'; import './tinymce/plugins/charmap'; import './tinymce/plugins/code'; -import './tinymce/plugins/codesample'; -import './tinymce/plugins/directionality'; -import './tinymce/plugins/emoticons'; +import './tinymce/plugins/media'; +import './tinymce/plugins/visualblocks'; import './tinymce/plugins/fullscreen'; +import './tinymce/plugins/insertdatetime'; +import './tinymce/plugins/preview'; import './tinymce/plugins/help'; +// Include resources that a plugin lazy-loads at the run-time +import './tinymce/plugins/help/js/i18n/keynav/en'; import './tinymce/plugins/image'; -import './tinymce/plugins/importcss'; -import './tinymce/plugins/insertdatetime'; import './tinymce/plugins/link'; import './tinymce/plugins/lists'; -import './tinymce/plugins/media'; -import './tinymce/plugins/nonbreaking'; -import './tinymce/plugins/pagebreak'; -import './tinymce/plugins/preview'; -import './tinymce/plugins/quickbars'; -import './tinymce/plugins/save'; import './tinymce/plugins/searchreplace'; import './tinymce/plugins/table'; -import './tinymce/plugins/visualblocks'; -import './tinymce/plugins/visualchars'; import './tinymce/plugins/wordcount'; -// importing plugin resources -import './tinymce/plugins/emoticons/js/emojis.js'; - -// Content styles, including inline UI like fake cursors -import './tinymce/skins/content/default/content.js'; -import './tinymce/skins/ui/oxide/content.js'; - export default function BundledEditor(props) { return ( /my_react_application+. - -== Next Steps +== Other resources ifeval::["{productUse}" == "bundle"] * For information on bundling, see: xref:introduction-to-bundling-tinymce.adoc[] endif::[] -* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-react/[the tinymce-react storybook]. +* For examples of the {productname} React integration, see: https://tinymce.github.io/tinymce-react/[the tinymce-react storybook]. +* For guides on integrating {productname} premium plugins, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins]. * For information on customizing: ** {productname} integration, see: xref:react-ref.adoc[]. ** {productname}, see: xref:basic-setup.adoc[]. diff --git a/modules/ROOT/partials/module-loading/bundling-procedure-intro.adoc b/modules/ROOT/partials/module-loading/bundling-procedure-intro.adoc index 8e5283e0b2..334bcb4412 100644 --- a/modules/ROOT/partials/module-loading/bundling-procedure-intro.adoc +++ b/modules/ROOT/partials/module-loading/bundling-procedure-intro.adoc @@ -1,3 +1 @@ -The following procedure will assist with bundling {installtype} version of {productname} with {bundler} using {syntax}. The procedure assumes the user has experience with {bundler} and {syntax}. The following steps provide a working example for bundling a basic {productname} configuration with {bundler}, and provides links to reference pages at the end of the procedure for bundling additional customizations with the editor. - -If {productname} will be used with a JavaScript framework (such as React.js, Angular, or Vue.js) the bundle will also require the relevant framework integration package (where available). For a list of supported framework integrations, see: xref:installation.adoc[Installing {productname}]. +The following procedure will assist with bundling {installtype} version of {productname} with {bundler} using {syntax}. The procedure assumes the user has experience with {bundler} and {syntax}. The following steps provide a working example for bundling a basic {productname} configuration with {bundler}. \ No newline at end of file diff --git a/modules/ROOT/partials/module-loading/bundling-webpack-cjs-npm_editor.adoc b/modules/ROOT/partials/module-loading/bundling-webpack-cjs-npm_editor.adoc index 88d08b96ac..ac6fe25d17 100644 --- a/modules/ROOT/partials/module-loading/bundling-webpack-cjs-npm_editor.adoc +++ b/modules/ROOT/partials/module-loading/bundling-webpack-cjs-npm_editor.adoc @@ -30,11 +30,6 @@ require('tinymce/plugins/table'); require('tinymce/plugins/help'); require('tinymce/plugins/help/js/i18n/keynav/en'); -/* Import premium plugins from NPM */ -require('tinymce-premium/plugins/advcode'); -require('tinymce-premium/plugins/licensekeymanager'); -require('tinymce-premium/plugins/tinycomments'); - /* content UI CSS is required (using the default oxide skin) */ const contentUiSkinCss = require('tinymce/skins/ui/oxide/content.css'); @@ -50,8 +45,7 @@ exports.render = () => { toolbar: 'bold italic | bullist numlist | link emoticons', skin: false, content_css: false, - content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(), -include::partial$module-loading/bundling-external-plugins-npm.adoc[] + content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString() }); }; ---- diff --git a/modules/ROOT/partials/module-loading/bundling-webpack-cjs-zip_editor.adoc b/modules/ROOT/partials/module-loading/bundling-webpack-cjs-zip_editor.adoc index d5ac5af017..711eea8259 100644 --- a/modules/ROOT/partials/module-loading/bundling-webpack-cjs-zip_editor.adoc +++ b/modules/ROOT/partials/module-loading/bundling-webpack-cjs-zip_editor.adoc @@ -30,10 +30,6 @@ require('../tinymce/js/tinymce/plugins/table'); require('../tinymce/js/tinymce/plugins/help'); require('../tinymce/js/tinymce/plugins/help/js/i18n/keynav/en'); -include::partial$integrations/premium-plugins-bundling.adoc[] -/* From ZIP download - download separately and add to /src/plugins */ -/* import './plugins/'; */ - /* content UI CSS is required (using the default oxide skin) */ const contentUiSkinCss = require('../tinymce/js/tinymce/skins/ui/oxide/content.css'); diff --git a/modules/ROOT/partials/module-loading/bundling-webpack-es6-npm_editor.adoc b/modules/ROOT/partials/module-loading/bundling-webpack-es6-npm_editor.adoc index 16bf328815..9ec20931bd 100644 --- a/modules/ROOT/partials/module-loading/bundling-webpack-es6-npm_editor.adoc +++ b/modules/ROOT/partials/module-loading/bundling-webpack-es6-npm_editor.adoc @@ -30,8 +30,6 @@ import 'tinymce/plugins/table'; import 'tinymce/plugins/help'; import 'tinymce/plugins/help/js/i18n/keynav/en'; -include::partial$integrations/premium-plugins-bundling.adoc[] - /* content UI CSS is required (using the default oxide skin) */ import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.css'; @@ -46,8 +44,7 @@ export function render () { toolbar: 'bold italic | bullist numlist | link emoticons', skin: false, content_css: false, - content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(), -include::partial$module-loading/bundling-external-plugins-npm.adoc[] + content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString() }); }; ---- diff --git a/modules/ROOT/partials/module-loading/bundling-webpack-es6-zip_editor.adoc b/modules/ROOT/partials/module-loading/bundling-webpack-es6-zip_editor.adoc index 2bd49c829b..f3e043feda 100644 --- a/modules/ROOT/partials/module-loading/bundling-webpack-es6-zip_editor.adoc +++ b/modules/ROOT/partials/module-loading/bundling-webpack-es6-zip_editor.adoc @@ -30,10 +30,6 @@ import '../tinymce/js/tinymce/plugins/table'; import '../tinymce/js/tinymce/plugins/help'; import '../tinymce/js/tinymce/plugins/help/js/i18n/keynav/en'; -include::partial$integrations/premium-plugins-bundling.adoc[] -/* From ZIP download - download separately and add to /src/plugins */ -/* import './plugins/'; */ - /* content UI CSS is required (using the default oxide skin) */ import contentUiSkinCss from '../tinymce/js/tinymce/skins/ui/oxide/content.css'; @@ -48,8 +44,7 @@ export function render () { toolbar: 'bold italic | bullist numlist | link emoticons', skin: false, content_css: false, - content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(), -include::partial$module-loading/bundling-external-plugins-zip.adoc[] + content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString() }); }; ---- \ No newline at end of file diff --git a/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc b/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc index 920eb5bebf..989510cf4f 100644 --- a/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc +++ b/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc @@ -1,5 +1,5 @@ ifeval::[{is_zip_install} == true] -. Add the following development dependencies to the project. +. Add the following dependencies to your project. * https://www.npmjs.com/package/webpack[`+webpack+`] * https://www.npmjs.com/package/webpack-cli[`+webpack-cli+`] * https://www.npmjs.com/package/mini-css-extract-plugin[`+mini-css-extract-plugin+`] diff --git a/package.json b/package.json index cfa39cc679..b038529b0b 100644 --- a/package.json +++ b/package.json @@ -42,5 +42,6 @@ "http-server": "^0.12.3", "nodemon": "^3.1.10", "npm-run-all": "^4.1.5" - } + }, + "dependencies": {} }