如何移除TinyMCE回车空白？表单提交前自带处理方法咨询

刚好之前也碰到过类似的坑，给你分享两个完全基于TinyMCE本身的解决方案，不用额外依赖HTMLPurifier~

一、提交前用TinyMCE自带方法清理无效空白 #

jQuery Validation识别不了<p>  </p>这种“伪空白”内容，我们可以在表单提交前，用TinyMCE的API把这类无效内容清掉，让验证逻辑能正确识别空字段：

方法1：绑定表单提交事件做清理 #

直接给表单加提交事件，拿到编辑器内容后做正则清理：

$('form').submit(function() {
  // 获取你的编辑器实例，替换成实际的编辑器ID
  const editor = tinymce.get('your-editor-id');
  if (editor) {
    let content = editor.getContent();
    // 把 转成普通空格，再移除空的p标签，最后去掉首尾空格
    content = content.replace(/&nbsp;/g, ' ').replace(/<p>\s*<\/p>/g, '').trim();
    // 如果清理后内容为空，就把编辑器内容设为空字符串
    if (!content) {
      editor.setContent('');
    }
  }
  // 放行表单提交，让验证逻辑继续执行
  return true;
});

这样处理后，当用户只输入空格或换行时，编辑器内容会被清空，jQuery Validation就能正常触发必填提示了。

方法2：初始化编辑器时绑定提交事件 #

也可以在TinyMCE初始化的时候，直接给编辑器绑定submit事件，逻辑和上面一致：

tinymce.init({
  selector: '#your-editor-id',
  setup: function(editor) {
    editor.on('submit', function() {
      let content = editor.getContent();
      content = content.replace(/&nbsp;/g, ' ').replace(/<p>\s*<\/p>/g, '').trim();
      if (!content) {
        editor.setContent('');
      }
    });
  }
});

二、移除回车产生的空白段落 #

关于回车生成的空白，我们可以从配置和事件监听两个角度解决：

方法1：修改回车生成的标签 #

默认TinyMCE按回车会生成<p>标签，你可以改成<br>，从根源上避免空段落的产生：

tinymce.init({
  selector: '#your-editor-id',
  forced_root_block: 'br', // 回车生成<br>而非<p>
  force_br_newlines: true,
  force_p_newlines: false
});

方法2：实时移除空段落 #

如果还是想用<p>标签，那可以监听编辑器的键盘事件，实时清理空的<p>标签：

tinymce.init({
  selector: '#your-editor-id',
  setup: function(editor) {
    editor.on('keyup', function() {
      let content = editor.getContent();
      // 移除所有仅包含空白的p标签
      content = content.replace(/<p>\s*<\/p>/g, '');
      editor.setContent(content);
    });
  }
});

另外，要是你需要严格控制编辑器内容，还可以用valid_elements配置来限制允许的标签和属性，不过这个更适合内容要求比较严格的场景。

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