DOC-3180: Update the web component integration doc pages (#3703)

tiny-ben-tran · kemister85 · web-flow · commit a27f0918f13d · 2025-05-14T13:59:45.000+10:00
* DOC-3180: Update web component integration doc * DOC-3180: Group powerpaste applicable settings * Update modules/ROOT/partials/integrations/webcomponent-quick-start.adoc Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com> * DOC-3180: Replace your-tiny-cloud-api-key with no-api-key. --------- Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
diff --git a/antora.yml b/antora.yml
@@ -12,8 +12,8 @@ asciidoc:
     tdcdnurl: https://cdn.tiny.cloud/1/_your_api_key_/tinydrive/7/tinydrive.min.js
     tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/7/tinymce.min.js
     tinydrive_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinydrive/7/tinydrive.min.js
-    webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent@2/dist/tinymce-webcomponent.min.js
-    jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery/dist/tinymce-jquery.min.js
+    webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js
+    jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js
     openai_proxy_url: https://openai.ai-demo-proxy.tiny.cloud/v1/chat/completions
     openai_proxy_token: eyJhbGciOiJFUzM4NCJ9.eyJhdWQiOlsiaHR0cHM6Ly9vcGVuYWkuYWktZGVtby1wcm94eS50aW55LmNsb3VkLyJdLCJleHAiOjE3NTEzMjgwMDAsImh0dHBzOi8vb3BlbmFpLmFpLWRlbW8tcHJveHkudGlueS5jbG91ZC9yb2xlIjoicHVibGljLWRlbW8iLCJpc3MiOiJodHRwczovL2FpLWRlbW8tcHJveHkudGlueS5jbG91ZC8iLCJqdGkiOiJmOGFmY2EyNC1mN2FhLTQxMjktYTc2Yy02YThlZDU3YjAyZjYiLCJzdWIiOiJhaS1hc3Npc3RhbnQtZGVtbyJ9.Xu0apHCbxgmRQTeTqrTIDFFhh2CgKeARRXa3mCxSGoCwZqkoQaFRZBCzDo8Xz7DuUa5mW2XHl-HYcYiXJM9ly16d0oY7lJefHBeLlmJEBE1CSttHBkCRWZS8eFLCasL6
     default_meta_keywords: tinymce, documentation, docs, plugins, customizable skins, configuration, examples, html, php, java, javascript, image editor, inline editor, distraction-free editor, classic editor, wysiwyg
diff --git a/modules/ROOT/examples/live-demos/web-component/index.js b/modules/ROOT/examples/live-demos/web-component/index.js
diff --git a/modules/ROOT/partials/integrations/webcomponent-quick-start.adoc b/modules/ROOT/partials/integrations/webcomponent-quick-start.adoc
@@ -6,22 +6,12 @@ The https://github.com/tinymce/tinymce-webcomponent[Official {productname} Web C
 
 To add a {productname} editor to a web page using the {productname} Web Component:
 
-. Add the `+DOCTYPE+` element to the target page, such as:
+. Add the following meta tags to the head section of the page:
 +
 [source,html]
 ----
-<!DOCTYPE html>
-----
-+
-The `+DOCTYPE+` declaration is required for the editor to function correctly.
-. Add the following `+meta+` elements to the head of page:
-+
-[source,html]
-----
-<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
 ----
 +
 The second `+meta+` element is required for the editor to function correctly on mobile devices. For information on the viewport `+meta+` element, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics[MDN Web Docs - Using the viewport meta tag to control layout on mobile browsers].
@@ -52,7 +42,7 @@ npm install tinymce @tinymce/tinymce-webcomponent
 include::partial$integrations/bundling-integration.adoc[]
 --
 
-. Add a `+script+` element sourcing {productname}, such as:
+. Add a `+script+` element sourcing the output file, such as:
 +
 [source,html]
 ----
@@ -63,7 +53,7 @@ If a `script` element sourcing {productname} is not provided, the {productname}
 
 endif::[]
 ifeval::["{productSource}" == "zip"]
-. Add a `+script+` element sourcing the {productname} Web Component (`+tinymce-webcomponent.js+`), such as:
+. Add a `+script+` element sourcing the {productname} Web Component (`+tinymce-webcomponent.min.js+`), such as:
 +
 [source,html,subs="attributes+"]
 ----
@@ -80,28 +70,35 @@ The `tinymce-webcomponent` can also be sourced from link:https://www.npmjs.com/p
 ----
 +
 If a `+script+` element sourcing {productname} is not provided, the {productname} Web Component will load {productname} from the {cloudname}. For information on the available options for sourcing {productname}, see: xref:webcomponent-ref.adoc#loading-tinymce[Loading {productname}].
+
 endif::[]
+
 ifeval::["{productSource}" == "cloud"]
 . Add a `+tinymce-editor+` element where the editor should appear and include your {cloudname} API key from link:{accountpageurl}/[{accountpage}].
 +
 [source,html]
 ----
 <tinymce-editor
-  api-key="your-tiny-cloud-api-key"
+  api-key="no-api-key"
 ></tinymce-editor>
 ----
 endif::[]
+
 ifeval::["{productSource}" != "cloud"]
 . Add a `+tinymce-editor+` element where the editor should appear.
 +
 [source,html,subs="attributes+"]
 ----
-<tinymce-editor></tinymce-editor>
+<tinymce-editor license-key="your-license-key"></tinymce-editor>
 ----
-endif::[]
-+
 The default {productname} editor will load at this location if the page is opened in a web browser.
 
++
+. Update the `+license-key+` option in the editor element and include your xref:license-key.adoc[License Key].
++
+endif::[]
+
+ifeval::["{productSource}" == "cloud"]
 == Example: adding the TinyMCE Web Component to an HTML page
 
 The following example shows the {productname} Web Component in an HTML page, with:
@@ -110,6 +107,7 @@ The following example shows the {productname} Web Component in an HTML page, wit
 * {productname} sourced from the {cloudname}.
 
 liveDemo::web-component[tab="html"]
+endif::[]
 
 == Next Steps
 
diff --git a/modules/ROOT/partials/integrations/webcomponent-tech-ref.adoc b/modules/ROOT/partials/integrations/webcomponent-tech-ref.adoc
@@ -55,7 +55,7 @@ To add the {productname} Web Component integration to a JavaScript project, on c
 +
 [source,sh]
 ----
-npm i --save @tinymce/tinymce-webcomponent
+npm i @tinymce/tinymce-webcomponent
 ----
 * Yarn users:
 +
@@ -189,13 +189,6 @@ To set the menus shown on the editor menu bar, add the `+menubar+` attribute. Fo
 <tinymce-editor menubar="file edit insert view format table tools help"></tinymce-editor>
 ----
 
-To disable or remove the menu bar, set the `+menubar+` attribute to `+"false"+`. For example:
-
-[source,html]
-----
-<tinymce-editor menubar="false"></tinymce-editor>
-----
-
 To change the menu items shown in the menus, or define custom menus, set the `+menu+` configuration option using the `+config+` attribute.
 
 For information on:
@@ -214,13 +207,6 @@ To change the context menu sections that can be shown in the editor context menu
 <tinymce-editor plugins="link image table" contextmenu="link image table"></tinymce-editor>
 ----
 
-To disable the context menu, set the `+contextmenu+` attribute to `+"false"+`. For example:
-
-[source,html]
-----
-<tinymce-editor contextmenu="false"></tinymce-editor>
-----
-
 For a list of available context menu sections, see: xref:editor-context-menu-identifiers.adoc[Available context menu sections]. For information on context menus, see: xref:menus-configuration-options.adoc#contextmenu[User interface options - `+contextmenu+`].
 
 [[setting-the-quick-insert-toolbar]]
@@ -308,10 +294,11 @@ To apply a small set of CSS styles to the editor, use the `+content_style+` attr
 
 For information on the `+content_style+` option, see: xref:add-css-options.adoc#content_style[Content appearance options - `+content_style+`].
 
-[[setting-powerpastes-word-import-method]]
-=== Setting PowerPaste's word import method
+=== Settings for when PowerPaste plugin enabled
+NOTE: These settings only apply if the PowerPaste plugin (`+powerpaste+`) is enabled.
 
-This setting only applies if the PowerPaste plugin (`+powerpaste+`) is enabled.
+[[setting-powerpastes-word-import-method]]
+==== PowerPaste's word import method
 
 To control how content pasted from Microsoft Word is filtered, use the `+powerpaste_word_import+` attribute. For example:
 
@@ -323,9 +310,7 @@ To control how content pasted from Microsoft Word is filtered, use the `+powerpa
 For information on the `+powerpaste_word_import+` option, including supported values, see: xref:powerpaste-options.adoc#powerpaste_word_import[The PowerPaste plugin - `+powerpaste_word_import+`].
 
 [[setting-powerpastes-html-import-method]]
-=== Setting PowerPaste's html import method
-
-This setting only applies if the PowerPaste plugin (`+powerpaste+`) is enabled.
+==== PowerPaste's html import method
 
 To control how content pasted from sources other than Microsoft Word is filtered, use the `+powerpaste_html_import+` attribute. For example:
 
@@ -337,9 +322,8 @@ To control how content pasted from sources other than Microsoft Word is filtered
 For information on the `+powerpaste_html_import+` option, including supported values, see: xref:powerpaste-options.adoc#powerpaste_html_import[The PowerPaste plugin - `+powerpaste_html_import+`].
 
 [[setting-powerpaste-to-allow-local-images]]
-=== Setting PowerPaste to allow local images
+==== PowerPaste to allow local images
 
-This setting only applies if the PowerPaste plugin (`+powerpaste+`) is enabled.
 
 To prevent Base64 encoded images with a data URI from being pasted into the editor, set `+powerpaste_allow_local_images+` to `+"false"+`. For example:
 
@@ -379,11 +363,11 @@ To execute a javascript callback before the editor instance is rendered, use the
 [source,html]
 ----
 <script>
-function setupEditor(editor) {
-  editor.on('click', function () {
-    console.log('Editor was clicked');
-  });
-}
+  function setupEditor(editor) {
+    editor.on('click', function () {
+      console.log('Editor was clicked');
+    });
+  }
 </script>
 <tinymce-editor setup="setupEditor"></tinymce-editor>
 ----
@@ -520,11 +504,11 @@ To configure any {productname} option that does not have a corresponding attribu
 [source,html]
 ----
 <script>
-window.myConfig = {
-  height: 500,
-  spellchecker_dialog: true,
-  spellchecker_ignore_list: ['Ephox', 'Moxiecode']
-};
+  window.myConfig = {
+    height: 500,
+    spellchecker_dialog: true,
+    spellchecker_ignore_list: ['Ephox', 'Moxiecode']
+  };
 </script>
 <tinymce-editor
   config="myConfig"
@@ -546,11 +530,11 @@ There are two methods to bind events for the TinyMCE Web Component.
 [source,html]
 ----
 <script>
-function setupEditor(editor) {
-  editor.on('click', function () {
-    console.log('Editor was clicked');
-  });
-}
+  function setupEditor(editor) {
+    editor.on('click', function () {
+      console.log('Editor was clicked');
+    });
+  }
 </script>
 <tinymce-editor setup="setupEditor"/>
 ----
@@ -559,9 +543,9 @@ function setupEditor(editor) {
 [source,html]
 ----
 <script>
-function changeHandler(evt) {
-  console.log('The ' + evt['type'] + ' event was fired.');
-}
+  function changeHandler(evt) {
+    console.log('The ' + evt['type'] + ' event was fired.');
+  }
 </script>
 <tinymce-editor on-Change="changeHandler"/>
 ----
