DOC-3190: Update Vuejs public documents.

Author: kemister85

modules/ROOT/partials/integrations/angular-quick-start.adoc

@@ -143,7 +143,6 @@ To use an independent deployment of {productname}, add a script to either the `+
 * Bundling {productname} with the Angular application using a module loader (such as Webpack).
 +
 --
-:depth: 2
 include::partial$integrations/bundling-integration.adoc[]
 --
 endif::[]

modules/ROOT/partials/integrations/bunding-integrations-not-reccomended-message.adoc

@@ -0,0 +1 @@
+IMPORTANT: {companyname} does not recommend bundling `tinymce` and `{packageName}` with a module loader. Bundling these packages can be complex and error prone.

modules/ROOT/partials/integrations/bundling-integration.adoc

@@ -1,24 +1,3 @@
-ifeval::[{depth} == 1]
-
-IMPORTANT: {companyname} does not recommend bundling `tinymce` and `{packageName}` with a module loader. Bundling these packages can be complex and error prone.
-
-To bundle {productname} using a module loader (such as Webpack, Rollup, or Browserify), import or require the `tinymce` package, followed by the `{packageName}` package, then the other required {productname}-related imports.
-
-Example of bundling:
-
-[source,js,subs="attributes+"]
-----
-/* Add the {packageName} wrapper to the bundle */
-import { Editor } from '@tinymce/{packageName}';
-/* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
-----
-
-For instructions on bundling {productname}, see: xref:introduction-to-bundling-tinymce.adoc[Bundling {productname}].
-
-
-endif::[]
-ifeval::[{depth} == 2]
-
 IMPORTANT: {companyname} does not recommend bundling `tinymce` and `{packageName}` with a module loader. Bundling these packages can be complex and error prone.
 
 To bundle {productname} using a module loader (such as Webpack, Rollup, or Browserify), import or require the `tinymce` package, followed by the `{packageName}` package, then the other required {productname}-related imports.
@@ -32,24 +11,4 @@ import { Editor } from '@tinymce/{packageName}';
 /* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
 ----
 
-For instructions on bundling {productname}, see: xref:introduction-to-bundling-tinymce.adoc[Bundling {productname}].
-
-endif::[]
-ifndef::depth[]
-
-IMPORTANT: {companyname} does not recommend bundling `tinymce` and `{packageName}` with a module loader. Bundling these packages can be complex and error prone.
-
-To bundle {productname} using a module loader (such as Webpack, Rollup, or Browserify), import or require the `tinymce` package, followed by the `{packageName}` package, then the other required {productname}-related imports.
-
-Example of bundling:
-
-[source,js,subs="attributes+"]
-----
-/* Add the {packageName} wrapper to the bundle */
-import { Editor } from '@tinymce/{packageName}';
-/* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
-----
-
-For instructions on bundling {productname}, see: xref:introduction-to-bundling-tinymce.adoc[Bundling {productname}].
-
-endif::[]
+For instructions on bundling {productname}, see: xref:introduction-to-bundling-tinymce.adoc[Bundling {productname}].

modules/ROOT/partials/integrations/vue-quick-start.adoc

@@ -1,15 +1,17 @@
 :packageName: tinymce-vue
 
-The https://github.com/tinymce/tinymce-vue[Official {productname} Vue.js component] integrates {productname} into Vue.js projects. This procedure creates a https://cli.vuejs.org/guide/creating-a-project.html#vue-create[basic Vue.js application] containing a {productname} editor.
+The link:https://github.com/tinymce/tinymce-vue[Official {productname} Vue.js component] integrates {productname} into Vue.js projects, providing a powerful WYSIWYG editor within the Vue ecosystem. This procedure creates a link:https://cli.vuejs.org/guide/creating-a-project.html#vue-create[basic Vue.js application] containing a {productname} editor.
 
 Version 4 and later of the `+tinymce-vue+` package supports Vue.js 3.x, but does not support Vue.js 2.x. For Vue.js 2.x applications, use `+tinymce-vue+` version 3.
 
+include::partial$integrations/bunding-integrations-not-reccomended-message.adoc[]
+
 [[tinymce-vuejs-integration-live-examples]]
 == TinyMCE Vue.js integration live examples
 
 For examples of the {productname} Vue.js 3.x integration:
 
-. Clone the `+tinymce/tinymce-vue+` GitHub repository. For example:
+. Clone the `+tinymce/tinymce-vue+` link:https://github.com/tinymce/tinymce-vue[GitHub repository]. For example:
 +
 [source,sh]
 ----
@@ -28,29 +30,33 @@ yarn install
 yarn demo
 ----
 
-The `+tinymce-vue+` demo is now running. Visit: http://localhost:3001.
+The `+tinymce-vue+` demo is now running. Visit: link:http://localhost:3001[http://localhost:3001].
 
 == Prerequisites
 
-This procedure requires https://nodejs.org/[Node.js (and npm)].
+This procedure requires:
+
+* link:https://nodejs.org/en/download/[Node.js LTS] (recommended).
+* link:https://cli.vuejs.org/[Vue CLI] (optional).
 
 == Procedure
 
-. Create a new Vue project named `tinymce-vue-demo` using the https://github.com/vuejs/create-vue[Create Vue Tool].
+. Create a new Vue project named `tinymce-vue-demo` using the link:https://github.com/vuejs/create-vue[Create Vue Tool].
 * From a command line or command prompt create a Vue.js 3.x project: `+tinymce-vue-demo+`.
 +
 [source,sh]
 ----
 npm create vue@3
 ----
-* If you need to create a Vue.js 2.x projects instead:
+* If a Vue.js 2.x project is required instead use:
 +
 [source,sh]
 ----
 npm create vue@2
 ----
 
-NOTE: As per the https://vuejs.org/about/faq.html#what-s-the-difference-between-vue-2-and-vue-3[Vue FAQ], _Vue 2 will reach End of Life by the end of 2023_.
+[NOTE]
+As per the link:https://vuejs.org/about/faq.html#what-s-the-difference-between-vue-2-and-vue-3[Vue FAQ], _Vue 2 will reach End of Life by the end of 2023_.
 
 * Follow the prompts and type `+tinymce-vue-demo+` as the project name.
 . Change into the newly created directory.
@@ -61,43 +67,43 @@ cd tinymce-vue-demo
 ----
 
 ifeval::["{productSource}" == "package-manager"]
-. Install the `+tinymce+` and `+tinymce-vue+` packages and save them to your `+package.json+` with `+--save+`.
+. Install the `+tinymce+` and `+tinymce-vue+` packages.
 
 * For Vue.js 3.x users:
 +
 [source,sh]
 ----
-npm install --save tinymce "@tinymce/tinymce-vue@^5"
+npm install  tinymce "@tinymce/tinymce-vue"
 ----
 
 * For Vue.js 2.x users:
 +
 [source,sh]
 ----
-npm install --save tinymce "@tinymce/tinymce-vue@^3"
+npm install  tinymce "@tinymce/tinymce-vue@^3"
 ----
 
 endif::[]
 ifeval::["{productSource}" != "package-manager"]
 
-. Install the `+tinymce-vue+` package and save it to your `+package.json+` with `+--save+`.
+. Install the `+tinymce-vue+` package.
 * For Vue.js 3.x users:
 +
 [source,sh]
 ----
-npm install --save "@tinymce/tinymce-vue@^5"
+npm install  "@tinymce/tinymce-vue"
 ----
 * For Vue.js 2.x users:
 +
 [source,sh]
 ----
-npm install --save "@tinymce/tinymce-vue@^3"
+npm install  "@tinymce/tinymce-vue@^3"
 ----
 
 endif::[]
 
 . Using a text editor, open `+/path/to/tinymce-vue-demo/src/App.vue+`.
-.. Add a {productname} configuration to the `+<template>+` using the `+<Editor>+` tag.
+.. Add a {productname} configuration to the `+<template>+` using the `+<editor>+` tag.
 .. Add `+import Editor from '@tinymce/tinymce-vue'+` to the start of the `+<script>+`.
 +
 For example:
@@ -111,10 +117,13 @@ import Editor from '@tinymce/tinymce-vue'
 <template>
   <main id="sample">
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-    <Editor
-      api-key="no-api-key"
+    <editor
+      id="uuid"
+      licenseKey="gpl"
       :init="{
-        plugins: 'lists link image table code help wordcount'
+        plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
+        toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+        height: 500,
       }"
     />
   </main>
@@ -144,19 +153,20 @@ Such as:
 +
 [source,html]
 ----
-<Editor api-key='your-api-key' :init="{ /* your other settings */ }" />
+<editor api-key='your-api-key' :init="{ /* your other settings */ }" />
 ----
 endif::[]
 ifeval::["{productSource}" == "package-manager"]
 . Bundle {productname} with the Vue.js application using a module loader (such as Webpack).
 +
 --
-:depth: 1
 include::partial$integrations/bundling-integration.adoc[]
 --
 endif::[]
 ifeval::["{productSource}" == "zip"]
-. {productname} can be self-hosted by either: xref:deploying-tinymce-independent[Deploying {productname} independent of the Vue.js application], or xref:bundle[Bundling {productname} with the Vue.js application].
+. {productname} can be self-hosted by either:
+** xref:deploying-tinymce-independent[Deploying {productname} independent of the Vue.js application],
+** xref:zip-install.adoc[{productname} .zip deployments].
 
 * [[deploying-tinymce-independent]] Deploying {productname} independent of the Vue.js application. To use a {productname} instance that has been deployed independent of the Vue.js application, use an HTML `+<script>+` tag.
 +
@@ -167,14 +177,7 @@ To use an independent deployment of {productname}, add a script to either the `<
 <script src="/path/to/tinymce.min.js"></script>
 ----
 +
