Skip to content

Commit f53da79

Browse files
kemister85kemister85
committed
DOC-2626: Documentation Enhancements: Enhanced Code Editor feature page.
1 parent af92bf5 commit f53da79

File tree

8 files changed

+175
-163
lines changed

8 files changed

+175
-163
lines changed

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

Lines changed: 37 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,37 @@
1-
<table>
2-
<thead>
3-
<tr>
4-
<th style="width: 50%;"><h2>The Code Plugin</h2></th>
5-
<th style="width: 50%;"><h2>The Enhanced Code Editor Plugin</h2></th>
6-
</tr>
7-
</thead>
8-
<tbody>
9-
<tr>
10-
<td style="width: 50%;">
11-
<textarea class="codedemo">
12-
<p>The Code (<code>code</code>) plugin provides a dialog for viewing and editing the HTML of the editor content.</p>
13-
<p>To open the Code dialog:</p>
14-
<ul>
15-
<li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
16-
<li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
17-
<li>Click the <strong>Source code</strong> toolbar button.</li>
18-
</ul>
19-
</textarea>
20-
</td>
21-
<td style="width: 50%;">
22-
<textarea class="advcodedemo">
23-
<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>
24-
<ul>
25-
<li>Syntax highlighting.</li>
26-
<li>Element matching and closing.</li>
27-
<li>Code folding.</li>
28-
<li>Multiple selections/carets.</li>
29-
<li>Search and replace.</li>
30-
<li>Dark or light mode for code display.</li>
31-
<li>Increase and decrease display font size.</li>
32-
<li>Full-screen mode.</li>
33-
</ul>
34-
<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>
35-
<p>To open the Enhanced Code Editor dialog:</p>
36-
<ul>
37-
<li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
38-
<li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
39-
<li>Click the <strong>Source code</strong> toolbar button.</li>
40-
</ul>
41-
</textarea>
42-
</td>
43-
</tr>
44-
</tbody>
45-
</table>
1+
<div style="display: flex; gap: 20px; width: 100%;">
2+
<div style="flex: 1; min-width: 0;">
3+
<h2>The Code Plugin</h2>
4+
<textarea class="codedemo" style="width: 100%;">
5+
<p>The Code (<code>code</code>) plugin provides a dialog for viewing and editing the HTML of the editor content.</p>
6+
<p>To open the Code dialog:</p>
7+
<ul>
8+
<li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
9+
<li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
10+
<li>Click the <strong>Source code</strong> toolbar button.</li>
11+
</ul>
12+
</textarea>
13+
</div>
14+
<div style="flex: 1; min-width: 0;">
15+
<h2>The Enhanced Code Editor Plugin</h2>
16+
<textarea class="advcodedemo" style="width: 100%;">
17+
<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>
18+
<ul>
19+
<li>Syntax highlighting.</li>
20+
<li>Element matching and closing.</li>
21+
<li>Code folding.</li>
22+
<li>Multiple selections/carets.</li>
23+
<li>Search and replace.</li>
24+
<li>Dark or light mode for code display.</li>
25+
<li>Increase and decrease display font size.</li>
26+
<li>Full-screen mode.</li>
27+
</ul>
28+
<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>
29+
<p>To open the Enhanced Code Editor dialog:</p>
30+
<ul>
31+
<li>On the menu bar, open <strong>View</strong> &gt; <strong>Source code</strong>.</li>
32+
<li>On the menu bar, open <strong>Tools</strong> &gt; <strong>Source code</strong>.</li>
33+
<li>Click the <strong>Source code</strong> toolbar button.</li>
34+
</ul>
35+
</textarea>
36+
</div>
37+
</div>

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
tinymce.init({
22
selector: 'textarea.advcodedemo',
33
plugins: 'advcode',
4-
toolbar: 'code',
4+
plugins: [
5+
"advcode", "advlist", "anchor", "autolink", "charmap", "fullscreen",
6+
"help", "image", "insertdatetime", "link", "lists", "media",
7+
"preview", "searchreplace", "table", "visualblocks",
8+
],
9+
toolbar: "code | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
510
height: 600,
11+
width: '100%',
612
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
713
});
814

915
tinymce.init({
1016
selector: 'textarea.codedemo',
11-
plugins: 'code',
12-
toolbar: 'code',
17+
plugins: [
18+
"code", "advlist", "anchor", "autolink", "charmap", "fullscreen",
19+
"help", "image", "insertdatetime", "link", "lists", "media",
20+
"preview", "searchreplace", "table", "visualblocks",
21+
],
22+
toolbar: "code | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
1323
height: 600,
24+
width: '100%',
1425
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
1526
});

