Improve React, Vuejs 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 an Angular project. | ||
| :keywords: integration, integrate, angular | ||
| :productSource: cloud | ||
|
|
||
| This guide shows how to integrate {productname} from Tiny Cloud into an Angular application using the link: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 @@ | ||
| = Lazy-loading {productname} 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 {productname} in an Angular application using the link: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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| = Bundling TinyMCE from a .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 using the link:https://github.com/tinymce/tinymce-angular[{productname} Angular component]. | ||
|
|
||
| == 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 `+app.component.ts+` to import `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 | ||
|
Contributor
There was a problem hiding this comment. Same problem as before, the current directory is still the directory above the folder we want to 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-loading {productname} from a .zip package in Angular | ||
| :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 using the link: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
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 the link:https://github.com/tinymce/tinymce-react[{productname} React component]. | ||
|
|
||
| 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 @@ | ||
| = Bundling TinyMCE in React | ||
| :navtitle: Bundle TinyMCE in a React application | ||
| :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 bundle TinyMCE in a React application with the link:https://github.com/tinymce/tinymce-react[{productname} React component]. | ||
|
|
||
| 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-hosting 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 the link:https://github.com/tinymce/tinymce-react[{productname} React component]. | ||
|
|
||
| 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.
I should point out since you combined the
cdwith thenpm installthe user is in the wrong directory to run this command...