如何在ace.js代码编辑器中添加模板/默认代码片段？

Ace.js不会直接读取目标DOM元素的文本内容作为编辑器初始值，而且初始化后它会完全接管该元素的DOM结构，所以直接修改innerText或者在HTML里写实体化的换行内容都没用。正确的做法是用Ace提供的API来设置初始代码：

• 首先确保正确初始化Ace编辑器实例：

// 获取编辑器容器元素
const editorElement = document.getElementById('editor');
// 初始化Ace编辑器
const editor = ace.edit(editorElement);
// 可选：设置语言模式，比如Python
editor.session.setMode("ace/mode/python");

• 然后用setValue()方法设置模板代码，换行直接用\n即可，不用转成HTML实体：

const templateCode = `# Happy Coding ...

a=10
b=20
print("This is the sum:", a+b)`;
editor.setValue(templateCode);
// 可选：把光标定位到代码开头
editor.navigateFileStart();

完整的示例代码：

<div class="editor-container">
    <div id="editor" class="w-100"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.3/ace.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
    const editor = ace.edit('editor');
    // 设置语言模式（根据你的需求调整）
    editor.session.setMode("ace/mode/python");
    // 设置模板代码
    const template = `# Happy Coding ...

a=10
b=20
print("This is the sum:", a+b)`;
    editor.setValue(template);
    editor.navigateFileStart();
});
</script>

为什么之前的方法没用？因为Ace初始化时会清空目标div的原有内容，生成自己的编辑器DOM结构，所以你在HTML里写的内容或者通过innerText设置的内容都会被覆盖，必须用Ace的API来操作编辑器的内容。

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