DOC-2626: Documentation Enhancements: Enhanced Code Editor feature page.

modules/ROOT/examples/live-demos/advcode/index.html

@@ -1,45 +1,37 @@
-<table>
-  <thead>
-    <tr>
-      <th style="width: 50%;"><h2>The Code Plugin</h2></th>
-      <th style="width: 50%;"><h2>The Enhanced Code Editor Plugin</h2></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td style="width: 50%;">
-        <textarea class="codedemo">
-          <p>The Code (<code>code</code>) plugin provides a dialog for viewing and editing the HTML of the editor content.</p>
-          <p>To open the Code dialog:</p>
-          <ul>
-            <li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
-            <li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
-            <li>Click the <strong>Source code</strong> toolbar button.</li>
-          </ul>
-        </textarea>
-      </td>
-      <td style="width: 50%;">
-        <textarea class="advcodedemo">
-          <p>The Enhanced Code Editor (<code>advcode</code>) plugin provides the same dialog as the code (<code>code</code>) plugin, but with the following additional features:</p>
-          <ul>
-            <li>Syntax highlighting.</li>
-            <li>Element matching and closing.</li>
-            <li>Code folding.</li>
-            <li>Multiple selections/carets.</li>
-            <li>Search and replace.</li>
-            <li>Dark or light mode for code display.</li>
-            <li>Increase and decrease display font size.</li>
-            <li>Full-screen mode.</li>
-          </ul>
-          <p>For the Enhanced Code Editor to offer a full-screen mode requires the <a href="https://tiny.cloud/docs/tinymce/6/fullscreen">Full screen</a> plugin and requires the Enhanced Code Editor to be running in <a href="https://tiny.cloud/docs/tinymce/6/advcode/#advcode_inline">inline mode</a>.</p>
-          <p>To open the Enhanced Code Editor dialog:</p>
-          <ul>
-            <li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
-            <li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
-            <li>Click the <strong>Source code</strong> toolbar button.</li>
-          </ul>
-        </textarea>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div style="display: flex; gap: 20px; width: 100%;">
+  <div style="flex: 1; min-width: 0;">
+    <h2>The Code Plugin</h2>
+    <textarea class="codedemo" style="width: 100%;">
+      <p>The Code (<code>code</code>) plugin provides a dialog for viewing and editing the HTML of the editor content.</p>
+      <p>To open the Code dialog:</p>
+      <ul>
+        <li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
+        <li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
+        <li>Click the <strong>Source code</strong> toolbar button.</li>
+      </ul>
+    </textarea>
+  </div>
+  <div style="flex: 1; min-width: 0;">
+    <h2>The Enhanced Code Editor Plugin</h2>
+    <textarea class="advcodedemo" style="width: 100%;">
+      <p>The Enhanced Code Editor (<code>advcode</code>) plugin provides the same dialog as the code (<code>code</code>) plugin, but with the following additional features:</p>
+      <ul>
+        <li>Syntax highlighting.</li>
+        <li>Element matching and closing.</li>
+        <li>Code folding.</li>
+        <li>Multiple selections/carets.</li>
+        <li>Search and replace.</li>
+        <li>Dark or light mode for code display.</li>
+        <li>Increase and decrease display font size.</li>
+        <li>Full-screen mode.</li>
+      </ul>
+      <p>For the Enhanced Code Editor to offer a full-screen mode requires the <a href="https://tiny.cloud/docs/tinymce/latest/fullscreen">Full screen</a> plugin and requires the Enhanced Code Editor to be running in <a href="https://tiny.cloud/docs/tinymce/latest/advcode/#advcode_inline">inline mode</a>.</p>
+      <p>To open the Enhanced Code Editor dialog:</p>
+      <ul>
+        <li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
+        <li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
+        <li>Click the <strong>Source code</strong> toolbar button.</li>
+      </ul>
+    </textarea>
+  </div>
+</div>

modules/ROOT/examples/live-demos/advcode/index.js

