Small changes

tiny-ben-tran · tiny-ben-tran · commit 9a1220912b89 · 2026-01-06T15:20:39.000+10:30
diff --git a/modules/ROOT/pages/angular-cloud.adoc b/modules/ROOT/pages/angular-cloud.adoc
@@ -1,10 +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.
+: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 https://github.com/tinymce/tinymce-angular[{productname} Angular component].
+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[]
diff --git a/modules/ROOT/pages/angular-pm-bundle.adoc b/modules/ROOT/pages/angular-pm-bundle.adoc
@@ -1,11 +1,11 @@
-= Bundling TinyMCE from NPM in an Angular application
+= Bundling TinyMCE in Angular
 :navtitle: Using a package manager with bundling
 :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
 
-This guide shows how to integrate the NPM version of {productname} in an Angular application.
+This guide shows how to integrate {productname} in an Angular application using the link:https://github.com/tinymce/tinymce-angular[{productname} Angular component].
 
 == Prerequisites
 
@@ -91,7 +91,7 @@ export class MyEditorComponent {
 ----
 +
 
-. Open `+src/app/app.component.ts+` and update it to use `MyEditorComponent`:
+. Open `+app.component.ts+` and import `+MyEditorComponent+`.
 +
 [source,ts]
 ----
diff --git a/modules/ROOT/pages/angular-pm.adoc b/modules/ROOT/pages/angular-pm.adoc
@@ -1,9 +1,9 @@
-= Using {productname} from NPM in Angular
+= 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 the NPM version of {productname} in an Angular application.
+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[]
diff --git a/modules/ROOT/pages/angular-zip-bundle.adoc b/modules/ROOT/pages/angular-zip-bundle.adoc
@@ -1,11 +1,11 @@
-= Bundling TinyMCE from .zip package in Angular
+= 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.
+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
 
@@ -90,7 +90,7 @@ export class MyEditorComponent {
 }
 ----
 
-. Update `+src/app/app.component.ts+` to use `MyEditorComponent`.
+. Update `+app.component.ts+` to import `MyEditorComponent`.
 +
 [source,ts]
 ----
diff --git a/modules/ROOT/pages/angular-zip.adoc b/modules/ROOT/pages/angular-zip.adoc
@@ -1,9 +1,9 @@
-= Lazy-load {productname} from .zip package in Angular
+= 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.
+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[]
diff --git a/modules/ROOT/pages/react-cloud.adoc b/modules/ROOT/pages/react-cloud.adoc
@@ -5,6 +5,6 @@
 :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].
+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[]
diff --git a/modules/ROOT/pages/react-pm-bundle.adoc b/modules/ROOT/pages/react-pm-bundle.adoc
@@ -1,10 +1,10 @@
-= Bundle TinyMCE in React
-:navtitle: Bundle TinyMCE in a React project using a module bundler
+= 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 integrate TinyMCE in a React application with link:https://github.com/tinymce/tinymce-react[{productname} React component].
+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[]
diff --git a/modules/ROOT/pages/react-pm-host.adoc b/modules/ROOT/pages/react-pm-host.adoc
@@ -1,11 +1,11 @@
-= Self-host TinyMCE in React
+= 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 link:https://github.com/tinymce/tinymce-react[{productname} React component].
+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[]
diff --git a/modules/ROOT/pages/react-zip-bundle.adoc b/modules/ROOT/pages/react-zip-bundle.adoc
@@ -1,10 +1,10 @@
-= Bundling TinyMCE from .zip package in React
+= Bundling TinyMCE from a .zip package in React
 :navtitle: Using a .zip package with a module bundler
 :description: A guide on bundling a .zip version of TinyMCE in a React project.
 :keywords: integration, integrate, react, reactjs, vite, tinymce-react, bundle
 :productSource: zip
 :productUse: bundle
 
-This shows how to self-host and bundle {productname} from a `.zip` package into a React application.
+This shows how to self-host and bundle {productname} from a `.zip` package into a React application using the link:https://github.com/tinymce/tinymce-react[{productname} React component].
 
 include::partial$integrations/react-quick-start.adoc[]
