bootstrap3-wysiwyg编辑器粗体/斜体等格式按钮点击异常求助

I've run into this exact quirky bug with bootstrap3-wysiwyg before—where selecting an even number of formatting buttons (like bold + italic, or all four) breaks text formatting because the cursor ends up outside the generated HTML tags. Here's how I fixed it:

Root Cause #

The editor's default format-handling logic has an edge case when applying an even count of inline formatting commands. It correctly generates nested <b>, <i>, <u>, <small> tags, but fails to place the cursor inside the innermost tag—instead dropping it right after the closing tags, so new text doesn't inherit the formatting.

Solution: Force Cursor Position After Formatting #

Add a small patch to reposition the cursor inside the formatted content whenever a format button is clicked. You can either modify the editor's core code or add this standalone script after initializing the editor:

// Patch to fix cursor position after even-number format selections
$(document).on('click', '.btn[data-edit]', function() {
  setTimeout(function() {
    fixEditorCursor();
  }, 10);
});

function fixEditorCursor() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const allowedTags = ['B', 'I', 'U', 'SMALL'];
  
  // Check if cursor is at the start of a text node right after a format tag
  if (range.startContainer.nodeType === Node.TEXT_NODE && range.startOffset === 0) {
    const parentTag = range.startContainer.parentNode.tagName;
    if (allowedTags.includes(parentTag)) {
      // Move cursor to the start of the parent tag's content
      range.setStart(parentTag.firstChild, 0);
      range.setEnd(parentTag.firstChild, 0);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }
  
  // Additional check for nested tags (e.g., <b><i></i></b>)
  const currentNode = range.commonAncestorContainer;
  if (allowedTags.includes(currentNode.tagName)) {
    const lastChild = currentNode.lastChild;
    if (lastChild && lastChild.nodeType === Node.TEXT_NODE) {
      range.setStart(lastChild, lastChild.length);
      range.setEnd(lastChild, lastChild.length);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }
}

How It Works #

• The script listens for clicks on any format button with the data-edit attribute.
• After a short delay (to let the editor's default command finish), it checks the cursor position.
• If the cursor is stuck right after a closing format tag, it moves it inside the innermost formatted tag so new text gets wrapped correctly.
• It also handles nested tags (like bold+italic) by targeting the common ancestor container of the selection.

Community Context #

This bug has been discussed in the bootstrap3-wysiwyg repo's issues—several contributors have shared similar cursor-positioning fixes. The core issue comes down to how the browser's execCommand handles sequential inline format toggles, and the editor not accounting for the even-count edge case.

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