如何配置动态追加的Ace Editor，避免生成多余HTML？

我来给你优化一下动态创建Ace Editor的方案，既能满足你动态追加的需求，还能避免多余的HTML代码问题：

方案一：用jQuery原生元素创建（推荐） #

这种方式不用手动拼接HTML字符串，既能避免转义字符（比如你之前用的<），还能让代码更健壮、易维护：

// 初始化计数器
let editorsOnScreen = 0;

// 封装成函数，方便调用
function addNewAceEditor() {
  editorsOnScreen++;
  
  // 创建外层容器
  const questionContainer = $('<div>', {
    class: 'questionContainer w-100',
    id: `questionContainer_${editorsOnScreen}`
  });
  
  // 创建编辑器容器
  const editorDiv = $('<div>', {
    class: 'editor',
    id: `editor_${editorsOnScreen}`,
    text: '//Code Here'
  });
  
  // 组装并追加到目标容器
  questionContainer.append(editorDiv);
  $('#container').append(questionContainer);
  
  // 初始化并配置Ace Editor
  const editor = ace.edit(`editor_${editorsOnScreen}`);
  // 示例配置：设置主题、语言模式
  editor.setTheme('ace/theme/monokai');
  editor.getSession().setMode('ace/mode/javascript');
  // 其他自定义配置...
}

方案二：优化模板字符串写法 #

如果你更习惯用模板字符串，也可以去掉多余的转义字符，用ES6的变量插值让代码更简洁：

let editorsOnScreen = 0;

function addNewAceEditor() {
  editorsOnScreen++;
  
  // 直接写正常的HTML标签，不用转义
  const editorHTML = `
  <div class="questionContainer w-100" id="questionContainer_${editorsOnScreen}">
    <div class="editor" id="editor_${editorsOnScreen}">//Code Here</div>
  </div>
  `;
  
  $("#container").append(editorHTML);
  
  // 初始化编辑器
  const editor = ace.edit(`editor_${editorsOnScreen}`);
  // 你的配置代码...
}

额外小技巧 #

可以把所有创建的编辑器实例存到一个数组里，后续批量操作会更方便：

const editorInstances = [];

// 在初始化编辑器后：
editorInstances.push(editor);

// 比如批量修改所有编辑器的内容
editorInstances.forEach(editor => {
  editor.setValue('// Updated code', -1);
});

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