如何阻止Summernote自动给文本包裹<p>标签？含带属性标签处理

下面提供三种可行的方案，覆盖编辑器配置、前端提交处理、后端兜底三个环节，彻底解决首尾p标签（包括带style属性的）问题：

一、Summernote编辑器配置层面处理 #

直接在初始化编辑器时添加回调，实时处理内容：

$('#summernote').summernote({
  callbacks: {
    // 编辑器失去焦点时自动处理内容
    onBlur: function() {
      let content = $(this).summernote('getContent');
      // 移除首尾的p标签（不管有没有属性）
      content = content.replace(/^\s*<p[^>]*>(.*?)<\/p>\s*$/i, '$1');
      // 清理首尾连续的空p标签
      content = content.replace(/^\s*(<p[^>]*>\s*<\/p>)+/i, '');
      content = content.replace(/(<p[^>]*>\s*<\/p>)+\s*$/i, '');
      // 把处理后的内容放回编辑器
      $(this).summernote('pasteHTML', content);
    }
  }
});

这个配置会在用户离开编辑器时自动清理首尾的p标签，不影响编辑过程中的正常排版。

二、jQuery前端提交前处理 #

如果不想修改编辑器的实时行为，可以在表单提交前一次性处理内容：

$('form').submit(function(e) {
  let content = $('#summernote').summernote('getContent');
  
  // 循环移除开头所有的p标签
  while (content.trim().startsWith('<p')) {
    content = content.replace(/^\s*<p[^>]*>(.*?)<\/p>\s*/i, '$1');
  }
  
  // 循环移除结尾所有的p标签
  while (content.trim().endsWith('</p>')) {
    content = content.replace(/\s*<p[^>]*>(.*?)<\/p>\s*$/i, '$1');
  }
  
  // 将处理后的内容赋值到提交字段（比如隐藏域）
  $('#submit-content').val(content);
});

这种方法避免了编辑器实时修改可能带来的交互问题，适合对编辑体验要求较高的场景。

三、PHP后端入库前兜底处理 #

前端处理可能存在遗漏，建议在后端再加一层兜底，确保入库内容干净：

function removeSurroundingPTags($content) {
  // 移除开头的p标签（含属性）
  $content = preg_replace('/^\s*(<p[^>]*>)(.*?)(<\/p>)\s*/i', '$2', $content);
  while (preg_match('/^\s*<p[^>]*>/i', $content)) {
    $content = preg_replace('/^\s*(<p[^>]*>)(.*?)(<\/p>)\s*/i', '$2', $content);
  }
  
  // 移除结尾的p标签（含属性）
  $content = preg_replace('/\s*(<p[^>]*>)(.*?)(<\/p>)\s*$/i', '$2', $content);
  while (preg_match('/<\/p>\s*$/i', $content)) {
    $content = preg_replace('/\s*(<p[^>]*>)(.*?)(<\/p>)\s*$/i', '$2', $content);
  }
  
  // 清理空的p标签
  $content = preg_replace('/<p[^>]*>\s*<\/p>/i', '', $content);
  
  return trim($content);
}

// 使用示例
$rawContent = $_POST['summernote_content'];
$cleanContent = removeSurroundingPTags($rawContent);
// 后续将$cleanContent存入数据库即可

这个正则匹配可以精准识别带任何属性的p标签，不管是style还是class，都能移除首尾的，同时清理空p标签。

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