如何使用Vanilla JS构建自定义WYSIWYG编辑器（RTE）：实现选中文本的加粗/斜体/下划线功能

Got it, let's build this vanilla JS WYSIWYG editor step by step. First, a quick fix to your HTML: using <textarea> with contenteditable="true" isn't standard—textarea is designed for plain text input. For rich text editing, swap it out for a <div> instead. Here's the adjusted HTML section for the editor:

<div class="input-container">
  <div contenteditable="true" name="text-input-c1" id="text-input" rows="3"></div>
</div>

Now, let's add the vanilla JavaScript to make the bold, italic, and underline buttons work. We'll use the browser's built-in document.execCommand() method, which simplifies interacting with editable content.

Complete JavaScript (script.js) #

// Grab references to our editor and buttons
const editor = document.getElementById('text-input');
const boldBtn = document.getElementById('bold');
const italicBtn = document.getElementById('italic');
const underlineBtn = document.getElementById('underline');

// Helper function to apply a format command
function applyFormat(command) {
  document.execCommand(command, false, null);
  editor.focus(); // Keep the editor focused after clicking a button
}

// Attach click handlers to each button
boldBtn.addEventListener('click', () => applyFormat('bold'));
italicBtn.addEventListener('click', () => applyFormat('italic'));
underlineBtn.addEventListener('click', () => applyFormat('underline'));

// Optional: Add active states to buttons when their format is applied
function updateButtonStates() {
  boldBtn.classList.toggle('active', document.queryCommandState('bold'));
  italicBtn.classList.toggle('active', document.queryCommandState('italic'));
  underlineBtn.classList.toggle('active', document.queryCommandState('underline'));
}

// Update button states when the editor is focused or selection changes
editor.addEventListener('focus', updateButtonStates);
editor.addEventListener('selectionchange', updateButtonStates);

How It Works #

1. document.execCommand(): This native browser method handles the heavy lifting of applying rich text formats. The first argument is the command name ('bold', 'italic', 'underline'), the second disables default browser UI (we don't need it here), and the third is for any extra command parameters (none needed for these formats).
2. editor.focus(): After clicking a button, we refocus the editor so users can keep typing without re-clicking the editable area.
3. Active Button States: The optional updateButtonStates function checks if the selected text already has a format applied using document.queryCommandState(), then toggles an active class on the corresponding button. Add this CSS to style the active state:

.btn.active {
  background-color: #2196F3;
  color: white;
  border-color: #1976D2;
}

Notes #

• While execCommand() is marked as deprecated in some documentation, it's still widely supported in modern browsers and perfect for basic rich text editors. For more advanced use cases, you'd work with the Selection and Range APIs, but that adds significant complexity.
• Make sure your editable div has some basic styling (like padding, border, min-height) so it looks like a proper input area—your existing style.css can handle that.

内容的提问来源于stack exchange，提问作者Abubakar Shafique