HTML Code Editor
Welcome to my website!
This is a paragraph.
Styled Page
\n \n" }, { name: "Form Example", text: "\n\n\n \n" }, { name: "JavaScript Alert", text: "\n\n \n \n" } ];function formatText(command, value = null) { editor.focus(); history.push(editor.innerHTML); // Save state before change if (command === 'undo') { if (history.length > 1) { history.pop(); // Remove current state editor.innerHTML = history[history.length - 1]; // Restore previous } } else { document.execCommand(command, false, value); } }function copyCode() { const code = editor.innerHTML; navigator.clipboard.writeText(code).then(() => { alert('Code copied to clipboard!'); }).catch(() => { alert('Failed to copy code.'); }); }function previewCode() { const code = editor.innerHTML; output.innerHTML = 'Preview:
'; const iframe = document.createElement('iframe'); iframe.style.width = '100%'; iframe.style.height = '200px'; iframe.style.border = '1px solid #ccc'; output.appendChild(iframe); const doc = iframe.contentDocument || iframe.contentWindow.document; doc.open(); doc.write(code); doc.close(); }function showSuggestions() { const suggestionsDiv = document.getElementById('suggestions'); const content = editor.innerText.trim();if (content) { suggestionsDiv.style.display = 'none'; return; }suggestionsDiv.innerHTML = sampleTemplates.map(template => `${template.name}
`
).join('');
suggestionsDiv.style.display = 'block';
}function selectSuggestion(text) {
editor.innerHTML = text;
document.getElementById('suggestions').style.display = 'none';
history = [text];
}editor.addEventListener('input', function() {
const code = editor.innerHTML;
console.log(code);
});editor.addEventListener('focus', showSuggestions);
editor.addEventListener('input', () => {
document.getElementById('suggestions').style.display = 'none';
});document.addEventListener('click', (e) => {
if (!e.target.closest('#editor') && !e.target.closest('.suggestions')) {
document.getElementById('suggestions').style.display = 'none';
}
});editor.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'b') {
e.preventDefault();
formatText('bold');
} else if (e.ctrlKey && e.key === 'i') {
e.preventDefault();
formatText('italic');
}
});