-To use an independent deployment of {productname} with the example create a Vue.js application, add the script to `/path/to/tinymce-vue-demo/public/index.html`.
-
-* [[bundle]] Bundle {productname} with the Vue.js application using a module loader (such as Webpack).
-+
---
-:depth: 2
-include::partial$integrations/bundling-integration.adoc[]
---
+To use an independent deployment of {productname} with the example create a Vue.js application, add the `+<script>+` to `/path/to/tinymce-vue-demo/public/index.html`.
 endif::[]
 
 . Test the application using the Node.js development server.
@@ -185,16 +188,16 @@ endif::[]
 npm run dev
 ----
 
-* To stop the development server, select on the command line or command prompt and press _Ctrl+C_.
+* To stop the development server, select on the command line or command prompt and press `+Ctrl+C+`.
 
 == Deploying the application to a HTTP server
 
-The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: https://vuejs.org/v2/guide/deployment.html[Vue.js - Production Deployment].
+The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: link:https://vuejs.org/v2/guide/deployment.html[Vue.js - Production Deployment].
 
 == Next Steps
 
-* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-vue/[the tinymce-vue storybook].
+* For examples of the {productname} integration, see: link:https://tinymce.github.io/tinymce-vue/[the tinymce-vue storybook].
 * For information on customizing:
 ** {productname} integration, see: xref:vue-ref.adoc[Vue.js framework Technical Reference].
 ** {productname}, see: xref:basic-setup.adoc[Basic setup].
