Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions modules/ROOT/examples/live-demos/fullpagehtml/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<textarea id="fullpagehtml">
<h1>Welcome to Full Page HTML Editing</h1>
<p>This demo demonstrates the capabilities of the <span class="highlight">Full Page HTML plugin</span>. You can:</p>
<ul>
<li>Edit document metadata including title, description, and keywords by clicking the <strong>Full Page HTML</strong> button in the toolbar</li>
<li>Modify HTML document structure and DOCTYPE</li>
<li>Customize body styles and document properties</li>
<li>View and edit the complete HTML structure in source code view or preview plugin under <strong>File</strong> in the menubar</li>
</ul>
<h2>Getting Started</h2>
<p>Click the <strong>Full Page HTML</strong> button in the toolbar to open the document properties dialog. From there, you can modify:</p>
<ul>
<li><strong>Document Title:</strong> Change the page title that appears in browser tabs</li>
<li><strong>Keywords:</strong> Add SEO keywords for search engines</li>
<li><strong>Description:</strong> Set the meta description for search results</li>
<li><strong>Body Style:</strong> Apply custom CSS styles to the document body</li>
<li><strong>HTML Structure:</strong> Modify DOCTYPE and encoding settings</li>
</ul>
<p>Try editing this content and then use the Full Page HTML button to see how the plugin manages the complete document structure!</p>
<p>To view the modified changes open preview which can be found under <strong>File</strong> in the menubar</p>
</textarea>
16 changes: 16 additions & 0 deletions modules/ROOT/examples/live-demos/fullpagehtml/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
tinymce.init({
selector: 'textarea#fullpagehtml',
height: '800px',
plugins: [
"fullpagehtml", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
"help", "image", "insertdatetime", "link", "lists", "media",
"preview", "searchreplace", "table", "visualblocks",
],
toolbar: "fullpagehtml | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
// Full Page HTML Plugin Configuration Options
fullpagehtml_default_doctype: '<!DOCTYPE html>',
fullpagehtml_default_title: 'Full Page HTML Plugin Demo Document',
fullpagehtml_default_encoding: 'UTF-8',
fullpagehtml_default_body_style: 'margin: 20px; padding: 15px; font-family: Georgia, Times, serif; font-size: 16px; color: #2c3e50;',
fullpagehtml_hide_in_source_view: false // Show full page HTML in source view
});
1 change: 1 addition & 0 deletions modules/ROOT/images/icons/default-document-properties.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 0 additions & 10 deletions modules/ROOT/images/icons/document-properties.svg

This file was deleted.

1 change: 1 addition & 0 deletions modules/ROOT/nav.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,7 @@
**** JWT Authentication
***** xref:export-to-word-with-jwt-authentication-nodejs.adoc[Node.js]
***** xref:export-to-word-with-jwt-authentication-php.adoc[PHP]
*** xref:fullpagehtml.adoc[Full Page HTML]
*** xref:footnotes.adoc[Footnotes]
*** xref:formatpainter.adoc[Format Painter]
*** xref:importword.adoc[Import from Word]
Expand Down
15 changes: 8 additions & 7 deletions modules/ROOT/pages/8.1.0-release-notes.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ include::partial$misc/admon-releasenotes-for-stable.adoc[]

The following new Premium plugin was released alongside {productname} {release-version}.

// === <Premium plugin name>
=== Full Page HTML

// The new Premium plugin, **<Premium plugin name>** // description here.
The new Premium plugin, **Full Page HTML** provides comprehensive control over document metadata and properties. It enables users to edit HTML document metadata such as title, keywords, and description through an intuitive dialog interface. When combined with the code plugin, it also exposes the complete HTML structure including `<head>`, `<body>`, and various meta tags in the source code view.

// For information on the **<Premium plugin name>** plugin, see xref:<plugincode>.adoc[<Premium plugin name>].
For information on the **Full Page HTML** plugin, see xref:fullpagehtml.adoc[Full Page HTML].


