我想在单个 html 文档上添加多个 ace 编辑器 div，我尝试在 ID 级别上将它们命名为不同的名称，但在将 ID 更改为“editor”以外的任何内容后，它立即停止工作。我在这里看到了这些问题的解决方案，但它们都已经过时了。赞赏！
我想在一个网页上创建多个 ACE 编辑器，但它不起作用。
<!-- 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
可以直接传dom元素
ace.edit(myElement)editor.containervar editor = ace.edit(null)
document.body.append(editor.container)
<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>
这样，您可以在单个 HTML 页面上拥有多个 Ace 编辑器，并且每个编辑器将在其各自的容器上独立工作。