<div class="editor-container"> <div class="editor-header"> <h1>Rich Text Editor</h1> </div> <div class="toolbar"> <select id="formatBlock" onchange="formatDoc('formatBlock', this.value); this.selectedIndex=0;"> <option selected disabled>Format</option> <option value="h1">Heading 1</option> <option value="h2">Heading 2</option> <option value="h3">Heading 3</option> <option value="p">Paragraph</option> </select> <button onclick="formatDoc('bold')" title="Bold"><strong>B</strong></button> <button onclick="formatDoc('italic')" title="Italic"><em>I</em></button> <button onclick="formatDoc('underline')" title="Underline"><u>U</u></button> <button onclick="formatDoc('strikeThrough')" title="Strikethrough"><s>S</s></button> <button onclick="formatDoc('justifyLeft')" title="Align Left">⬅</button> <button onclick="formatDoc('justifyCenter')" title="Align Center">⬌</button> <button onclick="formatDoc('justifyRight')" title="Align Right">➡</button> <button onclick="formatDoc('insertOrderedList')" title="Numbered List">1. List</button> <button onclick="formatDoc('insertUnorderedList')" title="Bullet List">• List</button> <button onclick="createLink()" title="Insert Link">🔗 Link</button> <button onclick="formatDoc('unlink')" title="Remove Link">⛓️💥</button> <button onclick="formatDoc('removeFormat')" title="Clear Formatting">✕ Clear</button> </div> <div class="editor-content" id="editor" contenteditable="true"></div> <div class="editor-footer"> <div class="word-count" id="wordCount">0 words</div> <div class="action-buttons"> <button class="btn btn-secondary" onclick="clearEditor()">Clear</button> <button class="btn btn-primary" onclick="getContent()">Get HTML</button> </div> </div> </div>
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .editor-container { background: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); width: 100%; max-width: 800px; overflow: hidden; } .editor-header { background: #f8f9fa; padding: 20px; border-bottom: 1px solid #e9ecef; } .editor-header h1 { font-size: 24px; color: #2d3748; font-weight: 600; } .toolbar { display: flex; gap: 8px; padding: 16px; background: #ffffff; border-bottom: 1px solid #e9ecef; flex-wrap: wrap; } .toolbar button { background: #f8f9fa; border: 1px solid #dee2e6; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; color: #495057; transition: all 0.2s; font-weight: 500; } .toolbar button:hover { background: #e9ecef; border-color: #adb5bd; } .toolbar button:active { transform: scale(0.95); } .toolbar button.active { background: #667eea; color: white; border-color: #667eea; } .toolbar select { background: #f8f9fa; border: 1px solid #dee2e6; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; color: #495057; } .editor-content { min-height: 400px; padding: 24px; outline: none; font-size: 16px; line-height: 1.6; color: #2d3748; } .editor-content:empty:before { content: 'Start typing here...'; color: #adb5bd; } .editor-footer { padding: 16px 24px; background: #f8f9fa; border-top: 1px solid #e9ecef; display: flex; justify-content: space-between; align-items: center; } .word-count { font-size: 14px; color: #6c757d; } .action-buttons { display: flex; gap: 10px; } .btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s; } .btn-primary { background: #ff416c; color: white; } .btn-primary:hover { background: #ff4b2b; } .btn-secondary { background: #e9ecef; color: #495057; } .btn-secondary:hover { background: #dee2e6; }
const editor = document.getElementById('editor'); const wordCountEl = document.getElementById('wordCount'); // Format document command function formatDoc(cmd, value = null) { document.execCommand(cmd, false, value); editor.focus(); } // Create hyperlink function createLink() { const url = prompt('Enter URL:'); if (url) { formatDoc('createLink', url); } } // Update word count function updateWordCount() { const text = editor.innerText.trim(); const words = text ? text.split(/\s+/).length : 0; wordCountEl.textContent = `${words} word${words !== 1 ? 's' : ''}`; } // Clear editor function clearEditor() { if (confirm('Are you sure you want to clear all content?')) { editor.innerHTML = ''; updateWordCount(); } } // Get HTML content function getContent() { const content = editor.innerHTML; const newWindow = window.open('', '_blank'); newWindow.document.write(` <html> <head> <title>Editor Content</title> <style> body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; line-height: 1.6; } pre { background: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto; } </style> </head> <body> <h2>Preview:</h2> <div style="border: 1px solid #ddd; padding: 20px; margin-bottom: 20px;"> ${content} </div> <h2>HTML Code:</h2> <pre>${content.replace(/</g, '<').replace(/>/g, '>')}</pre> </body> </html> `); } // Event listeners editor.addEventListener('input', updateWordCount); editor.addEventListener('paste', (e) => { e.preventDefault(); const text = (e.clipboardData || window.clipboardData).getData('text/plain'); document.execCommand('insertText', false, text); }); // Initialize updateWordCount();
Login to leave a comment
No comments yet. Be the first!
No comments yet. Be the first!