From c754d628dc96bb9cf5e8366bbec5d99d91640556 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Thu, 18 Sep 2025 12:07:07 +1000
Subject: [PATCH] DOC-2635: Documentation Enhancements for Anchor Plugin.

---
 .../examples/live-demos/anchor/index.html     | 39 +++++++++++++++++++
 .../ROOT/examples/live-demos/anchor/index.js  | 12 ++++++
 modules/ROOT/pages/anchor.adoc                | 11 ++++--
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 modules/ROOT/examples/live-demos/anchor/index.html
 create mode 100644 modules/ROOT/examples/live-demos/anchor/index.js

diff --git a/modules/ROOT/examples/live-demos/anchor/index.html b/modules/ROOT/examples/live-demos/anchor/index.html
new file mode 100644
index 0000000000..2d62227a31
--- /dev/null
+++ b/modules/ROOT/examples/live-demos/anchor/index.html
@@ -0,0 +1,39 @@
+<textarea id="anchor-demo">
+    <h1>Anchor Plugin Demo</h1>
+
+    <p>
+      This demo illustrates the functionality of the TinyMCE Anchor plugin. Anchors allow you to create internal links within your document that jump to specific locations.
+    </p>
+
+    <h2>How to Insert an Anchor</h2>
+
+    <p>
+      To insert an anchor at the cursor position:
+    </p>
+
+    <ol>
+      <li>Place your cursor where you want to insert the anchor</li>
+      <li>Click the anchor button in the toolbar or use Insert → Anchor from the menu</li>
+      <li>Enter a name for your anchor in the dialog box (e.g., "introduction")</li>
+      <li>Click OK to insert the anchor</li>
+    </ol>
+
+    <h2>How to Create Links to Anchors</h2>
+
+    <p>
+      To create a link that jumps to an anchor:
+    </p>
+
+    <ol>
+      <li>Select the text you want to turn into a link</li>
+      <li>Click the link button in the toolbar or use Insert → Link from the menu</li>
+      <li>In the Insert/Edit Link dialog, click the "Anchors" dropdown list</li>
+      <li>Select the anchor you want to link to from the dropdown</li>
+      <li>Click Save to create the link</li>
+    </ol>
+
+    <p>
+      After creating anchors and links, you can test them by clicking on the links. The editor will automatically scroll to the anchor location in the document.
+    </p>
+
+</textarea>
\ No newline at end of file
diff --git a/modules/ROOT/examples/live-demos/anchor/index.js b/modules/ROOT/examples/live-demos/anchor/index.js
new file mode 100644
index 0000000000..1018ddeac9
--- /dev/null
+++ b/modules/ROOT/examples/live-demos/anchor/index.js
@@ -0,0 +1,12 @@
+tinymce.init({
+  selector: 'textarea#anchor-demo',
+  height: 500,
+  plugins: [
+    "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
+    "help", "image", "insertdatetime", "link", "lists", "media",
+    "preview", "searchreplace", "table", "visualblocks",
+  ],
+  toolbar: "anchor |undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
+  menubar: "file edit view insert format tools table help",
+  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
+});
diff --git a/modules/ROOT/pages/anchor.adoc b/modules/ROOT/pages/anchor.adoc
index cffca09752..0f0f156539 100644
--- a/modules/ROOT/pages/anchor.adoc
+++ b/modules/ROOT/pages/anchor.adoc
@@ -7,15 +7,20 @@
 This plugin adds an anchor/bookmark button to the toolbar that inserts an anchor at the editor's cursor insertion point. It also adds the menu item `+anchor+` under the `+Insert+` menu.
 
 When a user clicks on the anchor button or menu item they will be prompted via a dialog box to enter a string. The string will be inserted into the HTML as an anchor id at the location of the cursor. For example, a user places their cursor at the beginning of "Hello World" and clicks on the anchor button and enters "start" in the dialog box. The resulting HTML will take the form of `+<p><a id="start"></a>Hello, World!</p>+`.
+== Interactive demo
+
+liveDemo::anchor[]
 
 == Basic setup
 
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // change this value according to your HTML
-  plugins: 'anchor',
-  toolbar: 'anchor',
+  selector: "textarea",
+  plugins: [
+    "anchor", "link", // Link plugin is required for linking to anchors
+  ],
+  toolbar: "link | anchor",
 });
 ----