CKEditor widget demo

contents.css

.simplebox {
	padding: 8px;
	margin: 10px;
	background: #eee;
	border-radius: 8px;
	border: 1px solid #ddd;
	box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset;
}

plugin.js

CKEDITOR.plugins.add( 'simplebox', {
    requires: 'widget',

    icons: 'simplebox',

    init: function( editor ) {
        editor.widgets.add( 'simplebox', {

            button: 'Create a simple box',

            template:
                '<div class="simplebox"></div>',

            
            allowedContent:
                'div(!simplebox)',

            requiredContent: 'div(simplebox)',

            upcast: function( element ) {
                return element.name == 'div' && element.hasClass( 'simplebox' );                
            }
        } );
    }
} );