如何在ckeditor小部件上添加按钮？

Question

我想在添加的小部件中添加一个“删除”按钮以删除整个块。

当您将鼠标移过小部件时，该按钮应该出现。

对于某些用户而言，很难完全删除这些块，尤其是如果他们不知道如何从html部分进行编辑，则可以使用删除按钮快速删除这些块。

这是我想要实现的图像：https://i.stack.imgur.com/3IOSh.jpg

我已经找到了following question，但这回答了如何添加功能，我想知道如何在传递小部件时添加按钮。

这是小部件的代码：

CKEDITOR.plugins.add('simplebox', {
    icons: 'simplebox',
    init: function (editor) {
        editor.addCommand('insertTimestamp', {
            exec: function (editor) {
                editor.insertHtml('<div class="simplebox">' +
                        '<div class="simplebox-title"><h2>Title</h2></div>' +
                        '<div class="simplebox-content"><p>Content...</p></div>' +
                        '</div>');
            }
        });
        editor.ui.addButton('simplebox', {
            label: 'Create a simple box',
            command: 'insertTimestamp',
            toolbar: 'insert'
        });

        editor.widgets.add('simplebox', {
            // Check the elements that need to be converted to widgets.
            //
            // Note: The "element" argument is an instance of http://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.htmlParser.element
            // so it is not a real DOM element yet. This is caused by the fact that upcasting is performed
            // during data processing which is done on DOM represented by JavaScript objects.
            upcast: function (element) {
                // Return "true" (that element needs to converted to a Simple Box widget)
                // for all <div> elements with a "simplebox" class.
                return element.name == 'div' && element.hasClass('simplebox');
            },
            editables: {
                title: {
                    selector: 'h2'
                },
                content: {
                    selector: '.simplebox-content'
                }
            }


        });
    }
});