多级列表首字母大写实现方案（JS、jQuery）

我明白你要解决的核心痛点：在没有类名和ID的情况下，精准区分嵌套列表的一级、二级元素，只修改对应层级的文本首字母，同时完全保留子级HTML结构。这确实是DOM操作里很典型的「精准定位+局部文本修改」场景，结合CKEditor的API可以做到很可靠的实现。

下面是分步的解决方案：

1. 核心思路：通过DOM层级关系定位目标列表项 #

不用类/ID的话，我们只能靠元素的嵌套关系来区分层级：

• 一级列表项：直接作为<ul>或<ol>的直接子元素的<li>，它的父元素是列表容器，而非另一个<li>
• 二级列表项：父元素是<li>内部的<ul>/<ol>，祖父元素是一级<li>

结合CKEditor的选区API，我们可以先获取当前选区范围内的所有元素，再筛选出符合层级条件的<li>。

2. 实现一级列表首字母大写（不影响子级） #

关键是只修改<li>的直接文本节点，跳过它内部的子元素（比如二级列表）。可以用CKEditor的Model API来安全操作：

// 在CKEditor插件的命令逻辑中
editor.commands.add('capitalizeFirstLevel', {
    execute: (editor) => {
        const selection = editor.model.document.selection;
        const ranges = selection.getRanges();
        
        editor.model.change(writer => {
            ranges.forEach(range => {
                // 遍历范围内的所有<li>元素
                range.getItems().forEach(item => {
                    if (item.is('element', 'li')) {
                        // 判断是否是一级列表项：父元素是<ul>/<ol>
                        const parent = item.parent;
                        if (parent.is('element', 'ul') || parent.is('element', 'ol')) {
                            // 获取<li>的直接文本节点
                            const textNodes = Array.from(item.getChildren()).filter(child => child.is('text'));
                            
                            textNodes.forEach(textNode => {
                                let text = textNode.data;
                                // 处理开头的空格，只大写第一个有效字符
                                text = text.replace(/^\s*([a-z])/, (match, p1) => match.replace(p1, p1.toUpperCase()));
                                writer.setText(text, textNode);
                            });
                        }
                    }
                });
            });
        });
    },
    refresh: (editor) => {
        // 只有选中列表时才激活命令
        const selection = editor.model.document.selection;
        this.isEnabled = selection.getSelectedElement()?.is('element', 'li') || 
                         selection.getFirstPosition()?.parent.is('element', 'li');
    }
});

3. 单独处理二级列表（不影响一级） #

逻辑和一级类似，只是调整层级判断条件：

editor.commands.add('capitalizeSecondLevel', {
    execute: (editor) => {
        const selection = editor.model.document.selection;
        const ranges = selection.getRanges();
        
        editor.model.change(writer => {
            ranges.forEach(range => {
                range.getItems().forEach(item => {
                    if (item.is('element', 'li')) {
                        // 判断是否是二级列表项：父元素是<li>里的<ul>/<ol>
                        const parent = item.parent;
                        const grandParent = parent.parent;
                        if ((parent.is('element', 'ul') || parent.is('element', 'ol')) && grandParent.is('element', 'li')) {
                            const textNodes = Array.from(item.getChildren()).filter(child => child.is('text'));
                            
                            textNodes.forEach(textNode => {
                                let text = textNode.data;
                                text = text.replace(/^\s*([a-z])/, (match, p1) => match.replace(p1, p1.toUpperCase()));
                                writer.setText(text, textNode);
                            });
                        }
                    }
                });
            });
        });
    },
    refresh: (editor) => {
        const selection = editor.model.document.selection;
        this.isEnabled = selection.getSelectedElement()?.is('element', 'li') || 
                         selection.getFirstPosition()?.parent.is('element', 'li');
    }
});

4. 关键细节说明 #

• 为什么用CKEditor的Model API而不是直接操作DOM？因为CKEditor的Model层会自动处理视图同步，避免直接操作DOM导致的编辑器状态不一致。
• 处理文本时用正则跳过开头空格，确保即使列表项开头有缩进空格，也只大写第一个实际字符。
• 只修改<li>的直接文本节点，完全不会触动它内部的子元素（比如二级列表、链接等），完美保留子级HTML结构。

如果需要调整选区的范围判断（比如处理整个文档的一级列表，而不是选中的部分），只需要把range.getItems()换成遍历整个文档的列表元素即可。

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