rich text editor javascript code with example

        <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, '&lt;').replace(/>/g, '&gt;')}</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();