@@ -1,15 +1,25 @@
 tinymce.init({
   selector: 'textarea.advcodedemo',
-  plugins: 'advcode',
-  toolbar: 'code',
+  plugins: [
+    "advcode", "advlist", "anchor", "autolink", "charmap", "fullscreen",
+    "help", "image", "insertdatetime", "link", "lists", "media",
+    "preview", "searchreplace", "table", "visualblocks",
+  ],
+  toolbar: "code | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
   height: 600,
+  width: '100%',
   content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
 });
 
 tinymce.init({
   selector: 'textarea.codedemo',
-  plugins: 'code',
-  toolbar: 'code',
+  plugins: [
+    "code", "advlist", "anchor", "autolink", "charmap", "fullscreen",
+    "help", "image", "insertdatetime", "link", "lists", "media",
+    "preview", "searchreplace", "table", "visualblocks",
+  ],
+  toolbar: "code | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
   height: 600,
+  width: '100%',
   content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
 });

modules/ROOT/pages/advcode.adoc

@@ -1,37 +1,33 @@
 = Enhanced Code Editor plugin
 :navtitle: Enhanced Code Editor
-:description: How to setup TinyMCE's Enhanced Code Editor plugin.
-:keywords: code, advcode, codemirror
+:description: How to setup and configure TinyMCE's Enhanced Code Editor plugin for advanced HTML editing with IDE-like features.
+:keywords: code, advcode, codemirror, html editor, code editor, syntax highlighting
 :pluginname: Enhanced Code Editor
 :plugincode: advcode
 :altplugincode: code
 :pluginminimumplan: tiertwo
 
 include::partial$misc/admon-premium-plugin.adoc[]
 
-[TIP]
-As of {productname} 7.0, the Advanced Code Editor plugin has been renamed to {pluginname}. When adding {pluginname} in your editor, continue to use {plugincode}.
+The {pluginname} plugin (`+advcode+`) provides an advanced code editor within {productname} that makes HTML editing more efficient for power users. The editor includes professional IDE features that are enabled by default:
 
-The xref:advcode.adoc[Enhanced Code Editor] plugin (`+advcode+`) brings a more advanced code editor to {productname}. This code editor makes it easier to modify the HTML, and is a useful add-on for power users. It comes with features often found in IDEs, all enabled by default:
+* Syntax color highlighting for HTML, CSS, and JavaScript
+* Bracket matching and code folding
+* Multiple selections and carets for efficient editing
+* Search and replace functionality
+* Dark or light mode toggle for code display
+* Font size adjustment controls
+* Full-screen mode for distraction-free editing
 
-* Syntax color highlighting.
-* Bracket matching.
-* Code folding.
-* Multiple selections/carets.
-* Search and Replace.
-* Dark or light mode button for code display.
-* Increase and decrease display font size buttons.
-* Full-screen mode button.
-
-NOTE: For the {pluginname} to offer a full-screen mode requires the xref:fullscreen.adoc[Full screen] plugin and requires {pluginname} to be running in xref:advcode.adoc#advcode_inline[inline mode].
+NOTE: Full-screen mode requires the xref:fullscreen.adoc[Full screen] plugin and the {pluginname} to be running in xref:advcode.adoc#advcode_inline[inline mode].
 
 == The difference between the Code and Enhanced Code Editor plugins
 
 liveDemo::advcode[]
 
 // include::partial$misc/purchase-premium-plugins.adoc[]
 
-== Example: basic setup
+== Basic setup
 
 [source,js]
 ----
@@ -42,7 +38,9 @@ tinymce.init({
 });
 ----
 
-== Example: enable the {pluginname} full-screen mode button
+== Enable full-screen mode
+
+To enable the full-screen mode button in the {pluginname}, configure the plugin to run in inline mode and include the fullscreen plugin:
 
 [source,js]
 ----
