New 'libraries' folder in root instalation directory

libraries/ckeditor/plugins/widget/dev/assets/contents.css

@@ -0,0 +1,23 @@
+.mediumBorder {
+	border-width: 2px;
+}
+.thickBorder {
+	border-width: 5px;
+}
+img.thickBorder, img.mediumBorder {
+	border-style: solid;
+	border-color: #CCC;
+}
+.important.soMuch {
+	margin: 25px;
+	padding: 25px;
+	background: red;
+	border: none;
+}
+
+span.redMarker {
+	background-color: red;
+}
+.invisible {
+	opacity: 0.1;
+}

libraries/ckeditor/plugins/widget/dev/assets/simplebox/contents.css

@@ -0,0 +1,36 @@
+.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;
+}
+.simplebox-title, .simplebox-content {
+	box-shadow: 0 1px 1px #ddd inset;
+	border: 1px solid #cccccc;
+	border-radius: 5px;
+	background: #fff;
+}
+.simplebox-title {
+	margin: 0 0 8px;
+	padding: 5px 8px;
+}
+.simplebox-content {
+	padding: 0 8px;
+}
+.simplebox-content::after {
+	content: '';
+	display: block;
+	clear: both;
+}
+.simplebox.align-right {
+	float: right;
+}
+.simplebox.align-left {
+	float: left;
+}
+.simplebox.align-center {
+	margin-left: auto;
+	margin-right: auto;
+}

libraries/ckeditor/plugins/widget/dev/assets/simplebox/dialogs/simplebox.js

@@ -0,0 +1,51 @@
+// Note: This automatic widget to dialog window binding (the fact that every field is set up from the widget
+// and is committed to the widget) is only possible when the dialog is opened by the Widgets System
+// (i.e. the widgetDef.dialog property is set).
+// When you are opening the dialog window by yourself, you need to take care of this by yourself too.
+
+CKEDITOR.dialog.add( 'simplebox', function( editor ) {
+	return {
+		title: 'Edit Simple Box',
+		minWidth: 200,
+		minHeight: 100,
+		contents: [
+			{
+				id: 'info',
+				elements: [
+					{
+						id: 'align',
+						type: 'select',
+						label: 'Align',
+						items: [
+							[ editor.lang.common.notSet, '' ],
+							[ editor.lang.common.alignLeft, 'left' ],
+							[ editor.lang.common.alignRight, 'right' ],
+							[ editor.lang.common.alignCenter, 'center' ]
+						],
+						// When setting up this field, set its value to the "align" value from widget data.
+						// Note: Align values used in the widget need to be the same as those defined in the "items" array above.
+						setup: function( widget ) {
+							this.setValue( widget.data.align );
+						},
+						// When committing (saving) this field, set its value to the widget data.
+						commit: function( widget ) {
+							widget.setData( 'align', this.getValue() );
+						}
+					},
+					{
+						id: 'width',
+						type: 'text',
+						label: 'Width',
+						width: '50px',
+						setup: function( widget ) {
+							this.setValue( widget.data.width );
+						},
+						commit: function( widget ) {
+							widget.setData( 'width', this.getValue() );
+						}
+					}
+				]
+			}
+		]
+	};
+} );

libraries/ckeditor/plugins/widget/dev/assets/simplebox/plugin.js

@@ -0,0 +1,114 @@
+'use strict';
+
+// Register the plugin within the editor.
+CKEDITOR.plugins.add( 'simplebox', {
+	// This plugin requires the Widgets System defined in the 'widget' plugin.
+	requires: 'widget',
+
+	// Register the icon used for the toolbar button. It must be the same
+	// as the name of the widget.
+	icons: 'simplebox',
+
+	// The plugin initialization logic goes inside this method.
+	init: function( editor ) {
+		// Register the editing dialog.
+		CKEDITOR.dialog.add( 'simplebox', this.path + 'dialogs/simplebox.js' );
+
+		// Register the simplebox widget.
+		editor.widgets.add( 'simplebox', {
+			// Allow all HTML elements, classes, and styles that this widget requires.
+			// Read more about the Advanced Content Filter here:
+			// * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
+			// * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf
+			allowedContent:
+				'div(!simplebox,align-left,align-right,align-center){width};' +
+				'div(!simplebox-content); h2(!simplebox-title)',
+
+			// Minimum HTML which is required by this widget to work.
+			requiredContent: 'div(simplebox)',
+
+			// Define two nested editable areas.
+			editables: {
+				title: {
+					// Define CSS selector used for finding the element inside widget element.
+					selector: '.simplebox-title',
+					// Define content allowed in this nested editable. Its content will be
+					// filtered accordingly and the toolbar will be adjusted when this editable
+					// is focused.
+					allowedContent: 'br strong em'
+				},
+				content: {
+					selector: '.simplebox-content'
+				}
+			},
+
+			// Define the template of a new Simple Box widget.
+			// The template will be used when creating new instances of the Simple Box widget.
+			template:
+				'<div class="simplebox">' +
+					'<h2 class="simplebox-title">Title</h2>' +
+					'<div class="simplebox-content"><p>Content...</p></div>' +
+				'</div>',
+
+			// Define the label for a widget toolbar button which will be automatically
+			// created by the Widgets System. This button will insert a new widget instance
+			// created from the template defined above, or will edit selected widget
+			// (see second part of this tutorial to learn about editing widgets).
+			//
+			// Note: In order to be able to translate your widget you should use the
+			// editor.lang.simplebox.* property. A string was used directly here to simplify this tutorial.
+			button: 'Create a simple box',
+
+			// Set the widget dialog window name. This enables the automatic widget-dialog binding.
+			// This dialog window will be opened when creating a new widget or editing an existing one.
+			dialog: 'simplebox',
+
+			// Check the elements that need to be converted to widgets.
+			//
+			// Note: The "element" argument is an instance of http://docs.ckeditor.com/#!/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' );
+			},
+
+			// When a widget is being initialized, we need to read the data ("align" and "width")
+			// from DOM and set it by using the widget.setData() method.
+			// More code which needs to be executed when DOM is available may go here.
+			init: function() {
+				var width = this.element.getStyle( 'width' );
+				if ( width )
+					this.setData( 'width', width );
+
+				if ( this.element.hasClass( 'align-left' ) )
+					this.setData( 'align', 'left' );
+				if ( this.element.hasClass( 'align-right' ) )
+					this.setData( 'align', 'right' );
+				if ( this.element.hasClass( 'align-center' ) )
+					this.setData( 'align', 'center' );
+			},
+
+			// Listen on the widget#data event which is fired every time the widget data changes
+			// and updates the widget's view.
+			// Data may be changed by using the widget.setData() method, which we use in the
+			// Simple Box dialog window.
+			data: function() {
+				// Check whether "width" widget data is set and remove or set "width" CSS style.
+				// The style is set on widget main element (div.simplebox).
+				if ( !this.data.width )
+					this.element.removeStyle( 'width' );
+				else
+					this.element.setStyle( 'width', this.data.width );
+
+				// Brutally remove all align classes and set a new one if "align" widget data is set.
+				this.element.removeClass( 'align-left' );
+				this.element.removeClass( 'align-right' );
+				this.element.removeClass( 'align-center' );
+				if ( this.data.align )
+					this.element.addClass( 'align-' + this.data.align );
+			}
+		} );
+	}
+} );