[[accompanying-premium-plugin-changes]]
Expand Down Expand Up @@ -138,9 +138,10 @@ The following premium plugin updates were released alongside {productname} {rele

This section describes issues that users of {productname} {release-version} may encounter and possible workarounds for these issues.

There <is one | are <number> known issue<s> in {productname} {release-version}.
There is one known issue in {productname} {release-version}.

// === <TINY-vwxyz 1 changelog entry>
// #TINY-vwxyz1
=== Full Page HTML plugin incompatibility with Suggested Edits and Revision History

The Full Page HTML plugin enables document properties and metadata to be set. However, these are not picked up by Suggested Edits and Revision History, and actions performed in these plugins will overwrite the values set by the Full Page plugin.

// CCFR here.
**Workaround:** Avoid using the Full Page HTML plugin in combination with Suggested Edits or Revision History plugins to prevent data loss of document metadata and properties.
6 changes: 6 additions & 0 deletions modules/ROOT/pages/available-menu-items.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,12 @@ include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]
:plugincode: emoticons
include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]

:plugincategory: premium
:pluginname: Full Page HTML
:plugincode: fullpagehtml
:pluginpage: fullpagehtml.adoc
include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]

:plugincategory: premium
:pluginname: Export to PDF
:plugincode: exportpdf
Expand Down
6 changes: 6 additions & 0 deletions modules/ROOT/pages/available-toolbar-buttons.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,12 @@ include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]
:plugincode: emoticons
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]

:plugincategory: premium
:pluginname: Full Page HTML
:plugincode: fullpagehtml
:pluginpage: fullpagehtml.adoc
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]

:plugincategory: premium
:pluginname: Export to PDF
:plugincode: exportpdf
Expand Down
124 changes: 124 additions & 0 deletions modules/ROOT/pages/fullpagehtml.adoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
= Full Page HTML Plugin
:navtitle: Full Page HTML
:description: Edit metadata and document properties including title, keywords, and description via a dialog box, with HTML structure exposure in source code view.
:description_short: Edit document metadata and properties with dialog interface and source code exposure.
:keywords: full page html, metadata, document properties, title, keywords, description, HTML structure, source code
:pluginname: Full Page HTML
:plugincode: fullpagehtml
:plugincategory: premium

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

include::partial$misc/admon-inline-not-supported.adoc[]

The {pluginname} plugin provides comprehensive control over document metadata and properties. It enables users to edit HTML document metadata such as title, keywords, and description through an intuitive dialog interface. When combined with the code plugin, it also exposes the complete HTML structure including `<head>`, `<body>`, and various meta tags in the source code view.


== Interactive example


liveDemo::{plugincode}[]

== Basic setup

To add the {pluginname} plugin to the editor, add `{plugincode}` to the `plugins` option in the editor configuration.

For example:

[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'fullpagehtml',
toolbar: 'fullpagehtml',
fullpagehtml_default_doctype: '<!DOCTYPE html>'
});
----

[WARNING]
====
**Certain elements may be removed by XSS sanitization**
By default, {productname} sanitizes HTML content to protect against XSS attacks. Elements outside the HTML5 specification, such as `<script>`, are removed. Standard `<meta>` tags are preserved, but attributes not defined in the HTML5 spec (for example, the RDFa `property` attribute) require explicit configuration to be retained.

If integrators encounter issues with required elements being removed, the following configuration options are available. These options reduce security and should be used with caution:

* `xss_sanitization: false` — Disables DOMPurify and removes all XSS protections.
* `+valid_elements: '*[*]'+` — Allows all elements and attributes.
* `extended_valid_elements: 'meta[*]'` — Extends the schema to allow additional `<meta>` attributes (for example, RDFa `property`).

Note that `extended_valid_elements` is *additive*, so all standard elements and attributes remain valid while additional ones are permitted.

For more details, see xref:security.adoc#xss_sanitization-option[xss_sanitization option] and xref:content-filtering.adoc#valid_elements[valid_elements option].

.Example: disabling DOMPurify with `xss_sanitization`
[source,js]
----
tinymce.init({
selector: 'textarea',
plugins: 'fullpagehtml',
toolbar: 'fullpagehtml',
xss_sanitization: false // Disables TinyMCE's built-in XSS sanitization; allows potentially unsafe HTML
});
----

.Example: allowing all elements and attributes with `valid_elements`
[source,js]
----
tinymce.init({
selector: 'textarea',
plugins: 'fullpagehtml',
toolbar: 'fullpagehtml',
valid_elements: '*[*]' // Permits all elements and attributes; use with extreme caution
});
----

.Example: extending `<meta>` support with `extended_valid_elements`
[source,js]
----
tinymce.init({
selector: 'textarea',
plugins: 'fullpagehtml',
toolbar: 'fullpagehtml',
extended_valid_elements: 'meta[*]' // Permits additional <meta> attributes (such as RDFa property)
});
----

