时间戳

首页 > 解决方案 > 如何在一个网页上使用多个编辑器

javascript - 如何在一个网页上使用多个编辑器

问题描述

我创建了一个代码编辑器，您可以在其中查看代码。这是代码（按整页）：

function openLanguage(evt, codeLanguage) {
  var i, tabcontent, tablinks;
  let currentTab = document.querySelector('.tablinks.active');

  tabcontent = document.querySelectorAll(".tabs .tabcontent");
  tabcontent.forEach(content => content.style.display = "none");

  tablinks = document.querySelectorAll(".tab .tablinks");
  tablinks.forEach(tab => tab.classList.remove("active"));

  if (currentTab != evt.currentTarget) {
    document.getElementById(codeLanguage).style.display = "block";
    evt.currentTarget.classList.add("active");
  }
}
* {
  margin: 0;
  padding: 0;
}

body {font-family: Arial;}

.codeOutput {
  margin: 1em;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  border-bottom: none;
  background-color: #f1f1f1;
  width: 100%;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.1s;
  font-size: 17px;
}

.tab button:hover {
  filter: brightness(90%)
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 0;
  border-bottom: 1px solid #000;
  height: 100%;
  width: 100%;
  background: #000;
  color: #fff;
  overflow: scroll;
  border-left: 1px solid;
border-right: 1px solid;
}

.result {
    height: 100%;
  width: 100%;
  padding: 6px 0;
  border: 1px solid #ccc;
  border-top: none;
  overflow: scroll;
}

.tabs {
    display: block;
    height: 200px;
    border-top: 1px solid #ccc;
}

@media screen and (min-width: 600px) {
    .tabs {
        display: flex;
    }
    .result {
        width: 100%;
    }
    .tabcontent {
        width: 100%;
    }
}
<div class="codeOutput">
  <div class="tab">
    <button class="tablinks" onclick="openLanguage(event, 'HTML')">HTML</button>
    <button class="tablinks" onclick="openLanguage(event, 'CSS')">CSS</button>
    <button class="tablinks" onclick="openLanguage(event, 'JavaScript')">JavaScript</button>
  </div>

  <div class="tabs">
    <div id="HTML" class="tabcontent">
      <p>Some HTML Code</p>
    </div>

  <div id="CSS" class="tabcontent">
    <p>Some CSS Code</p> 
  </div>

  <div id="JavaScript" class="tabcontent">
    <p>Some JS Code</p>
  </div>

  <div class="result">
    Result
  </div>

</div>
</div>

然后我尝试添加第二个，但后来我意识到第二个的按钮打开了第一个的选项卡。这里又是一个有两个编辑器的例子（按整页）：

function openLanguage(evt, codeLanguage) {
  var i, tabcontent, tablinks;
  let currentTab = document.querySelector('.tablinks.active');

  tabcontent = document.querySelectorAll(".tabs .tabcontent");
  tabcontent.forEach(content => content.style.display = "none");

  tablinks = document.querySelectorAll(".tab .tablinks");
  tablinks.forEach(tab => tab.classList.remove("active"));

  if (currentTab != evt.currentTarget) {
    document.getElementById(codeLanguage).style.display = "block";
    evt.currentTarget.classList.add("active");
  }
}
* {
  margin: 0;
  padding: 0;
}

body {font-family: Arial;}

.codeOutput {
  margin: 1em;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  border-bottom: none;
  background-color: #f1f1f1;
  width: 100%;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.1s;
  font-size: 17px;
}

.tab button:hover {
  filter: brightness(90%)
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 0;
  border-bottom: 1px solid #000;
  height: 100%;
  width: 100%;
  background: #000;
  color: #fff;
  overflow: scroll;
  border-left: 1px solid;
border-right: 1px solid;
}

.result {
    height: 100%;
  width: 100%;
  padding: 6px 0;
  border: 1px solid #ccc;
  border-top: none;
  overflow: scroll;
}

.tabs {
    display: block;
    height: 200px;
    border-top: 1px solid #ccc;
}

@media screen and (min-width: 600px) {
    .tabs {
        display: flex;
    }
    .result {
        width: 100%;
    }
    .tabcontent {
        width: 100%;
    }
}
<div class="codeOutput">
  <div class="tab">
    <button class="tablinks" onclick="openLanguage(event, 'HTML')">HTML</button>
    <button class="tablinks" onclick="openLanguage(event, 'CSS')">CSS</button>
    <button class="tablinks" onclick="openLanguage(event, 'JavaScript')">JavaScript</button>
  </div>

  <div class="tabs">
    <div id="HTML" class="tabcontent">
      <p>Some HTML Code</p>
    </div>

  <div id="CSS" class="tabcontent">
    <p>Some CSS Code</p> 
  </div>

  <div id="JavaScript" class="tabcontent">
    <p>Some JS Code</p>
  </div>

  <div class="result">
    Result
  </div>

</div>
</div>

<!-- Second Editor -->

<div class="codeOutput">
  <div class="tab">
    <button class="tablinks" onclick="openLanguage(event, 'HTML')">HTML</button>
    <button class="tablinks" onclick="openLanguage(event, 'CSS')">CSS</button>
    <button class="tablinks" onclick="openLanguage(event, 'JavaScript')">JavaScript</button>
  </div>

  <div class="tabs">
    <div id="HTML" class="tabcontent">
      <p>Some HTML Code</p>
    </div>

  <div id="CSS" class="tabcontent">
    <p>Some CSS Code</p> 
  </div>

  <div id="JavaScript" class="tabcontent">
    <p>Some JS Code</p>
  </div>

  <div class="result">
    Result
  </div>

</div>
</div>

提前致谢！

标签： javascripthtmlcss

解决方案

您应该为每个编辑器使用不同的选择器。因为当前查询选择器将始终返回第一个编辑器部分给您。

所以，而不是：

tablinks = document.querySelectorAll(".tab .tablinks");

您可以为每个部分添加一个 id，然后在选择器中使用它们。

例如：

tablinksEditor1 = document.querySelectorAll("#editor1 .tab .tablinks");
tablinksEditor2 = document.querySelectorAll("#editor2 .tab .tablinks");

推荐阅读