如何在单个HTML页面添加多个Ace编辑器？修改ID后功能失效

Ace编辑器支持在同一页面创建多个实例，改ID后失效的核心原因是初始化代码没有对应更新目标元素的选择器，或者容器缺少必要的样式配置。以下是可直接运行的完整解决方案：

核心注意事项 #

• 每个编辑器容器必须设置唯一ID
• 初始化时通过ace.edit("目标ID")绑定对应容器
• 确保每个编辑器实例独立配置主题、语言模式
• 容器必须设置明确的宽高样式

HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多Ace编辑器示例</title>
    <!-- 引入Ace编辑器核心及常用插件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.3/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.3/mode-javascript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.3/mode-html.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.3/mode-css.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.3/theme-monokai.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h3>JavaScript编辑器</h3>
    <div id="editor-js" class="editor-box"></div>

    <h3>HTML编辑器</h3>
    <div id="editor-html" class="editor-box"></div>

    <h3>CSS编辑器</h3>
    <div id="editor-css" class="editor-box"></div>

    <script src="script.js"></script>
</body>
</html>

CSS代码 #

.editor-box {
    width: 90%;
    height: 280px;
    margin: 15px auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}

JavaScript代码 #

// 初始化JavaScript编辑器
const jsEditor = ace.edit("editor-js");
jsEditor.setTheme("ace/theme/monokai");
jsEditor.getSession().setMode("ace/mode/javascript");
jsEditor.setValue("// 编写你的JS代码\nconst greeting = 'Hello Ace!';\nconsole.log(greeting);", 1);

// 初始化HTML编辑器
const htmlEditor = ace.edit("editor-html");
htmlEditor.setTheme("ace/theme/monokai");
htmlEditor.getSession().setMode("ace/mode/html");
htmlEditor.setValue("<div class='demo'>\n    <h1>多编辑器示例</h1>\n</div>", 1);

// 初始化CSS编辑器
const cssEditor = ace.edit("editor-css");
cssEditor.setTheme("ace/theme/monokai");
cssEditor.getSession().setMode("ace/mode/css");
cssEditor.setValue(".demo {\n    color: #2c3e50;\n    padding: 20px;\n}", 1);

常见错误排查 #

1. ID拼写错误：检查ace.edit()中的ID是否和HTML容器的ID完全一致
2. 缺少样式配置：编辑器容器必须设置宽高，否则Ace无法渲染可视区域
3. 未引入对应模式：如果使用特定语言模式（如HTML），必须引入对应的mode-xxx.js文件
4. 实例变量冲突：确保每个编辑器实例使用独立的变量名，避免覆盖

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