全页 HTML

最后更新：2026-11-04 10:10:15

此插件仅适用于付费 TinyMCE 订阅。

当 TinyMCE 以 inline 模式运行时，此功能不受支持。它仅在 classic 模式下受支持。有关编辑模式之间差异的更多信息，请参阅内联编辑模式。

Full Page HTML 插件提供了对文档元数据和属性的全面控制。它使用户能够通过直观的对话框界面编辑 HTML 文档元数据，如标题、关键字和描述。当与 code 插件结合使用时，它还会在源代码视图中显示完整的 HTML 结构，包括 <head>、<body> 和各种 meta 标签。

交互式示例

HTML

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

基本设置

要将 Full Page HTML 插件添加到编辑器中，请在编辑器配置的 plugins 选项中添加 fullpagehtml。

例如：

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

有关使用模块打包器捆绑此插件的信息，请参阅捆绑 TinyMCE - 概述。

某些元素可能会被 XSS 过滤机制删除默认情况下，TinyMCE 会过滤 HTML 内容以防止 XSS 攻击。HTML5 规范之外的元素（如 <script>）会被删除，除非通过 valid_elements 或 extended_valid_elements 明确允许。标准的 <meta> 标签会被保留，但 HTML5 规范中未定义的属性（例如 RDFa 的 property 属性）需要明确配置才能保留。
如果集成人员遇到所需元素被删除的问题，可以使用以下配置选项。这些选项会降低安全性，应谨慎使用：
xss_sanitization: false — 禁用 DOMPurify 并移除所有 XSS 保护。
valid_elements: '*[*]' — 允许所有元素和属性。
extended_valid_elements: 'meta[*]' — 扩展模式以允许额外的 <meta> 属性（例如 RDFa property）。
请注意，extended_valid_elements 是累加的，因此所有标准元素和属性仍然有效，同时允许额外的元素和属性。
有关更多详细信息，请参阅 xss_sanitization option 和 valid_elements option。
示例：通过 xss_sanitization 禁用 DOMPurify
tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  toolbar: 'fullpagehtml',
  xss_sanitization: false  // 禁用 TinyMCE 的内置 XSS 清理；允许潜在不安全的 HTML
});
示例：通过 valid_elements 允许所有元素和属性
tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  toolbar: 'fullpagehtml',
  valid_elements: '*[*]'  // 允许所有元素和属性；使用时需极度谨慎
});
示例：通过 extended_valid_elements 扩展 <meta> 支持
tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  toolbar: 'fullpagehtml',
  extended_valid_elements: 'meta[*]'  // 允许额外的 <meta> 属性（如 RDFa property）
});
计划在未来版本中将 <meta> 元素的 RDFa property 属性支持纳入默认的 TinyMCE schema 中。如果您现在需要此属性，请按上述方式使用 extended_valid_elements。
与 Suggested Edits 和 Revision History 不兼容
Full Page HTML 插件与 Suggested Edits 和 Revision History 插件不兼容。在使用这些协作功能时，由 Full Page HTML 插件设置的文档属性和元数据目前无法保留，且可能在审核过程中丢失。
建议： 为避免在问题解决前丢失文档元数据和属性，目前不要将 Full Page HTML 插件与 Suggested Edits 或 Revision History 插件一起使用。
选项
以下配置选项会影响 Full Page HTML 插件的行为。
fullpagehtml_default_doctype
此选项允许您指定输出 HTML 的默认 doctype。
类型： String
可能值： '<!DOCTYPE html>'
默认值： '<!DOCTYPE html>'
示例：使用 fullpagehtml_default_doctype
tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  fullpagehtml_default_doctype: '<!DOCTYPE html>'
});
fullpagehtml_default_title
此选项允许您指定输出 HTML 的默认标题。
类型： String
可能值： 任何表示文档标题的字符串值
默认值： 无默认值（空字符串）
示例：使用 fullpagehtml_default_title
tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  fullpagehtml_default_title: 'My default page title'
});
fullpagehtml_default_encoding
此选项允许您指定输出 HTML 的默认编码。
类型： String
可能值： 任何表示字符编码的字符串值
默认值： 无默认值（空字符串）
示例：使用 fullpagehtml_default_encoding
tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  fullpagehtml_default_encoding: 'ISO-8859-1'
});
fullpagehtml_default_body_style
此选项允许您指定输出 HTML 的默认 body 样式。
类型： String
可能值： 任何表示有效 CSS 样式的字符串值
默认值： 无默认值（空字符串）
示例：使用 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
此选项允许您控制是否在源代码视图中隐藏整页 HTML 结构。
类型： Boolean
可能值： true 或 false
默认值： false
示例：使用 fullpagehtml_hide_in_source_view
tinymce.init({
  selector: 'textarea',
  plugins: 'fullpagehtml',
  fullpagehtml_hide_in_source_view: true
});
当 fullpagehtml_hide_in_source_view 设置为 true 时，源代码视图将仅显示 body 内容，而不显示完整的 HTML 文档结构：
示例
<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>
当设置为 false（默认值）时，源代码视图将显示完整的 HTML 文档：
示例
<!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>
fullpagehtml 选项用于 getContent() 和 setContent()
当 Full Page HTML 插件激活时，editor.getContent() 和 editor.setContent() 默认返回并接受完整的 HTML 文档。fullpagehtml 选项允许在需要时仅获取和设置 body 内容。
在选项对象中传递 fullpagehtml: false 以绕过全页处理，仅处理 body 内容：
editor.getContent({ fullpagehtml: false }) — 仅返回 <body> 内容。
editor.setContent(content, { fullpagehtml: false }) — 仅设置 body 内容而不修改文档头部。
此选项在单独保存或加载 body 内容时非常有用（例如，在数据库中存储内容或与仅期望 body HTML 的系统集成时）。与 fullpagehtml_hide_in_source_view 仅影响源代码视图显示不同，fullpagehtml 选项影响 API 行为且无需配置。
示例：获取和设置 body 内容
// 获取仅 body 内容以供保存
const bodyContent = editor.getContent({ fullpagehtml: false });

