如何配置TinyMCE 5使其保留html、head、body等完整HTML标签？

你之前的配置没有生效，核心原因是TinyMCE默认仅编辑标签内部的内容，默认内容模型本身就不识别外层的、等文档级标签，需要调整以下配置：

1. 启用官方fullpage插件（核心） #

TinyMCE官方提供的fullpage插件专门用来支持完整HTML文档的编辑，可原生支持html、head、body、meta、title、link等标签的保留和编辑，无需自己手动定义大量元素规则。

2. 完整配置参考 #

tinymce.init({
  selector: '.editor',
  // 引入fullpage插件是保留文档级标签的核心前提
  plugins: 'fullpage',
  // 保留所有元素和属性
  valid_elements: '*[*]',
  // 显式声明允许的文档级标签及所有属性
  extended_valid_elements: 'html[*],head[*],body[*],script[*],style[*],link[*],meta[*],title[*]',
  // 关闭默认HTML校验，避免自动过滤特殊标签
  verify_html: false,
  // 关闭粘贴默认过滤规则，避免粘贴时剥离外层标签
  paste_enable_default_filters: false,
  // 声明标签的合法父子层级关系
  valid_children: '+html[head|body],+head[meta|title|link|style|script],+body[style|script]'
});

3. 内容获取注意事项 #

编辑完成后如果需要获取包含完整html、head、body结构的内容，不能使用默认的getContent()方法，需要添加format参数：

// 获取完整HTML文档内容
const fullHtml = tinymce.activeEditor.getContent({format: 'raw'});

如果不需要使用fullpage插件自带的文档属性设置UI，可以额外添加配置fullpage_default_dialog: false关闭弹窗即可。

内容的提问来源于stack exchange，提问作者Avi Vaulin