diff --git a/modules/ROOT/pages/react-zip-host.adoc b/modules/ROOT/pages/react-zip-host.adoc
@@ -1,11 +1,11 @@
-= Lazy-loading TinyMCE from .zip package in React
+= Lazy-loading TinyMCE from a .zip package in React
 :page-aliases: react-zip.adoc
 :navtitle: Using a TinyMCE .zip package in React
 :description: A guide on lazy-loading a .zip version of TinyMCE in a React application.
 :keywords: integration, integrate, react, reactjs, vite, tinymce-react, host
 :productSource: zip
 :productUse: host
 
-This guide shows how to self-host and lazy-load {productname} from a `.zip` package into a React application.
+This guide shows how to self-host and lazy-load {productname} from a `.zip` package into a React application using the link:https://github.com/tinymce/tinymce-react[{productname} React component].
 
 include::partial$integrations/react-quick-start.adoc[]
diff --git a/modules/ROOT/pages/vue-cloud.adoc b/modules/ROOT/pages/vue-cloud.adoc
@@ -1,9 +1,9 @@
-= Using TinyMCE from the Tiny Cloud in Vue.js
+= Using TinyMCE from Tiny Cloud in Vue.js
 :navtitle: Vue.js
 :description: A guide on integrating TinyMCE from the Tiny Cloud into a Vue.js application.
 :keywords: integration, integrate, vue, vuejs, tinymce-vue
 :productSource: cloud
 
-This guide shows how to integrate {productname} from Tiny Cloud into a Vue.js application using link:https://github.com/tinymce/tinymce-vue[{productname} Vue.js component].
+This guide shows how to integrate {productname} from Tiny Cloud into a Vue.js application using the link:https://github.com/tinymce/tinymce-vue[{productname} Vue.js component].
 
 include::partial$integrations/vue-quick-start.adoc[]
diff --git a/modules/ROOT/pages/vue-pm-bundle.adoc b/modules/ROOT/pages/vue-pm-bundle.adoc
@@ -1,11 +1,11 @@
-= Bundling TinyMCE in a Vue.js application
+= Bundling TinyMCE in Vue.js
 :navtitle: Using a package manager with bundling
 :description: A guide on bundling TinyMCE with a Vue.js application using a module loader.
 :keywords: integration, integrate, vue, vuejs, bundle, webpack, vite
 :productSource: package-manager
 :packageName: @tinymce/tinymce-vue
 
-This guide shows how to bundle {productname} into a Vue.js application using link:https://github.com/tinymce/tinymce-vue[{productname} Vue.js component].
+This guide shows how to bundle {productname} into a Vue.js application using the link:https://github.com/tinymce/tinymce-vue[{productname} Vue.js component].
 
 == Prerequisites
 
diff --git a/modules/ROOT/pages/vue-pm.adoc b/modules/ROOT/pages/vue-pm.adoc
@@ -1,9 +1,9 @@
-= Lazy-load TinyMCE in Vue.js
+= Lazy-loading TinyMCE in Vue.js
 :navtitle: Using a package manager
 :description: A guide on lazy-loading the TinyMCE into a Vue.js application.
 :keywords: integration, integrate, vue, vuejs, tinymce-vue
 :productSource: lazy-load
 
-This guide shows how to lazy-load {productname} in a Vue.js application using link:https://github.com/tinymce/tinymce-vue[{productname} Vue.js component].
+This guide shows how to self-host and lazy-load {productname} in a Vue.js application using the link:https://github.com/tinymce/tinymce-vue[{productname} Vue.js component].
 
 include::partial$integrations/vue-quick-start.adoc[]
diff --git a/modules/ROOT/pages/vue-zip.adoc b/modules/ROOT/pages/vue-zip.adoc
@@ -1,9 +1,9 @@
-= Lazy-load TinyMCE from .zip package in Vue.js application
+= Lazy-loading TinyMCE from a .zip package in Vue.js
 :navtitle: Using a .zip package
 :description: A guide on integrating a .zip version of TinyMCE into the Vue.js framework.
 :keywords: integration, integrate, vue, vuejs, tinymce-vue
 :productSource: zip
 
