You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Improve React, Vuejs and Angular integration pages (#3948)
* Various changes and remove instructions related to premium plugins from the bundling with webpack guide
* more changes
* Update quick start cloud
* Update cloud and bundle docs of react
* More updates to React guides
* Update angular docs
* Fix syntax
* Correct instructions for Angular zip package
* Another go at React docs
* Add a page for angular zip bundle
* Update vue.js integration docs
* Small changes
* Update modules/ROOT/pages/introduction-to-bundling-tinymce.adoc
Co-authored-by: Millie <millie.macdonald@tiny.cloud>
* Resolve comments
* Update modules/ROOT/pages/angular-pm-bundle.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Update modules/ROOT/pages/angular-zip-bundle.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Update modules/ROOT/pages/angular-zip-bundle.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Update modules/ROOT/pages/angular-zip-bundle.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Update modules/ROOT/pages/angular-zip.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Accept suggestions
* Resolve more comments
* More
* Lowercase npm
* Remove the commented license key info
---------
Co-authored-by: Millie <millie.macdonald@tiny.cloud>
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
= Using {productname} from the Tiny Cloud CDN with the Angular framework
1
+
= Using {productname} from Tiny Cloud in Angular
2
2
:navtitle: Angular
3
-
:description: A guide on integrating TinyMCE from the Tiny Cloud into the Angular framework.
3
+
:description: A guide on using TinyMCE from the Tiny Cloud in an Angular project.
4
4
:keywords: integration, integrate, angular
5
5
:productSource: cloud
6
6
7
+
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].
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.
9
-
10
-
For examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
8
+
This guide shows how to integrate {productname} in an Angular application using the link:https://github.com/tinymce/tinymce-angular[{productname} Angular component].
11
9
12
10
== Prerequisites
13
11
14
12
This procedure requires https://nodejs.org/[Node.js (and NPM)].
15
13
16
14
== Procedure
17
15
18
-
. On a command line or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] package.
16
+
. From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool^] globally.
19
17
+
20
18
[source,sh]
21
19
----
22
20
npm install -g @angular/cli
23
21
----
22
+
24
23
. Create a new Angular project named `+tinymce-angular-demo+`.
25
24
+
26
25
[source,sh]
27
26
----
28
27
ng new --defaults --skip-git tinymce-angular-demo
29
28
----
30
-
. Change into the newly created directory.
31
-
+
32
-
[source,sh]
33
-
----
34
-
cd tinymce-angular-demo
35
-
----
36
-
. Install the `+tinymce+` and `+@tinymce/tinymce-angular+` packages.
29
+
30
+
. Navigate to the newly project directory and install `+tinymce+` and `+@tinymce/tinymce-angular+`.
37
31
+
38
32
[source,sh]
39
33
----
40
-
npm install tinymce @tinymce/tinymce-angular
34
+
cd tinymce-angular-demo && npm install tinymce @tinymce/tinymce-angular
** The Angular application, see: https://angular.dev[the Angular documentation].
152
-
* 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].
= Using the {productname}package with the Angular framework
1
+
= Lazy-loading {productname}in Angular
2
2
:navtitle: Using a package manager
3
-
:description: A guide on integrating the TinyMCE package into the Angular framework.
3
+
:description: A guide on integrating the TinyMCE package into an Angular application.
4
4
:keywords: integration, integrate, angular
5
5
:productSource: package-manager
6
6
7
+
This guide shows how to integrate {productname} in an Angular application using the link:https://github.com/tinymce/tinymce-angular[{productname} Angular component].
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^].
9
+
10
+
== Prerequisites
11
+
12
+
This procedure requires link:https://nodejs.org/[Node.js (and NPM)^].
13
+
14
+
== Procedure
15
+
16
+
. From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool^] globally.
17
+
+
18
+
[source,sh]
19
+
----
20
+
npm install -g @angular/cli
21
+
----
22
+
23
+
. Create a new Angular project named `+tinymce-angular-demo+`.
24
+
+
25
+
[source,sh]
26
+
----
27
+
ng new --defaults --skip-git tinymce-angular-demo
28
+
----
29
+
30
+
. Navigate to the new project directory and `+@tinymce/tinymce-angular+`.
31
+
+
32
+
[source,sh]
33
+
----
34
+
cd tinymce-angular-demo && npm install @tinymce/tinymce-angular
35
+
----
36
+
37
+
. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder.
38
+
39
+
. Create `+src/app/editor.component.ts+` with the following:
40
+
+
41
+
[source,ts]
42
+
----
43
+
import { Component } from '@angular/core';
44
+
import { EditorComponent } from '@tinymce/tinymce-angular';
45
+
46
+
// Ensure you import TinyMCE to register the global variable required by other components
47
+
import '../tinymce/tinymce';
48
+
// DOM model
49
+
import '../tinymce/models/dom/model';
50
+
// Theme
51
+
import '../tinymce/themes/silver';
52
+
// Toolbar icons
53
+
import '../tinymce/icons/default';
54
+
// Editor styles
55
+
import '../tinymce/skins/ui/oxide/skin.js';
56
+
// Content styles, including inline UI like fake cursors
= Using the {productname} .zip package with the Angular framework
1
+
= Lazy-loading {productname}from a .zip package in Angular
2
2
:navtitle: Using a .zip package
3
-
:description: A guide on integrating a .zip version of TinyMCE into the Angular framework.
3
+
:description: A guide on integrating a .zip version of TinyMCE into an Angular application.
4
4
:keywords: integration, integrate, angular
5
5
:productSource: zip
6
6
7
+
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^].
Copy file name to clipboardExpand all lines: modules/ROOT/pages/cloud-quick-start.adoc
+8-9Lines changed: 8 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,44 +1,43 @@
1
-
= Quick start: {productname}with{cloudname}
1
+
= Quick start: {productname}from{cloudname}
2
2
:navtitle: Quick start: Cloud
3
3
:description_short: Setup a basic {productname} {productmajorversion} editor using the {cloudname}.
4
4
:description: Get an instance of {productname} {productmajorversion} up and running using the {cloudname}.
5
5
:keywords: tinymce, script, textarea
6
6
:productSource: cloud
7
7
8
-
== Install {productname} using the {cloudname}
9
8
10
9
{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}.
Adding this content to an HTML file and opening it in a web browser will load a {productname} editor, such as:
26
+
Adding this content to the HTML file and opening it in a web browser will load a {productname} editor, such as:
28
27
29
28
liveDemo::default[]
30
29
31
-
== Update the "no-api-key" placeholder with your API key
30
+
== Update the "no-api-key" placeholder
32
31
33
-
To remove the notice:
32
+
Update the `+no-api-key+` placeholder in the source script URL (`+<script src=https://.../no-api-key/tinymce/{productmajorversion}/tinymce.min.js+/>`) with your {cloudname} API key, which is created when signing up to the link:{accountsignup}/[{cloudname}].
33
+
34
+
Providing a valid API key also removes the notice:
34
35
35
36
[WARNING]
36
37
====
37
38
**This domain is not registered with {cloudname}. Please see the quick start guide or create an account.**
38
39
====
39
40
40
-
Update the `+no-api-key+` placeholder in the source script (`+<script src=...+`) with your {cloudname} API key, which is created when signing up to the link:{accountsignup}/[{cloudname}].
41
-
42
41
Signing up for a {cloudname} API key will also provide a trial of the xref:plugins.adoc#premium-plugins[Premium Plugins].
The following guides and reference pages assist with bundling {productname} using a module loader, such as Webpack, Rollup.js, and Browserify. {productname} is a modular platform that is designed to lazy-load libraries when they are required. This allows developers to only bundle the components of {productname} that are required and keep the resulting bundle as small as possible.
7
+
The following guides and reference pages assist with bundling {productname}into your project using a module bundler, such as Webpack, Rollup.js, and Browserify.
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].
0 commit comments