TinyMCE5仅在Firefox浏览器自动添加p标签问题求助（Angular环境）

问题根因 #

TinyMCE 5.x版本对换行相关配置做了调整，旧版单独使用force_p_newlines: false的方案不再生效，且Firefox内核的默认文本换行处理逻辑和Chromium内核不同，会自动将换行转换为块级p标签。

修复步骤 #

在你现有的init配置中新增以下参数即可：

• forced_root_block: ''：禁用编辑器默认给所有内容外层包裹p标签的逻辑，这是TinyMCE 5中换行配置生效的前提
• force_p_newlines: false：关闭换行自动生成p标签的逻辑
• force_br_newlines: true：强制所有换行转换为br标签，适配Firefox的换行处理规则
• convert_newlines_to_brs: true：你当前使用的是只读模式，该配置可以保证初始加载的文本内容里的换行不会被自动转成p标签
• remove_trailing_brs: false：避免编辑器自动清理行尾的br标签，防止内容渲染时出现格式偏移

修改后的完整配置示例 #

<editor name="resultEditor" 
        contenteditable="false" overflow="true" id="resultEditor" [(ngModel)]="resultEditor"
        [disabled]="true"
        [init]="{base_url: '/tinymce',
        suffix: '.min',
        height: 450,
        menubar: false,
        branding: false,
        toolbar: false,
        statusbar: false,
        forced_root_block: '',
        force_p_newlines: false,
        force_br_newlines: true,
        convert_newlines_to_brs: true,
        remove_trailing_brs: false,
        content_style: '.mce-content-body { font-family: monospace;} p {margin: 0}'}">
</editor>

兼容兜底方案 #

如果配置修改后仍有异常，可以在编辑器初始化完成的回调中手动过滤多余p标签：

// 在init配置中新增setup回调
setup: editor => {
  editor.on('init', () => {
    const content = editor.getContent().replace(/<p[^>]*>(.*?)<\/p>/g, '$1<br>')
    editor.setContent(content)
  })
}

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