Improvements on React and Angular integration pages #3948
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,10 @@ | ||
| = Using {productname} from Tiny Cloud in Angular | ||
| :navtitle: Angular | ||
| :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[] | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,9 @@ | ||
| = Using {productname} from NPM in Angular | ||
| :navtitle: Using a package manager | ||
| :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[] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,119 @@ | ||||||
| = Bundling TinyMCE from .zip package in Angular | ||||||
|
Contributor
There was a problem hiding this comment.
Suggested change
|
||||||
| :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: ` | ||||||
| <editor | ||||||
| [init]="init" | ||||||
| licenseKey="gpl" | ||||||
| /> | ||||||
| ` | ||||||
| }) | ||||||
| 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: ` | ||||||
| <h1>TinyMCE Angular Demo</h1> | ||||||
| <app-editor /> | ||||||
| ` | ||||||
| }) | ||||||
| export class AppComponent {} | ||||||
| ---- | ||||||
|
|
||||||
| . Run the Angular development server | ||||||
| + | ||||||
| [source,sh] | ||||||
| ---- | ||||||
| ng serve | ||||||
| ---- | ||||||
|
|
||||||
| include::partial$integrations/angular-other-resources.adoc[] | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,7 +1,9 @@ | ||||||
| = Lazy-load {productname} from .zip package in Angular | ||||||
|
Contributor
There was a problem hiding this comment.
Suggested change
|
||||||
| :navtitle: Using a .zip package | ||||||
| :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. | ||||||
|
Contributor
There was a problem hiding this comment.
Suggested change
? |
||||||
|
|
||||||
| include::partial$integrations/angular-quick-start.adoc[] | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,7 +1,10 @@ | ||||||
| = Using TinyMCE from Tiny Cloud in React | ||||||
| :navtitle: React | ||||||
| :description: A guide on integrating TinyMCE from the Tiny Cloud into React. | ||||||
| :keywords: integration, integrate, react, reactjs, vite, tinymce-react, tinymce | ||||||
| :productSource: cloud | ||||||
|
|
||||||
|
|
||||||
| This guide shows how to integrate TinyMCE from Tiny Cloud into a React application using link:https://github.com/tinymce/tinymce-react[{productname} React component]. | ||||||
|
Contributor
There was a problem hiding this comment.
Suggested change
? |
||||||
|
|
||||||
| include::partial$integrations/react-quick-start.adoc[] | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,8 +1,10 @@ | ||||||
| = Bundle TinyMCE in React | ||||||
| :navtitle: Bundle TinyMCE in a React project using a module bundler | ||||||
| :description: A guide on integrating the TinyMCE package into React by bundling it. | ||||||
| :keywords: integration, integrate, react, reactjs, vite, tinymce-react, bundle | ||||||
| :productSource: package-manager | ||||||
| :productUse: bundle | ||||||
|
|
||||||
| This guide shows how to integrate TinyMCE in a React application with link:https://github.com/tinymce/tinymce-react[{productname} React component]. | ||||||
|
Contributor
There was a problem hiding this comment.
Suggested change
? |
||||||
|
|
||||||
| include::partial$integrations/react-quick-start.adoc[] | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,9 +1,11 @@ | ||||||
| = Self-host TinyMCE in React | ||||||
| :page-aliases: react-pm.adoc | ||||||
| :navtitle: Self-host TinyMCE in React | ||||||
| :description: A guide on integrating TinyMCE into React by self-hosting it. | ||||||
| :keywords: integration, integrate, react, reactjs, vite, tinymce-react, host | ||||||
| :productSource: package-manager | ||||||
| :productUse: host | ||||||
|
|
||||||
| This guide shows how to self-host TinyMCE in a React application using link:https://github.com/tinymce/tinymce-react[{productname} React component]. | ||||||
|
Contributor
There was a problem hiding this comment.
Suggested change
? |
||||||
|
|
||||||
| include::partial$integrations/react-quick-start.adoc[] | ||||||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.