TinyMCE提交表单时带编号列表的粗体标签被移除问题排查

问题现象 #

使用TinyMCE编辑器时，提交表单后发现带编号列表的粗体文本中的<strong>标签被移除，仅保留普通文本或<p>标签，格式化效果丢失。

核心配置问题 #

问题出在valid_children配置上：
你设置了 valid_children : 'span[style]'，这意味着TinyMCE只允许<span>标签作为合法子元素存在。而编号列表的结构是<ol><li><strong>...</strong></li></ol>，<li>作为父元素，其内部的<strong>标签不符合该规则，直接被编辑器过滤移除。

修复方案 #

1. 调整valid_children配置 #

修改该配置，允许列表项与粗体、斜体等行内标签的嵌套关系，示例如下：

valid_children : '+body[ol|ul], +li[strong|em|u|span], span[style]'

配置说明：

• +body[ol|ul]：允许<body>下存在有序/无序列表标签
• +li[strong|em|u|span]：允许列表项<li>内包含粗体、斜体、下划线、span标签
• span[style]：保留原有的span标签允许带style属性的规则

2. 优化冗余配置（可选） #

你当前的plugins配置里重复写了lists，可以去掉重复项，避免冗余：

plugins : 'code advlist autolink lists charmap preview'

修改后的完整配置示例 #

tinymce.init({
    branding: false,
    statusbar: false,
    resize:true,
    height : height,
    selector: '#' + elemId,
    plugins : 'code advlist autolink lists charmap preview', // 移除重复的lists
    toolbar: "code | undo redo | italic | underline | bold | alignleft aligncenter alignright alignjustify | bullist numlist | removeformat",
    menubar: 'file edit insert view tools help',
    formats:{
        underline : {inline : 'u', exact : true}
    },
    paste_block_drop: false,
    paste_as_text: false,
    paste_data_images: false,
    paste_postprocess: (editor, args) => {
        console.log(editor);
        args.content += ' preprocess';
    },
    removed_menuitems: 'newdocument print',
    contextmenu: false,
    inline_styles: false,
    valid_children : '+body[ol|ul], +li[strong|em|u|span], span[style]', // 核心修改项
    invalid_elements : 'style, form, input, button, textarea, select, i, h1, h2, h3, h4, h5, h6, img, table, td, tr, th, a',
    onchange_callback: 'editorOnChange',
    on_paste_remove_styles:true,
    forced_root_block: false,
    setup: function (editor) {
        editor.on('keyup', function (e) {
            let tinyElem = $('.tox-tinymce');
            let textElem = $('.tinymce');
            if(editor.getContent().length > 0){
                let style = tinyElem.attr('style').replace('#dc3545', '#6c757d');
                tinyElem.attr('style', style);
                textElem.removeClass('is-invalid');
                textElem.siblings('.form-label').removeClass('error');
            }else if(editor.getContent().length == 0){
                let style = tinyElem.attr('style').replace('#6c757d', '#dc3545');
                tinyElem.attr('style', style);
                textElem.addClass('is-invalid');
                textElem.siblings('.form-label').addClass('error');
            }
        });
        editor.on('PastePreProcess', function(e){
            // 禁止粘贴emoji
            e.content = e.content.replace(/([✀-➿]|[-]|�[�-�]|�[�-�]|[‑-⛿]|�[�-�])/g, '');
        });
    }
});

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