Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Simple HTML Editor</title> | |
| <style> | |
| .toolbar { | |
| margin-bottom: 10px; | |
| } | |
| .toolbar button { | |
| padding: 5px; | |
| margin-right: 5px; | |
| } | |
| .menu { | |
| display: none; | |
| position: absolute; | |
| background-color: #f9f9f9; | |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| z-index: 1; | |
| } | |
| .toolbar .menu button { | |
| display: block; | |
| width: 100%; | |
| padding: 10px; | |
| text-align: left; | |
| border: none; | |
| background-color: inherit; | |
| } | |
| .toolbar .menu button:hover { | |
| background-color: #f1f1f1; | |
| } | |
| .toolbar .dropdown:hover .menu { | |
| display: block; | |
| } | |
| .editor { | |
| border: 1px solid #ccc; | |
| min-height: 200px; | |
| padding: 10px; | |
| } | |
| .preview { | |
| border: 1px solid #ccc; | |
| min-height: 200px; | |
| padding: 10px; | |
| margin-top: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="toolbar"> | |
| <div class="dropdown"> | |
| <button class="dropbtn" onclick="toggleMenu()">Insert</button> | |
| <div class="menu" id="myDropdown"> | |
| <button onclick="insertLink()">Link</button> | |
| <button onclick="insertImage()">Image</button> | |
| <button onclick="insertVideo()">Video</button> | |
| <button onclick="insertParagraph()">Paragraph</button> | |
| <button onclick="insertHeader()">Header</button> | |
| <button onclick="downloadHTML()">Download HTML</button> | |
| <button onclick="autoCompose()">Auto Compose</button> | |
| </div> | |
| </div> | |
| <button onclick="previewHTML()">Preview</button> | |
| </div> | |
| <div class="editor" contenteditable="true"></div> | |
| <div class="preview"></div> | |
| <script> | |
| function toggleMenu() { | |
| var menu = document.getElementById("myDropdown"); | |
| if (menu.style.display === "none") { | |
| menu.style.display = "block"; | |
| } else { | |
| menu.style.display = "none"; | |
| } | |
| } | |
| function insertLink() { | |
| var url = prompt("Enter the URL of the link:"); | |
| var text = prompt("Enter the link text:"); | |
| if (url && text) { | |
| var link = '<a href="' + url + '">' + text + '</a>'; | |
| document.querySelector('.editor').innerHTML += link; | |
| } | |
| } | |
| function insertImage() { | |
| var url = prompt("Enter the URL of the image:"); | |
| if (url) { | |
| var image = '<img src="' + url + '" alt="Image">'; | |
| document.querySelector('.editor').innerHTML += image; | |
| } | |
| } | |
| function insertVideo() { | |
| var url = prompt("Enter the YouTube video URL:"); | |
| if (url) { | |
| var video = '<iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe>'; | |
| document.querySelector('.editor').innerHTML += video; | |
| } | |
| } | |
| function insertParagraph() { | |
| var text = prompt("Enter the paragraph content:"); | |
| if (text) { | |
| var paragraph = '<p>' + text + '</p>'; | |
| document.querySelector('.editor').innerHTML += paragraph; | |
| } | |
| } | |
| function insertHeader() { | |
| var level = prompt("Enter the header level (1-6):"); | |
| var text = prompt("Enter the header content:"); | |
| if (level && text) { | |
| var header = '<h' + level + '>' + text + '</h' + level + '>'; | |
| document.querySelector('.editor').innerHTML += header; | |
| } | |
| } | |
| function previewHTML() { | |
| var editorContent = document.querySelector('.editor').innerHTML; | |
| document.querySelector('.preview').innerHTML = editorContent; | |
| } | |
| function downloadHTML() { | |
| var editorContent = document.querySelector('.editor').innerHTML; | |
| var filename = "edited.html"; | |
| var element = document.createElement('a'); | |
| element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(editorContent)); | |
| element.setAttribute('download', filename); | |
| element.style.display = 'none'; | |
| document.body.appendChild(element); | |
| element.click(); | |
| document.body.removeChild(element); | |
| } | |
| function autoCompose() { | |
| var text = prompt("Please enter the text:"); | |
| if (text) { | |
| var alignment = ""; | |
| if (text.endsWith(".")) { | |
| alignment = "left"; | |
| } else if (text.endsWith("?")) { | |
| alignment = "right"; | |
| } else if (text.endsWith("!")) { | |
| alignment = "center"; | |
| } | |
| var element = document.createElement("p"); | |
| element.style.textAlign = alignment; | |
| element.textContent = text; | |
| document.querySelector(".editor").appendChild(element); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |