Monaco Editor自定义折叠图标：将上下箭头替换为加减号可行吗？

可以实现，这里提供两种可行方案：

方案一：CSS样式覆盖（最简单快速） #

Monaco Editor的折叠图标通过特定CSS类控制，直接覆盖这些类的样式即可替换图标，无需修改编辑器逻辑：

/* 替换"可折叠"状态（未折叠，点击可收起）的图标为减号 */
.monaco-editor .folding-collapse {
    background: none !important;
}
.monaco-editor .folding-collapse::after {
    content: "-";
    display: inline-block;
    width: 16px;
    text-align: center;
    font-weight: bold;
    color: inherit; /* 继承编辑器默认文字颜色 */
}

/* 替换"已折叠"状态（点击可展开）的图标为加号 */
.monaco-editor .folding-expand {
    background: none !important;
}
.monaco-editor .folding-expand::after {
    content: "+";
    display: inline-block;
    width: 16px;
    text-align: center;
    font-weight: bold;
    color: inherit;
}

注意：确保这段CSS在Monaco Editor的默认样式之后加载，或者通过提升选择器优先级（比如添加父容器类）来避免被默认样式覆盖。

方案二：编辑器API自定义渲染（更灵活可控） #

如果需要更精细的控制（比如根据折叠区域类型设置不同图标），可以通过Monaco的装饰器API监听折叠状态变化，自定义渲染glyph margin：

// 初始化编辑器实例
const editor = monaco.editor.create(document.getElementById('editor-container'), {
    value: `function foo() {
    console.log("bar");
}

class Test {
    constructor() {}
}`,
    language: 'javascript',
    glyphMargin: true // 确保启用glyph margin
});

// 监听折叠状态变化，更新自定义装饰
const updateFoldingIcons = () => {
    const decorations = [];
    const foldingRegions = editor.getFoldingRegions();

    foldingRegions.forEach(region => {
        const isFolded = editor.isFolded(region.startLineNumber);
        // 自定义类名，对应CSS中的加号/减号样式
        const className = isFolded ? 'custom-expand-icon' : 'custom-collapse-icon';

        decorations.push({
            range: new monaco.Range(region.startLineNumber, 1, region.startLineNumber, 1),
            options: {
                glyphMarginClassName: className
            }
        });
    });

    // 应用装饰
    editor.setDecorations(editor.createDecorationsCollection(), decorations);
};

// 初始化时更新一次，之后监听折叠状态变化
updateFoldingIcons();
editor.onDidChangeFoldingState(updateFoldingIcons);

对应的CSS样式：

.custom-collapse-icon::after {
    content: "-";
    display: block;
    width: 16px;
    text-align: center;
    font-weight: bold;
}

.custom-expand-icon::after {
    content: "+";
    display: block;
    width: 16px;
    text-align: center;
    font-weight: bold;
}

这种方案的优势是不受Monaco版本更新时CSS类名变化的影响，且支持更复杂的自定义逻辑。

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