function toggleSelectionBold() {
                var range, sel;
                
                if (window.getSelection) {

                    // Non-IE case
                    sel = window.getSelection();
                    if (sel.getRangeAt) {
                        range = sel.getRangeAt(0);
                    }
                    $('#news_bulletin_div').attr('contenteditable', 'true');
                    if (range) {
                        sel.removeAllRanges();
                        sel.addRange(range);
                    }
                    document.execCommand("bold", null, false);
                    $('#news_bulletin_div').attr('contenteditable', 'false');
                } else if (document.selection && document.selection.createRange && document.selection.type != "None") {
                    // IE case
                    range = document.selection.createRange();
                    range.execCommand("bold", null, false);
                }
                
            }

Create a div with 'news_bulletin_div' as ID and add css as you like, add Bold button infront of it using float (or what ever where ever)

Add toggleSelectionBold on that button.

Now select a part of text within the DIV and click bold. It will bold it, again select the same bold text and click bold button and it will un-bold the selection.

Cheers.

WYSIWYG Bold effect on a DIV, Span etc.

JavaScript