Question 219897 in Html Question posted in
Some basic documentation can be found here.

How can I add multiple ace editors on a single html page? It only seems to work on ID "editor"?

I wanna add multiple ace editor divs on a single html document, I’ve tried to name them all different on the ID level but it stops working immidiately after changing the ID to anything other than "editor". I’ve seen solutions to these problems here, but they are all outdated. Appreciated!

I wanted to create multiple ACE editors on a single web page but it is not working.

Tags:

2

Answers


  1. 0

    You can directly pass dom element ace.edit(myElement) or pass null, and then add editor.container to the document

    var editor = ace.edit(null)
document.body.append(editor.container)
    Login or Signup to reply.
  2. 0 
    <html>
<head>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
  <script>
  // Initialize editor 1
  var editor1 = ace.edit("editor1");
  editor1.session.setMode("ace/mode/javascript");

  // Initialize editor 2
  var editor2 = ace.edit("editor2");
  editor2.session.setMode("ace/mode/html");

  // Add more editors as needed
  </script>
</head>
<body>
<div id="editor1" style="height: 300px;"></div><div id="editor2" style="height: 300px;"></div>
</body>
</html>

    This way, you can have multiple Ace editors on a single HTML page, and each editor will work independently on its respective container.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search