在开发自定义html编辑器或者优化现有编辑器功能时，代码块折叠是一个能大幅提升开发体验的功能，它可以让开发者隐藏暂时不需要关注的代码段，只聚焦当前处理的逻辑，避免长代码带来的视觉干扰。下面我们就详细讲解实现这个功能的具体方法。
核心实现思路
代码块折叠的本质是对编辑器内的代码区域进行识别、标记，然后通过交互控制对应区域的显示与隐藏，整体可以分为三个步骤：
- 识别代码块边界：确定哪些内容属于可折叠的代码块，比如<script>、<style>标签包裹的内容，或者用户手动选中的代码段
- 添加折叠交互入口：在代码块起始位置插入折叠/展开按钮，绑定点击事件
- 控制内容显隐：点击按钮时切换代码块的显示状态，同时更新按钮的提示文案
基础实现示例
以下是一个简单的原生js实现示例，针对编辑器内<script>标签包裹的代码块实现折叠功能：
// 获取编辑器容器
const editor = document.getElementById('html-editor');
// 查找所有script代码块
const scriptBlocks = editor.querySelectorAll('script');
scriptBlocks.forEach(block => {
// 创建折叠按钮
const foldBtn = document.createElement('div');
foldBtn.className = 'fold-btn';
foldBtn.textContent = '折叠代码';
foldBtn.style.cssText = 'cursor:pointer;color:#1890ff;margin:5px 0;font-size:14px;';
// 在代码块前插入按钮
block.parentNode.insertBefore(foldBtn, block);
// 标记代码块初始状态为展开
block.setAttribute('data-folded', 'false');
block.style.cssText = 'display:block;background:#f5f5f5;padding:10px;border-radius:4px;';
// 绑定点击事件
foldBtn.addEventListener('click', () => {
const isFolded = block.getAttribute('data-folded') === 'true';
if (isFolded) {
// 展开代码块
block.style.display = 'block';
foldBtn.textContent = '折叠代码';
block.setAttribute('data-folded', 'false');
} else {
// 折叠代码块
block.style.display = 'none';
foldBtn.textContent = '展开代码';
block.setAttribute('data-folded', 'true');
}
});
});关键细节优化
1. 代码块边界识别优化
如果是自定义编辑器，可以通过监听输入事件，匹配代码块的起始和结束标记，比如用户插入<pre><code>标签时自动标记为可折叠区域，避免手动查找的局限性。
2. 样式适配
折叠按钮和代码块的样式需要和编辑器整体风格统一，比如可以给折叠后的区域添加一个占位提示，让用户知道这里有一段被折叠的代码：
.fold-placeholder {
height: 24px;
background: #f0f0f0;
border-left: 3px solid #1890ff;
padding-left: 8px;
line-height: 24px;
font-size: 12px;
color: #666;
margin: 5px 0;
}3. 状态持久化
如果需要保留用户的折叠状态，可以把每个代码块的折叠状态存储到本地，下次打开编辑器时自动恢复之前的折叠设置，提升使用体验。
适配不同编辑器的思路
如果是基于现有编辑器做二次开发，比如使用CodeMirror、Monaco Editor等成熟编辑器，可以直接调用它们提供的折叠API，不需要从零实现。以Monaco Editor为例，它内置了代码折叠功能，还可以通过配置自定义折叠规则：
// 初始化Monaco Editor时配置折叠相关参数
monaco.editor.create(document.getElementById('container'), {
value: '<script>console.log("test")</script>',
language: 'html',
folding: true, // 开启折叠功能
foldingStrategy: 'indentation', // 基于缩进的折叠策略
showFoldingControls: 'mouseover' // 鼠标悬停时显示折叠按钮
});这种方式不需要自己处理DOM操作和事件绑定，稳定性更高，适合生产环境使用。如果是轻量级的自定义编辑器，再考虑从零实现前面提到的基础方案。