contenteditable and non button elements

Question

I can easily do execcommand on a contenteditable selection if using a button. However using any other element fails.

http://jsbin.com/atike/edit

Why is this and how can I make it work using a div element.

Thanks.

Answer 1

You could save the selection by using the mousedown event on the element being used instead of a button and restore it again after focussing the editable element in the click event.

I've modified the example code: http://jsbin.com/atike/40/edit. Here's the code:

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            var ranges = [];
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
            return ranges;
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(savedSel) {
    if (savedSel) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            for (var i = 0, len = savedSel.length; i < len; ++i) {
                sel.addRange(savedSel[i]);
            }
        } else if (document.selection && savedSel.select) {
            savedSel.select();
        }
    }
}

$(function() {
  var savedSel;

  $('.bold').mousedown(function () {
    savedSel = saveSelection();
  });

  $('.bold').click(function () {
    $('#hello').focus();
    if (savedSel) {
      restoreSelection(savedSel);
    }
    document.execCommand("bold", false, null);    
  });
});

Answer 2

Most, if not all, of the WYSIWYG editors out there use an iframe element in order to not lose the selection. Another approach, although I haven't tried it, would be to store each selection made on that page after the mouseup event triggers.

Take a look at this page about Midas, Gecko's built-in rich text editor.

Answer 3

What is happening is that when you click a text node, the browser wants to select that text. Buttons are not a part of the text flow and will therefore not trigger a new selection.

All you have to do is prevent the browser from performing a re-selection. When the click event you are currently observing runs the selection has already occurred and it's too late to act. The action starts to take place on mousedown for all browsers expect MSIE, which has a special selection events.

This works for me across browsers:

jQuery('.bold')
  .attr('unselectable','on') // prevents selection in MSIE
  .bind('mousedown',function (e) {
    document.execCommand("bold", false, null);
    e.preventDefault(); // prevents selection in all but MSIE
  });

There are a few complications with using MSIE's selection events (such as having to block dragging as well), so it's easier just to knock out the selectability of the element you are using as a button with the specialized attribute unselectable (needs the value "on").

You can obviously still perform the execCommand handling in click events and just run the selection prevention code on all elements intended as "buttons":

jQuery('.buttonlike')
  .attr('unselectable','on') // prevents selection in MSIE
  .bind('mousedown',function (e) {
    e.preventDefault(); // prevents selection in all but MSIE
  });

jQuery('#edit-bold').click(function(){
  document.execCommand("bold", false, null);
});