TinyMCE如何实现将列表<li>项的内容包裹在<p>标签中

完全可以实现你需要的<li>内容自动包裹<p>标签的效果，可根据当前使用的TinyMCE版本选择对应方案：

方案1：使用原生内置配置 #

TinyMCE 5.8及以上版本专门提供了对应功能开关，开启后在列表生成、内容编辑、HTML序列化的全流程中，都会自动把<li>下的裸文本内容包裹进<p>标签，无需额外编写自定义逻辑。
只需要在初始化配置中补充两项规则：

• 开启原生的列表项p标签包裹开关：lists_wrap_items_with_paragraphs: true
• 补充合法子节点规则，避免编辑器默认清理逻辑误删<li>下的<p>标签：valid_children: '+li[p]'

方案2：低版本自定义兜底规则 #

如果使用的是5.8之前的旧版本，没有上述原生开关，可以通过注册自定义HTML序列化过滤规则，在编辑器输出内容时自动补全p标签包裹结构。
具体实现逻辑为：在编辑器初始化的setup钩子中，给序列化器添加针对<li>节点的过滤规则，遍历所有列表项，筛选出没有被<p>包裹的裸文本、非段落内容，自动迁移到新建的<p>标签内部。

完整初始化配置示例 #

tinymce.init({
  selector: 'textarea#your-editor',
  // 新版本原生开关配置
  lists_wrap_items_with_paragraphs: true,
  // 允许li嵌套p标签，防止结构被清理
  valid_children: '+li[p]',
  setup: (editor) => {
    // 旧版本无原生开关时的兜底过滤
    editor.serializer.addNodeFilter('li', (nodeList) => {
      nodeList.forEach(liNode => {
        // 找出li下未被p包裹的直接子内容
        const unWrappedNodes = Array.from(liNode.children).filter(node => node.name !== 'p');
        if (unWrappedNodes.length) {
          const pWrapper = editor.dom.create('p');
          // 把未包裹的内容全部移入p标签
          unWrappedNodes.forEach(node => pWrapper.append(node));
          liNode.insert(pWrapper, liNode.firstChild);
        }
      });
    });
  }
})

落地注意事项 #

• 配置生效后，新生成的列表结构会完全匹配你预期的格式，不会残留未被p包裹的裸文本
• 已有的存量旧内容，在进入编辑器、切换视图或重新保存时，会被自动补全为符合要求的结构
• 该逻辑兼容列表项内多段落、行内格式内容的场景，不会破坏原有合法的内容结构

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