Support for the RDFa `property` attribute on `<meta>` elements is planned for inclusion in the default {productname} schema in future releases. If you require this attribute now, use `extended_valid_elements` as shown above.
====

[NOTE]
====
**Incompatibility with Suggested Edits and Revision History**

The Full Page HTML plugin is not compatible with the Suggested Edits and Revision History plugins. Document properties and metadata set by the Full Page HTML plugin are not currently preserved when using these collaboration features, and may be lost during the review process.

**Recommendation:** Avoid using the {pluginname} plugin in combination with Suggested Edits or Revision History plugins to prevent data loss of document metadata and properties at this current time until this issue is resolved.
====

== Options

The following configuration options affect the behavior of the {pluginname} plugin.

include::partial$configuration/fullpagehtml-default-doctype.adoc[leveloffset=+1]

include::partial$configuration/fullpagehtml-default-title.adoc[leveloffset=+1]

include::partial$configuration/fullpagehtml-default-encoding.adoc[leveloffset=+1]

include::partial$configuration/fullpagehtml-default-body-style.adoc[leveloffset=+1]

include::partial$configuration/fullpagehtml-hide-in-source-view.adoc[leveloffset=+1]

include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]

include::partial$toolbar-button-ids/{plugincode}-toolbar-buttons.adoc[leveloffset=+1]

include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]

include::partial$menu-item-ids/{plugincode}-menu-items.adoc[leveloffset=+1]

== Commands

The {pluginname} plugin provides the following {productname} command.

include::partial$commands/fullpagehtml-cmds.adoc[leveloffset=+1]
6 changes: 6 additions & 0 deletions modules/ROOT/pages/how-to-guides.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,12 @@ xref:events.adoc[Available Events]

List of common editor events

a|
[.lead]
xref:fullpagehtml.adoc[Full Page HTML Plugin]

Edit document metadata and properties including title, keywords, and description via dialog interface.

a|
[.lead]
xref:keyboard-shortcuts.adoc[Keyboard shortcuts]
Expand Down
11 changes: 11 additions & 0 deletions modules/ROOT/partials/commands/fullpagehtml-cmds.adoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
[cols="1,3",options="header"]
|===
|Command |Description
|mceFullPageHtmlProperties |Opens the Full Page HTML dialog to edit document metadata and properties including title, keywords, description, and HTML structure settings.
|===

.Example
[source,js]
----
tinymce.activeEditor.execCommand('mceFullPageHtmlProperties');
----
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
[[fullpagehtml-default-body-style]]
== `+fullpagehtml_default_body_style+`

This option enables you to specify the default body style for the output HTML.

*Type:* `+String+`

*Possible values:* Any string value representing valid CSS styles

*Default value:* No default value (empty string)

=== Example: using `+fullpagehtml_default_body_style+`

[source,js]
----
tinymce.init({
selector: 'textarea',
plugins: 'fullpagehtml',
fullpagehtml_default_body_style: 'margin: 20px; padding: 10px; font-family: Arial, sans-serif;'
});
----
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
[[fullpagehtml-default-doctype]]
== `+fullpagehtml_default_doctype+`

This option enables you to specify the default doctype for the output HTML.

*Type:* `+String+`

*Possible values:* `+'<!DOCTYPE html>'+`

*Default value:* `+'<!DOCTYPE html>'+`

=== Example: using `+fullpagehtml_default_doctype+`

[source,js]
----
tinymce.init({
selector: 'textarea',
plugins: 'fullpagehtml',
fullpagehtml_default_doctype: '<!DOCTYPE html>'
});
----
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
[[fullpagehtml-default-encoding]]
== `+fullpagehtml_default_encoding+`

This option enables you to specify the default encoding for the output HTML.

*Type:* `+String+`

*Possible values:* Any string value representing a character encoding

*Default value:* No default value (empty string)

=== Example: using `+fullpagehtml_default_encoding+`

[source,js]
----
tinymce.init({
selector: 'textarea',
plugins: 'fullpagehtml',
fullpagehtml_default_encoding: 'ISO-8859-1'
});
----
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
[[fullpagehtml-default-title]]
== `+fullpagehtml_default_title+`

This option enables you to specify the default title for the output HTML.

*Type:* `+String+`

*Possible values:* Any string value representing the document title

*Default value:* No default value (empty string)

=== Example: using `+fullpagehtml_default_title+`

[source,js]
----
tinymce.init({
selector: 'textarea',
plugins: 'fullpagehtml',
fullpagehtml_default_title: 'My default page title'
});
----
Loading