@@ -58,7 +56,15 @@ tinymce.init({
 
 include::partial$misc/code-dialog-and-selection-state.adoc[]
 
-include::partial$configuration/advcode.adoc[]
+== Configuration options
+
+The {pluginname} plugin provides several configuration options to customize its behavior:
+
+include::partial$configuration/advcode_inline.adoc[leveloffset=+1]
+
+include::partial$configuration/advcode_prettify_getcontent.adoc[leveloffset=+1]
+
+include::partial$configuration/advcode_prettify_editor.adoc[leveloffset=+1]
 
 include::partial$misc/advcode-shortcuts.adoc[]
 

modules/ROOT/partials/configuration/advcode_inline.adoc

@@ -0,0 +1,24 @@
+[[advcode_inline]]
+== `+advcode_inline+`
+
+The `+advcode_inline+` option allows the {pluginname} to open within {productname}'s existing editor space instead of displaying in a separate dialog box. This enables the full-screen mode functionality when combined with the fullscreen plugin.
+
+*Type:* `+Boolean+`
+
+*Default value:* `+false+`
+
+*Possible values:* `+true+`, `+false+`
+
+.Example: enable inline mode
+[source,js]
+----
+tinymce.init({
+  selector: "textarea", // change this value according to your HTML
+  plugins: ["fullscreen", "advcode"],
+  toolbar: "code",
+  advcode_inline: true,
+});
+----
+
+[NOTE]
+This option was introduced in {productname} 6.3. When enabled, the {pluginname} replaces the editor content area instead of opening in a modal dialog.

modules/ROOT/partials/configuration/advcode_prettify_editor.adoc

@@ -0,0 +1,35 @@
+[[advcode_prettify_editor]]
+== `+advcode_prettify_editor+`
+
+The `+advcode_prettify_editor+` option controls whether code rendered inside the {pluginname} is automatically formatted with correct indentation. This improves code readability and maintains consistent formatting within the editor.
+
+*Type:* `+Boolean+`
+
+*Default value:* `+true+`
+
+*Possible values:* `+true+`, `+false+`
+
+.Example: disable editor prettification
+[source,js]
+----
+tinymce.init({
+  selector: "textarea", // change this value according to your HTML
+  plugins: "advcode",
+  toolbar: "code",
+  advcode_prettify_editor: false, // disable automatic formatting
+});
+----
+
+.Example: enable editor prettification (default behavior)
+[source,js]
+----
+tinymce.init({
+  selector: "textarea", // change this value according to your HTML
+  plugins: "advcode",
+  toolbar: "code",
+  advcode_prettify_editor: true, // default value
+});
+----
+
+[NOTE]
+This option was introduced in {productname} 7.3. By default, any code rendered inside the {pluginname} will be formatted with correct indentation for improved readability.

modules/ROOT/partials/configuration/advcode_prettify_getcontent.adoc

@@ -0,0 +1,27 @@
+[[advcode_prettify_getcontent]]
+== `+advcode_prettify_getcontent+`
+
+The `+advcode_prettify_getcontent+` option controls whether HTML code is formatted when `editor.getContent()` is called. When enabled, this automatically formats the content using the same formatting as `tinymce.activeEditor.getContent({ prettify: true })`.
+
+*Type:* `+Boolean+`
+
+*Default value:* `+false+`
+
+*Possible values:* `+true+`, `+false+`
+
+.Example: enable content prettification
+[source,js]
+----
+tinymce.init({
+  selector: "textarea", // change this value according to your HTML
+  plugins: "advcode",
+  toolbar: "code",
+  advcode_prettify_getcontent: true,
+});
+----
+
+[IMPORTANT]
+If existing HTML content in the database is not well-formatted or has inconsistent indentation, enabling this option may **change the formatting** of previously saved content, which may be undesirable in some cases.
+
+[NOTE]
+This option was introduced in {productname} 7.3. It provides the same functionality as calling `tinymce.activeEditor.getContent({ prettify: true })` but automatically applies formatting to all `getContent()` calls.