// 仅设置 body 内容（保留文档头部）
editor.setContent(newBodyContent, { format: 'html', fullpagehtml: false });
工具栏按钮
Full Page HTML 插件提供以下工具栏按钮：
工具栏按钮标识符描述
fullpagehtml
打开 Full Page HTML 对话框以编辑文档元数据和属性，包括标题、关键词、描述和 HTML 结构设置。
这些工具栏按钮可通过以下方式添加到编辑器中：
通过 toolbar 配置选项。
通过 quickbars_insert_toolbar 配置选项。
自定义上下文工具栏。
工具栏按钮标识符描述
fullpagehtml
打开 Full Page HTML 对话框以编辑文档元数据和属性，包括标题、关键词、描述和 HTML 结构设置。
菜单项
Full Page HTML 插件提供以下菜单项：
菜单项标识符默认菜单位置描述
fullpagehtml
File
打开 Full Page HTML 对话框以编辑文档元数据和属性，包括标题、关键词、描述和 HTML 结构设置。
这些菜单项可通过以下方式添加到编辑器中：
通过 menu 配置选项。
通过 contextmenu 配置选项。
自定义菜单工具栏按钮。
菜单项标识符默认菜单位置描述
fullpagehtml
File
打开 Full Page HTML 对话框以编辑文档元数据和属性，包括标题、关键词、描述和 HTML 结构设置。
命令
Full Page HTML 插件提供以下 TinyMCE 命令：
命令描述
mceFullPageHtmlProperties
打开 Full Page HTML 对话框以编辑文档元数据和属性，包括标题、关键词、描述和 HTML 结构设置。
示例
tinymce.activeEditor.execCommand('mceFullPageHtmlProperties');

全页 HTML

交互式示例

基本设置

选项

`fullpagehtml_default_doctype`

示例：使用 `fullpagehtml_default_doctype`

`fullpagehtml_default_title`

示例：使用 `fullpagehtml_default_title`

`fullpagehtml_default_encoding`

示例：使用 `fullpagehtml_default_encoding`

`fullpagehtml_default_body_style`

示例：使用 `fullpagehtml_default_body_style`

`fullpagehtml_hide_in_source_view`

示例：使用 `fullpagehtml_hide_in_source_view`

`fullpagehtml` 选项用于 `getContent()` 和 `setContent()`

示例：获取和设置 body 内容

工具栏按钮

菜单项

命令

全页 HTML

交互式示例

基本设置

选项

fullpagehtml_default_doctype

示例：使用 fullpagehtml_default_doctype

fullpagehtml_default_title

示例：使用 fullpagehtml_default_title

fullpagehtml_default_encoding

示例：使用 fullpagehtml_default_encoding

fullpagehtml_default_body_style

示例：使用 fullpagehtml_default_body_style

fullpagehtml_hide_in_source_view

示例：使用 fullpagehtml_hide_in_source_view

fullpagehtml 选项用于 getContent() 和 setContent()

示例：获取和设置 body 内容

工具栏按钮

菜单项

命令

`fullpagehtml_default_doctype`

示例：使用 `fullpagehtml_default_doctype`

`fullpagehtml_default_title`

示例：使用 `fullpagehtml_default_title`

`fullpagehtml_default_encoding`

示例：使用 `fullpagehtml_default_encoding`

`fullpagehtml_default_body_style`

示例：使用 `fullpagehtml_default_body_style`

`fullpagehtml_hide_in_source_view`

示例：使用 `fullpagehtml_hide_in_source_view`

`fullpagehtml` 选项用于 `getContent()` 和 `setContent()`