‎modules/ROOT/pages/advcode.adoc‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,33 @@
11
= Enhanced Code Editor plugin
22
:navtitle: Enhanced Code Editor
3-
:description: How to setup TinyMCE's Enhanced Code Editor plugin.
4-
:keywords: code, advcode, codemirror
3+
:description: How to setup and configure TinyMCE's Enhanced Code Editor plugin for advanced HTML editing with IDE-like features.
4+
:keywords: code, advcode, codemirror, html editor, code editor, syntax highlighting
55
:pluginname: Enhanced Code Editor
66
:plugincode: advcode
77
:altplugincode: code
88
:pluginminimumplan: tiertwo
99

1010
include::partial$misc/admon-premium-plugin.adoc[]
1111

12-
[TIP]
13-
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}.
12+
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:
1413

15-
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:
14+
* Syntax color highlighting for HTML, CSS, and JavaScript
15+
* Bracket matching and code folding
16+
* Multiple selections and carets for efficient editing
17+
* Search and replace functionality
18+
* Dark or light mode toggle for code display
19+
* Font size adjustment controls
20+
* Full-screen mode for distraction-free editing
1621
17-
* Syntax color highlighting.
18-
* Bracket matching.
19-
* Code folding.
20-
* Multiple selections/carets.
21-
* Search and Replace.
22-
* Dark or light mode button for code display.
23-
* Increase and decrease display font size buttons.
24-
* Full-screen mode button.
25-
26-
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].
22+
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].
2723

2824
== The difference between the Code and Enhanced Code Editor plugins
2925

3026
liveDemo::advcode[]
3127

3228
// include::partial$misc/purchase-premium-plugins.adoc[]
3329

34-
== Example: basic setup
30+
== Basic setup
3531

3632
[source,js]
3733
----
@@ -42,7 +38,9 @@ tinymce.init({
4238
});
4339
----
4440

45-
== Example: enable the {pluginname} full-screen mode button
41+
== Enable full-screen mode
42+
43+
To enable the full-screen mode button in the {pluginname}, configure the plugin to run in inline mode and include the fullscreen plugin:
4644

4745
[source,js]
4846
----
@@ -58,7 +56,15 @@ tinymce.init({
5856

5957
include::partial$misc/code-dialog-and-selection-state.adoc[]
6058

61-
include::partial$configuration/advcode.adoc[]
59+
== Configuration options
60+
61+
The {pluginname} plugin provides several configuration options to customize its behavior:
62+
63+
include::partial$configuration/advcode_inline.adoc[leveloffset=+1]
64+
65+
include::partial$configuration/advcode_prettify_getcontent.adoc[leveloffset=+1]
66+
67+
include::partial$configuration/advcode_prettify_editor.adoc[leveloffset=+1]
6268

6369
include::partial$misc/advcode-shortcuts.adoc[]
6470

‎modules/ROOT/partials/configuration/advcode.adoc‎

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎modules/ROOT/partials/configuration/advcode_inline.adoc‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
[[advcode_inline]]
2+
== `+advcode_inline+`
3+
4+
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.
5+
6+
*Type:* `+Boolean+`
7+
8+
*Default value:* `+false+`
9+
10+
*Possible values:* `+true+`, `+false+`
11+
12+
.Example: enable inline mode
13+
[source,js]
14+
----
15+
tinymce.init({
16+
selector: "textarea", // change this value according to your HTML
17+
plugins: ["fullscreen", "advcode"],
18+
toolbar: "code",
19+
advcode_inline: true,
20+
});
21+
----
22+
23+
[NOTE]
24+
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‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
[[advcode_prettify_editor]]
2+
== `+advcode_prettify_editor+`
3+
4+
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.
5+
6+
*Type:* `+Boolean+`
7+
8+
*Default value:* `+true+`
9+
10+
*Possible values:* `+true+`, `+false+`
11+
12+
.Example: disable editor prettification
13+
[source,js]
14+
----
15+
tinymce.init({
16+
selector: "textarea", // change this value according to your HTML
17+
plugins: "advcode",
18+
toolbar: "code",
19+
advcode_prettify_editor: false, // disable automatic formatting
20+
});
21+
----
22+
23+
.Example: enable editor prettification (default behavior)
24+
[source,js]
25+
----
26+
tinymce.init({
27+
selector: "textarea", // change this value according to your HTML
28+
plugins: "advcode",
29+
toolbar: "code",
30+
advcode_prettify_editor: true, // default value
31+
});
32+
----
33+
34+
[NOTE]
35+
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‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
[[advcode_prettify_getcontent]]
2+
== `+advcode_prettify_getcontent+`
3+
4+
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 })`.
5+
6+
*Type:* `+Boolean+`
7+
8+
*Default value:* `+false+`
9+
10+
*Possible values:* `+true+`, `+false+`
11+
12+
.Example: enable content prettification
13+
[source,js]
14+
----
15+
tinymce.init({
16+
selector: "textarea", // change this value according to your HTML
17+
plugins: "advcode",
18+
toolbar: "code",
19+
advcode_prettify_getcontent: true,
20+
});
21+
----
22+
23+
[IMPORTANT]
24+
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.
25+
26+
[NOTE]
27+
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.

0 commit comments

Comments
 (0)