-** The Vue.js application, see: https://vuejs.org/v2/guide/[Vue.js Documentation].
+** The Vue.js application, see: link:https://vuejs.org/v2/guide/[Vue.js Documentation].

modules/ROOT/partials/integrations/vue-tech-ref.adoc

@@ -23,19 +23,19 @@
 [[installing-the-tinymce-vuejs-integration-using-npm]]
 == Installing the TinyMCE Vue.js integration using NPM
 
-To install the `+tinymce-vue+` package and save it to your `+package.json+`.
+To install the `+tinymce-vue+` package.
 
 * For Vue.js 3.x users:
 +
 [source,sh]
 ----
-npm install --save "@tinymce/tinymce-vue@^4"
+npm install "@tinymce/tinymce-vue"
 ----
 * For Vue.js 2.x users:
 +
 [source,sh]
 ----
-npm install --save "@tinymce/tinymce-vue@^3"
+npm install "@tinymce/tinymce-vue@^3"
 ----
 
 [[using-the-tinymce-vuejs-integration]]
@@ -77,7 +77,16 @@ var app = new Vue({
 +
 [source,html]
 ----
-<editor api-key="API_KEY" :init="{plugins: 'wordcount'}" />
+<editor
+  id="uuid"
+  api-key="your-api-key"
+  tinymce-script-src="/Users/karl/tinymce/test_apps/test-app-updated-config/node_modules/tinymce/tinymce.min.js"
+  :init="{
+    plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
+    toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+    height: 500,
+  }"
+/>
 ----
 
 [[configuring-the-editor]]
@@ -103,6 +112,7 @@ The editor accepts the following properties:
 />
 ----
 
+[NOTE]
 None of the configuration properties are *required* for `+tinymce-vue+` to work. Specify a {cloudname} API key using `+api-key+` to remove the `+This domain is not registered...+` warning message.
 
 [[api-key]]
@@ -199,7 +209,7 @@ The `+disabled+` property can dynamically switch the editor between a "disabled"
 [[id]]
 === `+id+`
 
-An id for the editor. Used for retrieving the editor instance using the `+tinymce.get('ID')+` method.
+An `id` for the editor. Used for retrieving the editor instance using the `+tinymce.get('ID')+` method.
 
 *Type:* `+String+`
 
@@ -288,12 +298,13 @@ For a list of available {productname} events, see: xref:events.adoc#editor-core-
 
 *Default value:* `+'change keyup undo redo'+`.
 
+// ref: https://github.com/tinymce/tinymce-vue/blob/d66bfa9eb6a819a1943431362cf978f7bf56c145/src/main/ts/Utils.ts#L111
 ==== Example: using `+model-events+`
 
 [source,html]
 ----
 <editor
-  model-events="change keydown blur focus paste"
+  model-events="change input undo paste"
 />
 ----
 
@@ -378,7 +389,7 @@ For information setting the toolbar for {productname}, see: xref:toolbar-configu
 [[tinymce-script-src]]
 === `+tinymce-script-src+`
 
-Use the `+tinymce-script-src+` prop to specify an external version of TinyMCE to lazy load.
+Use the `+tinymce-script-src+` prop to specify an external version of {productname} to lazy load from.
 
 *Type:* `+String+`
 
@@ -401,7 +412,7 @@ The `+v-model+` directive can be used to create a two-way data binding. For exam
 <editor v-model="content" />
 ----
 
-For information on `+v-model+` and form input bindings, see: https://vuejs.org/guide/essentials/forms.html[Vue.js documentation - Form Input Bindings].
+For information on `+v-model+` and form input bindings, see: link:https://vuejs.org/guide/essentials/forms.html[Vue.js documentation - Form Input Bindings].
 
 [[event-binding]]
 == Event binding
@@ -417,7 +428,7 @@ For older versions of Vue (Vue 2) supported by v3.x, the syntax for event bindin
 
 When the handler is called (*handlerFunction* in this example), it is called with two arguments:
 
-* `+event+` - The TinyMCE event object.
+* `+event+` - The {productname} event object.
 * `+editor+` - A reference to the editor.
 
 The following events are available:

modules/ROOT/partials/integrations/webcomponent-quick-start.adoc

@@ -48,7 +48,6 @@ npm install tinymce @tinymce/tinymce-webcomponent
 . Bundle {productname} with the Web Component application using a module loader (such as Webpack).
 +
 --
-:depth: 1
 include::partial$integrations/bundling-integration.adoc[]
 --