HTML EDITOR
לוח קוד HTML
תצוגה מקדימה
`); } /* תגיות רגילות */ function insertTag(tag) { addCode(`<${tag}> `); } /* תגיות טקסט */ function insertTextTag(tag) { if (tag === "br" || tag === "hr") { addCode(`<${tag}>`); return; } currentAction = { type: "text", tag: tag }; showModal("הכנסת טקסט", [ { name: "text", placeholder: "כתוב את הטקסט שיוצג..." } ]); } /* קישור */ function insertLink() { currentAction = { type: "link" }; showModal("יצירת קישור", [ { name: "url", placeholder: "כתובת הקישור" }, { name: "text", placeholder: "טקסט הקישור" } ], true); } /* תמונה */ function insertImage() { currentAction = { type: "image" }; showModal("הוספת תמונה", [ { name: "url", placeholder: "כתובת התמונה" }, { name: "alt", placeholder: "תיאור התמונה" } ]); } /* וידאו */ function insertVideo() { currentAction = { type: "video" }; showModal("הוספת סרטון", [ { name: "url", placeholder: "כתובת הסרטון" } ]); } /* אודיו */ function insertAudio() { currentAction = { type: "audio" }; showModal("הוספת אודיו", [ { name: "url", placeholder: "כתובת קובץ האודיו" } ]); } /* INPUT */ function insertInput(type) { addCode(``); } /* פתיחת חלונית */ function showModal(title, fields, checkbox = false) { document.getElementById("modalTitle").textContent = title; const container = document.getElementById("modalFields"); container.innerHTML = ""; fields.forEach(field => { const input = document.createElement("input"); input.type = "text"; input.id = "field_" + field.name; input.placeholder = field.placeholder; container.appendChild(input); }); if (checkbox) { const label = document.createElement("label"); label.innerHTML = ` פתח בחלון חדש `; container.appendChild(label); } document.getElementById("inputModal").style.display = "flex"; } /* אישור נתונים */ function confirmInput() { if (!currentAction) return; let code = ""; if (currentAction.type === "text") { const text = document.getElementById("field_text").value; const tag = currentAction.tag; code = `<${tag}>${escapeHTML(text)}`; } if (currentAction.type === "link") { const url = document.getElementById("field_url").value; const text = document.getElementById("field_text").value; const newTab = document.getElementById("newTab").checked; code = `${escapeHTML(text)}`; } if (currentAction.type === "image") { const url = document.getElementById("field_url").value; const alt = document.getElementById("field_alt").value; code = `${escapeAttribute(alt)}`; } if (currentAction.type === "video") { const url = document.getElementById("field_url").value; code = ``; } if (currentAction.type === "audio") { const url = document.getElementById("field_url").value; code = ``; } addCode(code); closeModal(); } /* סגירת חלונית */ function closeModal() { document.getElementById("inputModal").style.display = "none"; currentAction = null; } /* מניעת הכנסת HTML לא מכוון בטקסט */ function escapeHTML(text) { return text.replace(/[&<>"']/g, char => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[char]); } function escapeAttribute(text) { return escapeHTML(text); } /* ניקוי */ function clearEditor() { if (confirm("למחוק את כל הקוד?")) { editor.value = ""; updatePreview(); } } /* הורדת קובץ */ function downloadHTML() { const blob = new Blob( [editor.value], {type: "text/html;charset=utf-8"} ); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = "my-website.html"; link.click(); URL.revokeObjectURL(url); } /* תצוגה ראשונית */ updatePreview();