-This guide shows how to self-host TinyMCE from .zip package in a Vue.js application using link:https://github.com/tinymce/tinymce-vue[{productname} Vue.js component].
+This guide shows how to self-host and lazy-load TinyMCE from a .zip package in a Vue.js application using the link:https://github.com/tinymce/tinymce-vue[{productname} Vue.js component].
 
 include::partial$integrations/vue-quick-start.adoc[]
diff --git a/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc b/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
@@ -1,6 +1,6 @@
 
 +
-. There are two options for including {productname} into the application:
+. There are two options for including {productname} into an application:
 .. Lazy load {productname} using the provided `TINYMCE_SCRIPT_SRC` dependency provider.
 +
 [source,ts]
diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc
@@ -40,7 +40,7 @@ npm install tinymce
 +
 endif::[]
 
-. Update the root component `+src/app/app.component.ts+` to import and use the `EditorComponent`.
+. Update the root component `+app.component.ts+` to import `+EditorComponent+` component.
 ifeval::["{productSource}" == "cloud"]
 +
 [source,ts,subs="attributes+"]
@@ -110,4 +110,5 @@ include::partial$integrations/angular-load-tinymce-independently.adoc[]
 ng serve
 ----
 
+
 include::partial$integrations/angular-other-resources.adoc[]
diff --git a/modules/ROOT/partials/integrations/angular-tech-ref.adoc b/modules/ROOT/partials/integrations/angular-tech-ref.adoc
@@ -25,6 +25,9 @@
 ** xref:supported-tinymce-events[Supported {productname} events]
 ** xref:allowedevents[`+allowedEvents+`]
 ** xref:ignoreevents[`+ignoreEvents+`]
+* xref:angular-modules[`+Angular module+`]
+
+
 
 [[supported-angular-versions]]
 == Supported Angular versions
@@ -92,7 +95,7 @@ Add the `+EditorModule+` to `+@NgModule({imports})+`:
 
 The editor accepts the following properties:
 
-[source,html,subs="attributes+"]
+[source,jsx]
 ----
 <editor
   apiKey="no-api-key"
@@ -518,7 +521,7 @@ Used to provide an allow-list of valid events to trigger from the editor to the
 
 ==== Example: using `+allowedEvents+`
 
-[source,html]
+[source,jsx]
 ----
 <editor allowedEvents="onMouseDown,onKeyDown" />
 ----
@@ -536,7 +539,7 @@ Used to block a list of events from the `+tinymce-angular+` component.
 
 ==== Example: using `+ignoreEvents+`
 
-[source,html]
+[source,jsx]
 ----
 <editor ignoreEvents="onMouseEnter,onMouseLeave,onMouseOut,onMouseMove" />
 ----
diff --git a/modules/ROOT/partials/integrations/react-quick-start.adoc b/modules/ROOT/partials/integrations/react-quick-start.adoc
@@ -21,7 +21,7 @@ cd tinymce-react-demo && npm install @tinymce/tinymce-react
 ----
 
 ifeval::["{productSource}" == "cloud"]
-. Add `Editor` component to `+./src/App.jsx+`. By default, it will fetch {productname} from Tiny Cloud:
+. Update `+App.jsx+` to include `+Editor+` from `+tinymce/tinymce-react+` as below.
 +
 [source,jsx]
 ----
@@ -124,7 +124,7 @@ fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'pu
 npm run postinstall
 ----
 
-. Add `Editor` component to `+./src/App.jsx+` and point `tinymceScriptSrc` to the `tinymce` location.
+. Update `+App.jsx+` to include `+Editor+` component. **Note**: `+tinymceSrcScript+` references to the public `+tinymce+` using absolute root path.
 +
 [source,jsx]
 ----
@@ -178,7 +178,7 @@ npm install tinymce
 ----
 +
 
