使用输入类型=按钮通过jQuery的“ Ctrl + B”功能

Question

I am trying to build an blog writing textbox, in which I am using a div element (contenteditable="true"). I am placing buttons for Bold, Italic,etc at the bottom. I want to trigger 'Ctrl+B' event when clicked on 'Bold' button and 'Ctrl+I' while clicked on 'Italic'. I have written following snippet for this functionality, but I am not getting the expected results. Can anybody put some thought on this?

$('#bold').mousedown(function(){
    var e = jQuery.Event("keydown");
    e.ctrlKey= true;
    e.which = 66; 
    e.keyCode=66;

    $('#displayBox').trigger(e);

    $('#displayBox').focus();
});
$('#bold').mouseup(function(){
    $('#displayBox').focus();

    var e = jQuery.Event("keyup");
    e.ctrlKey= false;
    e.which = 66;
    e.keyCode=66;

    $('#displayBox').trigger(e);
});

Answer 1

The way you make these changes to a contenteditable element is via document.execCommand

var box = document.getElementById('displayBox');

document.getElementById('bold').addEventListener('click', function (e) {
    box.focus(); // make it the active element so the command is applied to it
    document.execCommand('bold', false, null); // apply command
});

DEMO