Selection style

by shryme

HTML

<div id="div" contenteditable="true" style="width: 98%; height: 100px; border:solid #E8E8E8; border-width: 1px; overflow-y: scroll;">adsdsadsadsadasdasdsasda</div>

<input type="button" id="bold" value="BOLD">

JavaScript

var div = document.getElementById('div');
var bold = document.getElementById('bold');

var savedSel;

bold.addEventListener('mousedown', function () {
    savedSel = saveSelection();
});
bold.addEventListener('click', function () {
    div.focus();
    if (savedSel) {
        restoreSelection(savedSel);
    }
    document.execCommand("bold", false, null);
    document.execCommand("italic", false, null);
    
    alert(div.innerHTML);
});




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();
        }
    }
}