-. Add `+./src/BundledEditor.jsx+` and add `Editor` component as below:
+. Add `+BundledEditor.jsx+` and import `+Editor+` and `+tinymce+` components as below.
 +
 [source,jsx]
 ----
@@ -229,7 +229,7 @@ export default function BundledEditor(props) {
 }
 ----
 
-. Add `BundledEditor` component into `+./src/App.jsx+` with necessary configurations.
+. Add `BundledEditor` component with configuration into `+App.jsx+`.
 +
 [source,jsx]
 ----
@@ -277,7 +277,7 @@ endif::[]
 ifeval::["{productSource}" == "zip"]
 ifeval::["{productUse}" == "host"]
 
-. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+public+` folder
+. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+public+` folder. This will make `+tinymce+` avaiable to the application as static assets.
 
 . Add `+'public/tinymce'+` to the `+ignores+` array to `+./eslint.config.js+` file.
 +
@@ -292,7 +292,7 @@ export default tseslint.config(
      files: ['**/*.{ts,tsx}'],
 ----
 
-. Update `+App.jsx+` as below. *Note*: Remember to point to `tinymceScriptSrc` to the `tinymce` location.
+. Update `+App.jsx+` with the below code snippet. **Note**: `+tinymceSrcScript+` references to the public `+tinymce+` using absolute root path.
 +
 [source,jsx]
 ----
@@ -380,7 +380,7 @@ export default defineConfig({
 });
 ----
 
-. Create `+./src/BundledEditor.jsx+` and set the contents to:
+. Create `+./src/BundledEditor.jsx+` with the following code snippet:
 +
 [source,jsx]
 ----
@@ -430,7 +430,7 @@ export default function BundledEditor(props) {
 }
 ----
 
-. Add `BundleEditor` component into `+./src/App.jsx+` as the following:
+. Add `BundleEditor` component with configuration into `+App.jsx+`.
 +
 [source,jsx]
 ----
@@ -473,8 +473,7 @@ export default function App() {
 endif::[]
 endif::[]
 
-. Test the application.
-* To start the development server run:
+. Run the development server to test the application:
 +
 [source,sh]
 ----
diff --git a/modules/ROOT/partials/integrations/vue-quick-start.adoc b/modules/ROOT/partials/integrations/vue-quick-start.adoc
@@ -70,9 +70,7 @@ ifeval::["{productSource}" == "zip"]
 
 . Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+public+` folder.
 
-. Add `+'src/tinymce'+` to the `+ignores+` array to `+./eslint.config.js` file.
-
-. Update `+App.vue+` as below. *Note*: Remember to point `tinymceScriptSrc` to `/tinymce/tinymce.min.js`
+. Update `+App.vue+` with the below code snippet. *Note*: `+tinymceSrcScript+` references to the public `+tinymce+` using absolute root path.
 +
 [source,jsx]
 ----
@@ -115,9 +113,10 @@ import Editor from '@tinymce/tinymce-vue'
 endif::[]
 
 ifeval::["{productSource}" != "zip"]
-. Update `+App.vue+`, then import and add `+Editor+` component from `+@tinymce/tinymce-vue+` as below:
+
 ifeval::["{productSource}" == "cloud"]
 +
+. Update `+App.vue+` to include `+Editor+` from `+tinymce/tinymce-vue+` as below:
 .For example:
 +
 [source,jsx]
@@ -158,16 +157,12 @@ import Editor from '@tinymce/tinymce-vue'
 </style>
 ----
 
-. Update the `+api-key+` prop in the Editor element with your link:{accountsignup}/[{cloudname} API key].
-+
-[source,jsx]
-----
-<Editor api-key='no-api-key' :init="{ /* your other settings */ }" />
-----
+. Update the `+apiKey+` prop with your link:{accountsignup}/[{cloudname} API key].
 
 endif::[]
 ifeval::["{productSource}" == "lazy-load"]
 +
+. Update `+App.vue+` with the below code snippet. *Note*: `+tinymceSrcScript+` references to the public `+tinymce+` using absolute root path.
 .For example:
 +
 [source,jsx]
