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 immediately 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.
<!-- HTML CODE SAMPLE -->
<span class="container" data-title="samplecode">
<h1>Sample code</h1>
<div class="editor-container">
<!-- CODE EDITOR -->
<div id="editor1">
<script type="text/plain" style="display: block;" id="ace-1">
<!-- HERE STARTS THE JOURNEY -->
<!DOCTYPE html>
<html lang="en"> <!-- Choose the language -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website - Home</title> <!-- Enter title -->
<meta name="description" content="Description"> <!-- Enter website description -->
<meta name="keywords" content="tags"> <!-- Enter website keywords -->
<!-- Styling and scripting -->
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="CSS/homepage.css"> <!-- Individual styles -->
<script src="JS/scripts.js"> <!-- Scripts file -->
<!-- Favicon links, change them, follow instructions on text file -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<link rel="manifest" href="assets/site.webmanifest">
<!-- Fonts API, CHANGE -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@500&family=Josefin+Sans:ital,wght@0,100;1,400&family=Passion+One&display=swap" rel="stylesheet">
<!-- Social media thumbnails -->
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://website.org/"> <!-- Enter website link -->
<meta property="og:title" content="website title"> <!-- Enter website title -->
<meta property="og:description" content="page description"> <!-- Enter website description -->
<meta property="og:image" content="link to logo"> <!-- Enter website link to logo -->
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://website.org/"> <!-- Enter website link -->
<meta property="twitter:title" content="Website - Home"> <!-- Enter website title -->
<meta property="twitter:description" content="website description"><!-- Enter website description -->
<meta property="twitter:image" content="logo link"> <!-- Enter website link to logo -->
</head>
<body>
<!-- Root header -->
<header id="homeheader"> <!-- Desktop menu -->
<a href="https://website.org"> <img id="homelogo" src="assets/logotrans.png" alt="Update your browser"> </a>
<nav id="navbar">
<a href="about.html" class="headerlink">About</a>
<a href="#" class="headerlink">Page link</a> <!-- Add as many pages as you like -->
</nav>
<!-- Mobile menu -->
<div id="hr"></div>
<div id="togglebutton" onclick="mobileMenu()">☰</div>
<div id="mobilemenu"><div id="mobilemenutop"><img id="mobilemenuimage" src="assets/translogowhite.png" alt="Update browser"><p id="cancelmenu" onclick="animation()">❌</p></div><br>
<nav id="mobilenavbar">
<hr class="mobilehr"><a href="about.html" class="headerlink current">About✋</a> <br> <hr class="mobilehr">
<a href="join.html" class="headerlink">Join us</a> <br> <hr class="mobilehr">
<a href="yoga.html" class="headerlink">Yoga</a> <br> <hr class="mobilehr">
<a href="calendar.html" class="headerlink">Calendar</a><br> <hr class="mobilehr">
<a href="resources.html" class="headerlink">Resources </a> <hr class="mobilehr">
<a href="articles.html" class="headerlink">Articles</a>
</nav>
<div id="navsocialmedia">
<a href="#" target="_blank"><img src="assets/social media/youtube_logo.png" alt="Update your browser" class="social_img"></a>
<a href="#" target="_blank"><img src="assets/social media/telegram_logo.png" alt="Update your browser" class="social_img"></a>
<a href="#"><img src="assets/social media/gmail_logo.png" alt="Update your browser" class="social_img"></a>
</div>
</div>
<div id="mobilelangs"> <!-- Lang menu -->
<select name="lang" id="mobilelang" onchange="showLangs()">
<option value="ES" id="es">ES</option>
<option value="EN" id="en" selected>EN</option>
</select></div>
</header>
<main>
<!-- Background video -->
<video autoplay muted loop preload="none" id="homebackvideo" src="assets/homebackvideo.mp4"></video>
<!-- Website content starts here -->
<h1>Explore presets</h1>
</main>
<!-- Footer -->
<footer id="homefooter">
<div id="socialmedia">
<a href="#" target="_blank"><img src="assets/social media/youtube_logo.png" alt="Update your browser" class="social_img"></a>
<a href="#" target="_blank"><img src="assets/social media/telegram_logo.png" alt="Update your browser" class="social_img"></a>
<a href="#"><img src="assets/social media/gmail_logo.png" alt="Update your browser" class="social_img"></a>
</div>
<p id="trademark">© W3PRESETS </p>
<div id="footerlinks"><a href="terms.html">Terms</a> <a href="privacy.html"> Privacy</a> <a href="contact.html">Contact</a></div>
<div id="mobilefooterlogo"><img src="assets/translogowhite.png" loading="lazy" id="ad_golden_logo" alt="Update your browser"></div> <!-- Mobile logo -->
</footer>
<!-- SEO -->
<section style="display: none">
<!-- Add SEO friendly content-->
</body>
</html>
</script>
</div>
<!-- END OF CODE EDITOR -->
</div>
<p onclick="copyMyText()"> Select the code you want to copy and right click >>> COPY OR CONTROL + C</p>
<a href="assets/RESOURCES/rootstructure/homepage.html" class="link" download="homepage.html" title="Blue Pink Mandala">Download</a>
</span>
<!-- HTML CODE SAMPLE -->
<span class="container" data-title="samplecode">
<h1>Sample code</h1>
<div class="editor-container">
<!-- CODE EDITOR -->
<div id="editor2">
<script type="text/plain" style="display: block;" id="ace-1">
<!-- HERE STARTS THE JOURNEY -->
<!DOCTYPE html>
<html lang="en"> <!-- Choose the language -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website - Home</title> <!-- Enter title -->
<meta name="description" content="Description"> <!-- Enter website description -->
<meta name="keywords" content="tags"> <!-- Enter website keywords -->
<!-- Styling and scripting -->
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="CSS/homepage.css"> <!-- Individual styles -->
<script src="JS/scripts.js"> <!-- Scripts file -->
<!-- Favicon links, change them, follow instructions on text file -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<link rel="manifest" href="assets/site.webmanifest">
<!-- Fonts API, CHANGE -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@500&family=Josefin+Sans:ital,wght@0,100;1,400&family=Passion+One&display=swap" rel="stylesheet">
<!-- Social media thumbnails -->
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://website.org/"> <!-- Enter website link -->
<meta property="og:title" content="website title"> <!-- Enter website title -->
<meta property="og:description" content="page description"> <!-- Enter website description -->
<meta property="og:image" content="link to logo"> <!-- Enter website link to logo -->
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://website.org/"> <!-- Enter website link -->
<meta property="twitter:title" content="Website - Home"> <!-- Enter website title -->
<meta property="twitter:description" content="website description"><!-- Enter website description -->
<meta property="twitter:image" content="logo link"> <!-- Enter website link to logo -->
</head>
<body>
<!-- Root header -->
<header id="homeheader"> <!-- Desktop menu -->
<a href="https://website.org"> <img id="homelogo" src="assets/logotrans.png" alt="Update your browser"> </a>
<nav id="navbar">
<a href="about.html" class="headerlink">About</a>
<a href="#" class="headerlink">Page link</a> <!-- Add as many pages as you like -->
</nav>
<!-- Mobile menu -->
<div id="hr"></div>
<div id="togglebutton" onclick="mobileMenu()">☰</div>
<div id="mobilemenu"><div id="mobilemenutop"><img id="mobilemenuimage" src="assets/translogowhite.png" alt="Update browser"><p id="cancelmenu" onclick="animation()">❌</p></div><br>
<nav id="mobilenavbar">
<hr class="mobilehr"><a href="about.html" class="headerlink current">About✋</a> <br> <hr class="mobilehr">
<a href="join.html" class="headerlink">Join us</a> <br> <hr class="mobilehr">
<a href="yoga.html" class="headerlink">Yoga</a> <br> <hr class="mobilehr">
<a href="calendar.html" class="headerlink">Calendar</a><br> <hr class="mobilehr">
<a href="resources.html" class="headerlink">Resources </a> <hr class="mobilehr">
<a href="articles.html" class="headerlink">Articles</a>
</nav>
<div id="navsocialmedia">
<a href="#" target="_blank"><img src="assets/social media/youtube_logo.png" alt="Update your browser" class="social_img"></a>
<a href="#" target="_blank"><img src="assets/social media/telegram_logo.png" alt="Update your browser" class="social_img"></a>
<a href="#"><img src="assets/social media/gmail_logo.png" alt="Update your browser" class="social_img"></a>
</div>
</div>
<div id="mobilelangs"> <!-- Lang menu -->
<select name="lang" id="mobilelang" onchange="showLangs()">
<option value="ES" id="es">ES</option>
<option value="EN" id="en" selected>EN</option>
</select></div>
</header>
<main>
<!-- Background video -->
<video autoplay muted loop preload="none" id="homebackvideo" src="assets/homebackvideo.mp4"></video>
<!-- Website content starts here -->
<h1>Explore presets</h1>
</main>
<!-- Footer -->
<footer id="homefooter">
<div id="socialmedia">
<a href="#" target="_blank"><img src="assets/social media/youtube_logo.png" alt="Update your browser" class="social_img"></a>
<a href="#" target="_blank"><img src="assets/social media/telegram_logo.png" alt="Update your browser" class="social_img"></a>
<a href="#"><img src="assets/social media/gmail_logo.png" alt="Update your browser" class="social_img"></a>
</div>
<p id="trademark">© W3PRESETS </p>
<div id="footerlinks"><a href="terms.html">Terms</a> <a href="privacy.html"> Privacy</a> <a href="contact.html">Contact</a></div>
<div id="mobilefooterlogo"><img src="assets/translogowhite.png" loading="lazy" id="ad_golden_logo" alt="Update your browser"></div> <!-- Mobile logo -->
</footer>
<!-- SEO -->
<section style="display: none">
<!-- Add SEO friendly content-->
</body>
</html>
</script>
</div>
<!-- END OF CODE EDITOR -->
</div>
<p> Select the code you want to copy and right click >>> COPY OR CONTROL + C</p>
<a href="assets/RESOURCES/rootstructure/homepage.html" class="link" download="homepage.html" title="Blue Pink Mandala">Download</a>
</span>
// Code editor settings
// Initialize editor 1
var editor1 = ace.edit("editor1");
editor1.setTheme("ace/theme/monokai");
editor1.session.setMode("ace/mode/html");
// Initialize editor 2
var editor2 = ace.edit("editor2");
editor2.setTheme("ace/theme/monokai");
editor2.session.setMode("ace/mode/html");
/* Code editor */
.editor-container {
width: 900px;
height: 540px;
margin: 20px auto;
position: relative;
}
#editor {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
f
You can directly pass dom element
ace.edit(myElement)or pass null, and then addeditor.containerto the document