如何从TinyMCE获取HTML标记？

嘿，作为TinyMCE新手，你的这个疑问其实挺普遍的～ 先给你明确说：TinyMCE和几乎所有主流富文本编辑器（RTE）都完全支持访问HTML标记，包括你想要的“完整HTML”，只是默认的getContent()行为可能让你产生了误解。

针对TinyMCE的解决方案 #

默认情况下，tinymce.activeEditor.getContent()只返回编辑器编辑区域内的“核心内容”（比如你输入的<p>Hello World</p>这类），但通过调整参数，你可以获取更完整的HTML结构：

• 如果你想获取包含编辑器根容器（比如<body>或<div>，取决于你的配置）的完整编辑区HTML，可以使用带full参数的调用：

  const fullEditorHtml = tinymce.activeEditor.getContent({ full: true });
  

  这个方法会返回包括编辑器根节点在内的所有HTML，比如如果你的编辑器配置用<body>作为根，返回结果会是<body>...</body>及其内部所有内容。
• 如果你需要生成完整的HTML文档（包含DOCTYPE、<html>、<head>带样式等），可以手动拼接内容，结合TinyMCE的配置来补全：

  const contentCss = tinymce.activeEditor.settings.content_css || '';
  const fullHtmlDocument = `<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    ${contentCss ? `<link rel="stylesheet" href="${contentCss}">` : ''}
  </head>
  <body>${tinymce.activeEditor.getContent()}</body>
  </html>`;
  

其他RTE的通用情况 #

几乎所有主流RTE（比如CKEditor、Quill等）都提供了类似的API：

• CKEditor 5可以通过editor.getRoot().outerHTML获取包含根元素的完整编辑区HTML，editor.getData()获取核心内容；
• Quill则可以通过quill.root.innerHTML获取编辑区的完整HTML结构。

核心逻辑都是：编辑器默认返回用户直接编辑的内容，但通过特定API或属性，你可以获取到包含容器或完整文档结构的HTML标记。

内容的提问来源于stack exchange，提问作者Harsh Patel