Serlok App: Script multi tab editor html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Editor HTML Mini</title>
  <style>
    body { font-family: sans-serif; margin: 0; }
    #tabs { display: flex; background: #333; color: white; }
    .tab {
      padding: 10px; cursor: pointer;
      border-right: 1px solid #444;
    }
    .tab.active { background: #555; }
    #editor { width: 100%; height: 300px; }
    iframe { width: 100%; height: 300px; border: none; }
    button, input[type="file"] { margin: 5px; }
  </style>
</head>
<body>

<h2>Editor HTML Mini</h2>

<div id="tabs"></div>
<textarea id="editor"></textarea>
<br>
<button onclick="addTab()">+ Tab Baru</button>
<input type="file" id="upload" accept=".html,.htm" onchange="uploadFile(event)">
<button onclick="saveFile()">💾 Save As</button>
<button onclick="preview()">👁️ Preview</button>

function addTab(name = 'Tab ' + (tabs.length + 1), content = '') {
    tabs.push({ name, content });
    currentTab = tabs.length - 1;
    renderTabs();
    document.getElementById('editor').value = content;
  }

function renderTabs() {
    const tabContainer = document.getElementById('tabs');
    tabContainer.innerHTML = '';
    tabs.forEach((tab, index) => {
      const el = document.createElement('div');
      el.className = 'tab' + (index === currentTab ? ' active' : '');
      el.textContent = tab.name;
      el.onclick = () => switchTab(index);
      tabContainer.appendChild(el);
    });
  }

function switchTab(index) {
    saveCurrentContent();
    currentTab = index;
    document.getElementById('editor').value = tabs[index].content;
    renderTabs();
  }

function saveCurrentContent() {
    if (tabs[currentTab]) {
      tabs[currentTab].content = document.getElementById('editor').value;
    }
  }

function uploadFile(event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = e => addTab(file.name, e.target.result);
    reader.readAsText(file);
  }

function saveFile() {
    saveCurrentContent();
    const content = tabs[currentTab]?.content || '';
    const blob = new Blob([content], { type: 'text/html' });
    const link = document.createElement('a');
    link.download = tabs[currentTab].name + '.html';
    link.href = URL.createObjectURL(blob);
    link.click();
  }

function preview() {
    saveCurrentContent();
    const frame = document.getElementById('previewFrame');
    frame.srcdoc = tabs[currentTab]?.content || '';
  }

// Awal: Tab kosong
  addTab('Tab 1', '<!DOCTYPE html>\n<html>\n<head>\n<title>Contoh</title>\n</head>\n<body>\n<h1>Hello World!</h1>\n</body>\n</html>');
</script>

</body>
</html>

Serlok App

Script multi tab editor html

Script multi tab editor html

Script multi tab editor html

Tidak ada komentar:

Posting Komentar