Full Page HTML Plugin

This plugin is only available for paid TinyMCE subscriptions.

This feature is not supported when TinyMCE is run in inline mode. It is only supported in classic mode. For more information on the differences between the editing modes, see Inline editing mode.

The Full Page HTML 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

TinyMCE
HTML
JS
Edit on CodePen

<h1>Welcome to Full Page HTML Editing</h1>
 This demo demonstrates the capabilities of the Full Page HTML plugin. You can:
 <ul>
 <li>Edit document metadata including title, description, and keywords by clicking the Full Page HTML 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 File in the menubar</li>
 </ul>
 <h2>Getting Started</h2>
 Click the Full Page HTML button in the toolbar to open the document properties dialog. From there, you can modify:
 <ul>
 <li>Document Title: Change the page title that appears in browser tabs</li>
 <li>Keywords: Add SEO keywords for search engines</li>
 <li>Description: Set the meta description for search results</li>
 <li>Body Style: Apply custom CSS styles to the document body</li>
 <li>HTML Structure: Modify DOCTYPE and encoding settings</li>
 </ul>
 Try editing this content and then use the Full Page HTML button to see how the plugin manages the complete document structure!
 To view the modified changes open preview which can be found under File in the menubar

<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>

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
});

Basic setup

To add the Full Page HTML plugin to the editor, add fullpagehtml to the plugins option in the editor configuration.

For example:

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

Certain elements may be removed by XSS sanitization By default, TinyMCE 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 xss_sanitization option and valid_elements option.

Example: disabling DOMPurify with xss_sanitization

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

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

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 TinyMCE schema in future releases. If you require this attribute now, use extended_valid_elements as shown above.

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 Full Page HTML 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 Full Page HTML plugin.

`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`

tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  fullpagehtml_default_doctype: '<!DOCTYPE html>'
});

`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`

tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  fullpagehtml_default_title: 'My default page title'
});

`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`

tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  fullpagehtml_default_encoding: 'ISO-8859-1'
});

`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`

tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  fullpagehtml_default_body_style: 'margin: 20px; padding: 10px; font-family: Arial, sans-serif;'
});

`fullpagehtml_hide_in_source_view`

This option enables you to control whether the full page HTML structure is hidden in source code view.

Type: Boolean

Possible values: true or false

Default value: false

Example: using `fullpagehtml_hide_in_source_view`

tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  fullpagehtml_hide_in_source_view: true
});

When fullpagehtml_hide_in_source_view is set to true, the source code view will show only the body content without the full HTML document structure:

Example

<h1>Welcome to Our Website</h1>
<p>This is the main content area where users can edit text, add images, and format their content.</p>
<ul>
  <li>First bullet point</li>
  <li>Second bullet point</li>
</ul>

When set to false (default), the source code view shows the complete HTML document:

Example

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Full Page HTML Plugin Demo Document</title>
</head>
<body style="margin: 20px; padding: 15px; font-family: Georgia, Times, serif; font-size: 16px; color: #2c3e50;">
  <h1>Welcome to Our Website</h1>
  <p>This is the main content area where users can edit text, add images, and format their content.</p>
  <ul>
    <li>First bullet point</li>
    <li>Second bullet point</li>
  </ul>
</body>
</html>

The Full Page HTML plugin provides the following toolbar buttons:

Toolbar button identifier Description

Toolbar button identifier	Description
`fullpagehtml`	Opens the Full Page HTML dialog to edit document metadata and properties including title, keywords, description, and HTML structure settings.

fullpagehtml

Opens the Full Page HTML dialog to edit document metadata and properties including title, keywords, description, and HTML structure settings.

These toolbar buttons can be added to the editor using:

The toolbar configuration option.
The quickbars_insert_toolbar configuration option.
Custom Context toolbars.

Toolbar button identifier Description

Toolbar button identifier	Description
`fullpagehtml`	Opens the Full Page HTML dialog to edit document metadata and properties including title, keywords, description, and HTML structure settings.

fullpagehtml

Opens the Full Page HTML dialog to edit document metadata and properties including title, keywords, description, and HTML structure settings.

The Full Page HTML plugin provides the following menu items:

Menu item identifier Default Menu Location Description

Menu item identifier	Default Menu Location	Description
`fullpagehtml`	File	Opens the Full Page HTML dialog to edit document metadata and properties including title, keywords, description, and HTML structure settings.

fullpagehtml

File

Opens the Full Page HTML dialog to edit document metadata and properties including title, keywords, description, and HTML structure settings.

These menu items can be added to the editor using:

The menu configuration option.
The contextmenu configuration option.
Custom Menu toolbar buttons.

Menu item identifier Default Menu Location Description

Menu item identifier	Default Menu Location	Description
`fullpagehtml`	File	Opens the Full Page HTML dialog to edit document metadata and properties including title, keywords, description, and HTML structure settings.

fullpagehtml

File

Opens the Full Page HTML dialog to edit document metadata and properties including title, keywords, description, and HTML structure settings.

Commands

The Full Page HTML plugin provides the following TinyMCE command.

Command	Description
mceFullPageHtmlProperties	Opens the Full Page HTML dialog to edit document metadata and properties including title, keywords, description, and HTML structure settings.

Command

Description

mceFullPageHtmlProperties

Opens the Full Page HTML dialog to edit document metadata and properties including title, keywords, description, and HTML structure settings.

Example

tinymce.activeEditor.execCommand('mceFullPageHtmlProperties');

Full Page HTML Plugin

Interactive example

Basic setup

Options

fullpagehtml_default_doctype

Example: using fullpagehtml_default_doctype

fullpagehtml_default_title

Example: using fullpagehtml_default_title

fullpagehtml_default_encoding

Example: using fullpagehtml_default_encoding

fullpagehtml_default_body_style

Example: using fullpagehtml_default_body_style

fullpagehtml_hide_in_source_view

Example: using fullpagehtml_hide_in_source_view

Toolbar buttons

Menu items

Commands

`fullpagehtml_default_doctype`

Example: using `fullpagehtml_default_doctype`

`fullpagehtml_default_title`

Example: using `fullpagehtml_default_title`

`fullpagehtml_default_encoding`

Example: using `fullpagehtml_default_encoding`

`fullpagehtml_default_body_style`

Example: using `fullpagehtml_default_body_style`

`fullpagehtml_hide_in_source_view`

Example: using `fullpagehtml_hide_in_source_view`