单击工具栏内的CKeditor更新Div

Question

我试图设置CKEDITOR来更新div的当前内容，以创建正在进行的内容的实时预览。截至目前我有

$(document).ready(function() {
    CKEDITOR.replace( 'content' ,
{   
    allowedContent: true,
    enterMode: CKEDITOR.ENTER_BR,
}).on('key',
    function(e){
        setTimeout(function(){
            $("#content-preview-content").html(CKEDITOR.instances.content.getData());
        },10);
    }
)
CKEDITOR.instances.content.on('contentDom', function() {
    this.document.on('click', function(event){
            $("#content-preview-content").html(CKEDITOR.instances.content.getData());
     });
});

});

效果很好。我唯一没想到的是如何获得工具栏功能，所以说要点击工具栏并点击粗体，然后在div中更新为粗体。现在他们必须在实际编辑器中单击，或者他们必须输入更多内容，然后它会更新粗体，斜体或者他们添加的任何内容。有没有人知道工具栏被调用了什么，因为谷歌搜索和测试的时间让我无处可去？