Ace editor: First instance becomes unresponsive after a second one is created

Question

I'm using the ace editor for a small project I'm making.

I want multiple instances of the ace editor on my page

I start with a global variable that will contain all other instances

let editors = {};
let i = 0;

Then I create an instance like so:

i++

editors[i] = ace.edit(`editor-${i}`);
editors[i].setTheme("ace/theme/cobalt");
editors[i].session.setMode("ace/mode/javascript");

This code works it creates the first instance without any issues.

Then comes the second instance and that works. But the first instance becomes unresponsive. I can't edit anything, Cant modify the theme using dev tools anymore. And nothing works. How to fix this exactly? I have been trying options with sessions and all, but nothing seems to work.

Thank you very much

With kind regards, HyperDev

Answer 1

After alot, and i do mean alot of thinking and trying things i found the issue.

What i was doing is appending an ace instance to a div using

div.innerHTML += `<div id="editor-${i}"></div>`;

It turns out the instance stops when its set like that Instead i had to create an element in a variable. And after that append it to the body using .appendChild now it works.