如何移除Summernote自动包裹内容的h1标签？

以下几种方法可以解决这个问题，按推荐优先级排序：

1. 从Summernote配置源头避免生成H1 #

直接修改Summernote的初始化配置，强制默认使用<p>标签作为内容的根容器，同时可调整工具栏避免误选H1格式：

$(document).ready(function() {
  $('#summernote').summernote({
    height: 300,
    // 设置默认段落块为p标签
    defaultParagraphBlock: 'p',
    // 禁用span包裹样式的行为（可选，让HTML结构更简洁）
    styleWithSpan: false,
    // 自定义工具栏，移除不必要的H1选项（按需选择）
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['font', ['strikethrough']],
      ['fontsize', ['fontsize']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['insert', ['link', 'picture']],
      ['view', ['codeview', 'help']]
    ]
  });
});

这个方法从根源解决问题，后续新增内容不会再被H1包裹。

2. Laravel后端保存时剥离外层H1 #

如果已有历史数据被H1包裹，或者担心前端配置失效，可在后端处理内容时用DOM解析移除外层H1：

// 在文章保存的控制器方法中
use Illuminate\Http\Request;

public function store(Request $request)
{
    $content = $request->input('content');
    
    // 解析HTML并处理UTF-8编码，避免乱码
    libxml_use_internal_errors(true);
    $dom = new \DOMDocument();
    $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
    libxml_clear_errors();
    
    // 查找外层的H1标签
    $h1Element = $dom->getElementsByTagName('h1')->item(0);
    if ($h1Element) {
        // 提取H1内部的所有内容
        $innerContent = '';
        foreach ($h1Element->childNodes as $node) {
            $innerContent .= $dom->saveHTML($node);
        }
        $content = trim($innerContent);
    }
    
    // 保存到数据库
    $post = new \App\Models\Post();
    $post->content = $content;
    // 其他字段赋值...
    $post->save();
    
    return redirect()->route('posts.index');
}

这个方法属于兜底处理，确保无论前端传入什么格式，最终存储的内容都没有外层H1。

3. 前端展示时移除H1标签 #

如果不想修改后端和编辑器配置，也可以在前端展示内容时用JS移除外层H1：

document.addEventListener('DOMContentLoaded', function() {
    const contentWrapper = document.querySelector('.post-content');
    if (!contentWrapper) return;
    
    const outerH1 = contentWrapper.querySelector('h1');
    if (outerH1) {
        // 将H1的子节点移到父容器中
        while (outerH1.firstChild) {
            contentWrapper.appendChild(outerH1.firstChild);
        }
        // 移除空的H1标签
        outerH1.remove();
    }
});

使用时需要把.post-content替换成你实际展示内容的容器选择器。

内容的提问来源于stack exchange，提问作者Alphy Gacheru