Created admin panel

Currently allows you to create and edit blogs, including associated
records. Uses a WYSIWYG editor that allows uploading images.

Also included jQuery :(

185 files changed, 12003 insertions, 43 deletions

@@ -26,3 +26,4 @@ tags
 .byebug_history
 .DS_Store
 *.swo
+/public/uploads
@@ -56,3 +56,6 @@ gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 gem 'haml'
 gem 'normalize-rails'
 gem 'devise'
+gem 'ckeditor'
+gem 'paperclip'
+gem 'jquery-rails'
@@ -54,6 +54,12 @@ GEM
       xpath (~> 2.0)
     childprocess (0.7.0)
       ffi (~> 1.0, >= 1.0.11)
+    ckeditor (4.2.4)
+      cocaine
+      orm_adapter (~> 0.5.0)
+    climate_control (0.2.0)
+    cocaine (0.5.8)
+      climate_control (>= 0.0.3, < 1.0)
     coffee-rails (4.2.2)
       coffee-script (>= 2.2.0)
       railties (>= 4.0.0)
@@ -80,6 +86,10 @@ GEM
     jbuilder (2.7.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
+    jquery-rails (4.3.1)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -92,6 +102,7 @@ GEM
     mime-types (3.1)
       mime-types-data (~> 3.2015)
     mime-types-data (3.2016.0521)
+    mimemagic (0.3.2)
     mini_portile2 (2.2.0)
     minitest (5.10.2)
     multi_json (1.12.1)
@@ -100,6 +111,12 @@ GEM
       mini_portile2 (~> 2.2.0)
     normalize-rails (4.1.1)
     orm_adapter (0.5.0)
+    paperclip (5.1.0)
+      activemodel (>= 4.2.0)
+      activesupport (>= 4.2.0)
+      cocaine (~> 0.5.5)
+      mime-types
+      mimemagic (~> 0.3.0)
     public_suffix (2.0.5)
     puma (3.9.1)
     rack (2.0.3)
@@ -190,12 +207,15 @@ PLATFORMS
 DEPENDENCIES
   byebug
   capybara (~> 2.13)
+  ckeditor
   coffee-rails (~> 4.2)
   devise
   haml
   jbuilder (~> 2.5)
+  jquery-rails
   listen (>= 3.0.5, < 3.2)
   normalize-rails
+  paperclip
   puma (~> 3.7)
   rails (~> 5.1.1)
   sass-rails (~> 5.0)
@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/
@@ -10,6 +10,8 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require rails-ujs
+//= require jquery3
+//= require jquery_ujs
 //= require turbolinks
+//= require ckeditor/init
 //= require_tree .
@@ -0,0 +1,61 @@
+/*

+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.

+For licensing, see LICENSE.html or http://ckeditor.com/license

+*/

+

+CKEDITOR.editorConfig = function( config )

+{

+  // Define changes to default configuration here. For example:

+  // config.language = 'fr';

+  // config.uiColor = '#AADC6E';

+  config.height = "512px";

+

+  config.extraPlugins = "lineutils,widgetselection,widget,image2";

+

+  /* Filebrowser routes */

+  // The location of an external file browser, that should be launched when "Browse Server" button is pressed.

+  config.filebrowserBrowseUrl = "/ckeditor/attachment_files";

+

+  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog.

+  config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";

+

+  // The location of a script that handles file uploads in the Flash dialog.

+  config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";

+

+  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog.

+  config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";

+

+  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog.

+  config.filebrowserImageBrowseUrl = "/ckeditor/pictures";

+

+  // The location of a script that handles file uploads in the Image dialog.

+  config.filebrowserImageUploadUrl = "/ckeditor/pictures?";

+

+  // The location of a script that handles file uploads.

+  config.filebrowserUploadUrl = "/ckeditor/attachment_files";

+

+  config.allowedContent = true;

+

+  // Toolbar groups configuration.

+  config.toolbar = [

+    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', 'Maximize' ] },

+    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', '-', 'Undo', 'Redo' ] },

+    { name: 'editing', groups: [ 'find' ], items: [ 'Find', 'Replace' ] },

+    // { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },

+    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },

+    { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule' ] },

+    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },

+    '/',

+    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },

+    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },

+    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }

+  ];

+

+  config.toolbar_mini = [

+    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },

+    { name: 'styles', items: [ 'Font', 'FontSize' ] },

+    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },

+    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },

+    { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] }

+  ];

+};

@@ -0,0 +1,208 @@
+/*

+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.

+For licensing, see LICENSE.md or http://ckeditor.com/license

+*/

+

+body

+{

+        /* Font */

+        font-family: sans-serif, Arial, Verdana, "Trebuchet MS";

+        font-size: 12px;

+

+        /* Text color */

+        color: #333;

+

+        /* Remove the background color to make it transparent */

+        background-color: #fff;

+

+        margin: 20px;

+}

+

+.cke_editable

+{

+        font-size: 13px;

+        line-height: 1.6;

+

+        /* Fix for missing scrollbars with RTL texts. (#10488) */

+        word-wrap: break-word;

+}

+

+blockquote

+{

+        font-style: italic;

+        font-family: Georgia, Times, "Times New Roman", serif;

+        padding: 2px 0;

+        border-style: solid;

+        border-color: #ccc;

+        border-width: 0;

+}

+

+.cke_contents_ltr blockquote

+{

+        padding-left: 20px;

+        padding-right: 8px;

+        border-left-width: 5px;

+}

+

+.cke_contents_rtl blockquote

+{

+        padding-left: 8px;

+        padding-right: 20px;

+        border-right-width: 5px;

+}

+

+a

+{

+        color: #0782C1;

+}

+

+ol,ul,dl

+{

+        /* IE7: reset rtl list margin. (#7334) */

+        *margin-right: 0px;

+        /* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/

+        padding: 0 40px;

+}

+

+h1,h2,h3,h4,h5,h6

+{

+        font-weight: normal;

+        line-height: 1.2;

+}

+

+hr

+{

+        border: 0px;

+        border-top: 1px solid #ccc;

+}

+

+img.right

+{

+        border: 1px solid #ccc;

+        float: right;

+        margin-left: 15px;

+        padding: 5px;

+}

+

+img.left

+{

+        border: 1px solid #ccc;

+        float: left;

+        margin-right: 15px;

+        padding: 5px;

+}

+

+pre

+{

+        white-space: pre-wrap; /* CSS 2.1 */

+        word-wrap: break-word; /* IE7 */

+        -moz-tab-size: 4;

+        tab-size: 4;

+}

+

+.marker

+{

+        background-color: Yellow;

+}

+

+span[lang]

+{

+        font-style: italic;

+}

+

+figure

+{

+        text-align: center;

+        border: solid 1px #ccc;

+        border-radius: 2px;

+        background: rgba(0,0,0,0.05);

+        padding: 10px;

+        margin: 10px 20px;

+        display: inline-block;

+}

+

+figure > figcaption

+{

+        text-align: center;

+        display: block; /* For IE8 */

+}

+

+a > img {

+        padding: 1px;

+        margin: 1px;

+        border: none;

+        outline: 1px solid #0782C1;

+}

+

+/* Widget Styles */

+.code-featured

+{

+        border: 5px solid red;

+}

+

+.math-featured

+{

+        padding: 20px;

+        box-shadow: 0 0 2px rgba(200, 0, 0, 1);

+        background-color: rgba(255, 0, 0, 0.05);

+        margin: 10px;

+}

+

+.image-clean

+{

+        border: 0;

+        background: none;

+        padding: 0;

+}

+

+.image-clean > figcaption

+{

+        font-size: .9em;

+        text-align: right;

+}

+

+.image-grayscale

+{

+        background-color: white;

+        color: #666;

+}

+

+.image-grayscale img, img.image-grayscale

+{

+        filter: grayscale(100%);

+}

+

+.embed-240p

+{

+        max-width: 426px;

+        max-height: 240px;

+        margin:0 auto;

+}

+

+.embed-360p

+{

+        max-width: 640px;

+        max-height: 360px;

+        margin:0 auto;

+}

+

+.embed-480p

+{

+        max-width: 854px;

+        max-height: 480px;

+        margin:0 auto;

+}

+

+.embed-720p

+{

+        max-width: 1280px;

+        max-height: 720px;

+        margin:0 auto;

+}

+

+.embed-1080p

+{

+        max-width: 1920px;

+        max-height: 1080px;

+        margin:0 auto;

+}

@@ -0,0 +1,35 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+
+.cke_widget_wrapper:hover:after {
+        content: "id: " attr(data-cke-widget-id);
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 2px 4px;
+        background: #EEE;
+        border: solid 1px #DDD;
+        border-radius: 2px;
+        color: #BBB;
+        font: bold 10px sans-serif;
+}
+
+.align-left {
+        float: left;
+        margin-right: 20px;
+}
+
+.align-right {
+        float: right;
+        margin-left: 20px;
+}
+
+.align-center {
+        text-align: center;
+}
+
+.align-center > figure {
+        display: inline-block;
+}
@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+        <meta charset="utf-8">
+        <title>Widget Image &mdash; CKEditor Sample</title>
+        <script src="../../../ckeditor.js"></script>
+        <script src="../../../dev/console/console.js"></script>
+        <script src="../../../dev/console/focusconsole.js"></script>
+        <script src="../../widget/dev/console.js"></script>
+        <script>
+                if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
+                        CKEDITOR.tools.enableHtml5Elements( document );
+
+                var editor;
+
+                // The instanceReady event is fired, when an instance of CKEditor has finished
+                // its initialization.
+                CKEDITOR.on( 'instanceReady', function( ev ) {
+                        editor = ev.editor;
+
+                        // Show this "on" button.
+                        document.getElementById( 'readOnlyOn' ).style.display = '';
+
+                        // Event fired when the readOnly property changes.
+                        editor.on( 'readOnly', function() {
+                                document.getElementById( 'readOnlyOn' ).style.display = this.readOnly ? 'none' : '';
+                                document.getElementById( 'readOnlyOff' ).style.display = this.readOnly ? '' : 'none';
+                        });
+                });
+
+                function toggleReadOnly( isReadOnly ) {
+                        // Change the read-only state of the editor.
+                        // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setReadOnly
+                        editor.setReadOnly( isReadOnly );
+                }
+
+        </script>
+        <link href="../../../samples/old/sample.css" rel="stylesheet">
+
+        <style>
+
+                body {
+                        font-size: 13px;
+                }
+                .editable {
+                        padding: 20px;
+                        border: 2px solid #dfdfdf;
+                        overflow: auto;
+                }
+
+                body p {
+                        line-height: 1.8em;
+                }
+
+                /* Reset some styles from sample.css */
+                .cke_editable.cke_editable_inline
+                {
+                        cursor: auto;
+                }
+                .cke_editable.cke_editable_inline.cke_focus
+                {
+                        box-shadow: none;
+                        background: inherit;
+                        cursor: auto;
+                }
+
+        </style>
+        <link href="contents.css" rel="stylesheet">
+        <link href="../../../contents.css" rel="stylesheet">
+</head>
+<body>
+        <h1 class="samples">
+                <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Widget Image
+        </h1>
+
+        <h2>Classic (iframe-based) Sample</h2>
+
+        <textarea id="editor1" cols="10" rows="10">
+                <h1>Apollo 11</h1>
+
+                <figure class="image" style="float: right">
+                        <img alt="Saturn V" src="assets/image1.jpg" width="200" data-foo="*********" data-bar="@@@@@@@@" />
+                        <figcaption>Roll out of Saturn V on launch pad</figcaption>
+                </figure>
+
+                <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
+
+                <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
+
+                <h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2>
+
+                <p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
+
+                <blockquote>
+                <p>One small step for [a] man, one giant leap for mankind.</p>
+                </blockquote>
+
+                <p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p>
+
+                <blockquote>
+                <p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
+                </blockquote>
+
+                <figure class="image" style="float: right">
+                        <img alt="The Eagle" src="assets/image2.jpg" style="width: 200px" />
+                        <figcaption>The Eagle in lunar orbit</figcaption>
+                </figure>
+
+                <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
+
+                <p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p>
+
+                <ol>
+                        <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
+                        <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
+                        <li><strong>Lunar Module</strong> for landing on the Moon.</li>
+                </ol>
+
+                <p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
+
+                <p style="text-align:center">
+                        <img alt="Saturn V" src="assets/image1.jpg" width="200" />
+                </p>
+
+                <hr />
+                <p style="text-align:right"><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>
+        </textarea>
+
+        <h2>Inline Sample</h2>
+
+        <div id="editor2" contenteditable="true" class="editable">
+                <h2>Apollo 11</h2>
+
+                <figure class="image" style="float: right">
+                        <img alt="Saturn V" src="assets/image1.jpg" width="200" />
+                        <figcaption>Roll out of Saturn V on launch pad</figcaption>
+                </figure>
+
+                <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
+
+                <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
+
+                <h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2>
+
+                <p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
+
+                <blockquote>
+                <p>One small step for [a] man, one giant leap for mankind.</p>
+                </blockquote>
+
+                <p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p>
+
+                <blockquote>
+                <p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
+                </blockquote>
+
+                <figure class="image" style="float: right">
+                        <img alt="The Eagle" src="assets/image2.jpg" style="width: 200px" />
+                        <figcaption>The Eagle in lunar orbit</figcaption>
+                </figure>
+
+                <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
+
+                <p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p>
+
+                <ol>
+                        <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
+                        <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
+                        <li><strong>Lunar Module</strong> for landing on the Moon.</li>
+                </ol>
+
+                <p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
+
+                <p style="text-align:center">
+                        <img alt="Saturn V" src="assets/image1.jpg" width="200" />
+                </p>
+
+                <hr />
+                <p style="text-align:right"><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>
+        </div>
+
+        <h2>Div Editing Area Sample</h2>
+
+        <textarea id="editor3" cols="10" rows="10">
+                <h1>Apollo 11</h1>
+
+                <figure class="caption" style="float: right">
+                        <img alt="Saturn V" src="assets/image1.jpg" width="200" />
+                        <figcaption>Roll out of Saturn V on launch pad</figcaption>
+                </figure>
+
+                <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
+
+                <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
+
+                <h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2>
+
+                <p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
+
+                <blockquote>
+                <p>One small step for [a] man, one giant leap for mankind.</p>
+                </blockquote>
+
+                <p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p>
+
+                <blockquote>
+                <p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
+                </blockquote>
+
+                <figure class="caption" style="float: right">
+                        <img alt="The Eagle" src="assets/image2.jpg" style="width: 200px" />
+                        <figcaption>The Eagle in lunar orbit</figcaption>
+                </figure>
+
+                <h2>Technical Details <a id="tech-details" name="tech-details"></a></h2>
+
+                <p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p>
+
+                <ol>
+                        <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
+                        <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
+                        <li><strong>Lunar Module</strong> for landing on the Moon.</li>
+                </ol>
+
+                <p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
+
+                <p style="text-align:center">
+                        <img alt="Saturn V" src="assets/image1.jpg" width="200" />
+                </p>
+
+                <hr />
+                <p style="text-align:right"><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>
+        </textarea>
+
+        <h2>alignClasses samples</h2>
+
+        <textarea id="editor4" cols="10" rows="10">
+                <h1>Apollo 11</h1>
+
+                <figure class="align-left image">
+                        <img alt="Saturn V" src="assets/image1.jpg" width="200" data-foo="*********" data-bar="@@@@@@@@" />
+                        <figcaption>Roll out of Saturn V on launch pad</figcaption>
+                </figure>
+
+                <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
+
+                <blockquote>
+                <p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
+                </blockquote>
+
+                <figure class="align-right image">
+                        <img alt="The Eagle" src="assets/image2.jpg" style="width: 200px" />
+                        <figcaption>The Eagle in lunar orbit</figcaption>
+                </figure>
+
+                <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
+
+                <p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p>
+
+                <ol>
+                        <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
+                        <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
+                        <li><strong>Lunar Module</strong> for landing on the Moon.</li>
+                </ol>
+
+                <p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
+
+                <p class="align-center">
+                        <img alt="Saturn V" src="assets/image1.jpg" width="200" />
+                </p>
+
+                <hr />
+                <p style="text-align:right"><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>
+        </textarea>
+
+        <p>
+                <input id="readOnlyOn" onclick="toggleReadOnly( true );" type="button" value="Make it read-only" style="display:none">
+                <input id="readOnlyOff" onclick="toggleReadOnly( false );" type="button" value="Make it editable again" style="display:none">
+        </p>
+
+        <script>
+
+                CKEDITOR.disableAutoInline = true;
+
+                CKEDITOR.replace( 'editor1', {
+                        extraPlugins: 'image2',
+                        height: 600,
+                        contentsCss: [ '../../../contents.css', 'contents.css' ],
+                        extraAllowedContent: 'img[data-foo,data-bar]',
+
+                        filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
+                        filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?Type=Images',
+                        filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
+                        filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
+                } );
+
+                CKEDITOR.inline( 'editor2', {
+                        extraPlugins: 'image2,sourcedialog'
+                } );
+
+                CKEDITOR.replace( 'editor3', {
+                        extraPlugins: 'image2,divarea',
+                        height: 600
+                } );
+
+                CKEDITOR.replace( 'editor4', {
+                        extraPlugins: 'image2',
+                        image2_alignClasses: [ 'align-left', 'align-center', 'align-right' ],
+                        contentsCss: [ '../../../contents.css', 'contents.css' ],
+                        height: 600
+                } );
+
+                CKCONSOLE.create( 'widget', { editor: 'editor1' } );
+                CKCONSOLE.create( 'focus', { editor: 'editor1' } );
+                CKCONSOLE.create( 'widget', { editor: 'editor2', folded: true } );
+                CKCONSOLE.create( 'focus', { editor: 'editor2', folded: true } );
+                CKCONSOLE.create( 'widget', { editor: 'editor3' } );
+                CKCONSOLE.create( 'focus', { editor: 'editor3' } );
+                CKCONSOLE.create( 'widget', { editor: 'editor4' } );
+                CKCONSOLE.create( 'focus', { editor: 'editor4' } );
+
+        </script>
+
+        <div id="footer">
+                <hr>
+                <p>
+                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
+                </p>
+                <p id="copy">
+                        Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+                        Knabben. All rights reserved.
+                </p>
+        </div>
+</body>
+</html>
@@ -0,0 +1,553 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+/**
+ * @fileOverview Image plugin based on Widgets API
+ */
+
+'use strict';
+
+CKEDITOR.dialog.add( 'image2', function( editor ) {
+
+        // RegExp: 123, 123px, empty string ""
+        var regexGetSizeOrEmpty = /(^\s*(\d+)(px)?\s*$)|^$/i,
+
+                lockButtonId = CKEDITOR.tools.getNextId(),
+                resetButtonId = CKEDITOR.tools.getNextId(),
+
+                lang = editor.lang.image2,
+                commonLang = editor.lang.common,
+
+                lockResetStyle = 'margin-top:18px;width:40px;height:20px;',
+                lockResetHtml = new CKEDITOR.template(
+                        '<div>' +
+                                '<a href="javascript:void(0)" tabindex="-1" title="' + lang.lockRatio + '" class="cke_btn_locked" id="{lockButtonId}" role="checkbox">' +
+                                        '<span class="cke_icon"></span>' +
+                                        '<span class="cke_label">' + lang.lockRatio + '</span>' +
+                                '</a>' +
+
+                                '<a href="javascript:void(0)" tabindex="-1" title="' + lang.resetSize + '" class="cke_btn_reset" id="{resetButtonId}" role="button">' +
+                                        '<span class="cke_label">' + lang.resetSize + '</span>' +
+                                '</a>' +
+                        '</div>' ).output( {
+                                lockButtonId: lockButtonId,
+                                resetButtonId: resetButtonId
+                        } ),
+
+                helpers = CKEDITOR.plugins.image2,
+
+                // Editor instance configuration.
+                config = editor.config,
+
+                hasFileBrowser = !!( config.filebrowserImageBrowseUrl || config.filebrowserBrowseUrl ),
+
+                // Content restrictions defined by the widget which
+                // impact on dialog structure and presence of fields.
+                features = editor.widgets.registered.image.features,
+
+                // Functions inherited from image2 plugin.
+                getNatural = helpers.getNatural,
+
+                // Global variables referring to the dialog's context.
+                doc, widget, image,
+
+                // Global variable referring to this dialog's image pre-loader.
+                preLoader,
+
+                // Global variables holding the original size of the image.
+                domWidth, domHeight,
+
+                // Global variables related to image pre-loading.
+                preLoadedWidth, preLoadedHeight, srcChanged,
+
+                // Global variables related to size locking.
+                lockRatio, userDefinedLock,
+
+                // Global variables referring to dialog fields and elements.
+                lockButton, resetButton, widthField, heightField,
+
+                natural;
+
+        // Validates dimension. Allowed values are:
+        // "123px", "123", "" (empty string)
+        function validateDimension() {
+                var match = this.getValue().match( regexGetSizeOrEmpty ),
+                        isValid = !!( match && parseInt( match[ 1 ], 10 ) !== 0 );
+
+                if ( !isValid )
+                        alert( commonLang[ 'invalid' + CKEDITOR.tools.capitalize( this.id ) ] ); // jshint ignore:line
+
+                return isValid;
+        }
+
+        // Creates a function that pre-loads images. The callback function passes
+        // [image, width, height] or null if loading failed.
+        //
+        // @returns {Function}
+        function createPreLoader() {
+                var image = doc.createElement( 'img' ),
+                        listeners = [];
+
+                function addListener( event, callback ) {
+                        listeners.push( image.once( event, function( evt ) {
+                                removeListeners();
+                                callback( evt );
+                        } ) );
+                }
+
+                function removeListeners() {
+                        var l;
+
+                        while ( ( l = listeners.pop() ) )
+                                l.removeListener();
+                }
+
+                // @param {String} src.
+                // @param {Function} callback.
+                return function( src, callback, scope ) {
+                        addListener( 'load', function() {
+                                // Don't use image.$.(width|height) since it's buggy in IE9-10 (http://dev.ckeditor.com/ticket/11159)
+                                var dimensions = getNatural( image );
+
+                                callback.call( scope, image, dimensions.width, dimensions.height );
+                        } );
+
+                        addListener( 'error', function() {
+                                callback( null );
+                        } );
+
+                        addListener( 'abort', function() {
+                                callback( null );
+                        } );
+
+                        image.setAttribute( 'src',
+                                ( config.baseHref || '' ) + src + '?' + Math.random().toString( 16 ).substring( 2 ) );
+                };
+        }
+
+        // This function updates width and height fields once the
+        // "src" field is altered. Along with dimensions, also the
+        // dimensions lock is adjusted.
+        function onChangeSrc() {
+                var value = this.getValue();
+
+                toggleDimensions( false );
+
+                // Remember that src is different than default.
+                if ( value !== widget.data.src ) {
+                        // Update dimensions of the image once it's preloaded.
+                        preLoader( value, function( image, width, height ) {
+                                // Re-enable width and height fields.
+                                toggleDimensions( true );
+
+                                // There was problem loading the image. Unlock ratio.
+                                if ( !image )
+                                        return toggleLockRatio( false );
+
+                                // Fill width field with the width of the new image.
+                                widthField.setValue( editor.config.image2_prefillDimensions === false ? 0 : width );
+
+                                // Fill height field with the height of the new image.
+                                heightField.setValue( editor.config.image2_prefillDimensions === false ? 0 : height );
+
+                                // Cache the new width.
+                                preLoadedWidth = width;
+
+                                // Cache the new height.
+                                preLoadedHeight = height;
+
+                                // Check for new lock value if image exist.
+                                toggleLockRatio( helpers.checkHasNaturalRatio( image ) );
+                        } );
+
+                        srcChanged = true;
+                }
+
+                // Value is the same as in widget data but is was
+                // modified back in time. Roll back dimensions when restoring
+                // default src.
+                else if ( srcChanged ) {
+                        // Re-enable width and height fields.
+                        toggleDimensions( true );
+
+                        // Restore width field with cached width.
+                        widthField.setValue( domWidth );
+
+                        // Restore height field with cached height.
+                        heightField.setValue( domHeight );
+
+                        // Src equals default one back again.
+                        srcChanged = false;
+                }
+
+                // Value is the same as in widget data and it hadn't
+                // been modified.
+                else {
+                        // Re-enable width and height fields.
+                        toggleDimensions( true );
+                }
+        }
+
+        function onChangeDimension() {
+                // If ratio is un-locked, then we don't care what's next.
+                if ( !lockRatio )
+                        return;
+
+                var value = this.getValue();
+
+                // No reason to auto-scale or unlock if the field is empty.
+                if ( !value )
+                        return;
+
+                // If the value of the field is invalid (e.g. with %), unlock ratio.
+                if ( !value.match( regexGetSizeOrEmpty ) )
+                        toggleLockRatio( false );
+
+                // No automatic re-scale when dimension is '0'.
+                if ( value === '0' )
+                        return;
+
+                var isWidth = this.id == 'width',
+                        // If dialog opened for the new image, domWidth and domHeight
+                        // will be empty. Use dimensions from pre-loader in such case instead.
+                        width = domWidth || preLoadedWidth,
+                        height = domHeight || preLoadedHeight;
+
+                // If changing width, then auto-scale height.
+                if ( isWidth )
+                        value = Math.round( height * ( value / width ) );
+
+                // If changing height, then auto-scale width.
+                else
+                        value = Math.round( width * ( value / height ) );
+
+                // If the value is a number, apply it to the other field.
+                if ( !isNaN( value ) )
+                        ( isWidth ? heightField : widthField ).setValue( value );
+        }
+
+        // Set-up function for lock and reset buttons:
+        //      * Adds lock and reset buttons to focusables. Check if button exist first
+        //        because it may be disabled e.g. due to ACF restrictions.
+        //      * Register mouseover and mouseout event listeners for UI manipulations.
+        //      * Register click event listeners for buttons.
+        function onLoadLockReset() {
+                var dialog = this.getDialog();
+
+                function setupMouseClasses( el ) {
+                        el.on( 'mouseover', function() {
+                                this.addClass( 'cke_btn_over' );
+                        }, el );
+
+                        el.on( 'mouseout', function() {
+                                this.removeClass( 'cke_btn_over' );
+                        }, el );
+                }
+
+                // Create references to lock and reset buttons for this dialog instance.
+                lockButton = doc.getById( lockButtonId );
+                resetButton = doc.getById( resetButtonId );
+
+                // Activate (Un)LockRatio button
+                if ( lockButton ) {
+                        // Consider that there's an additional focusable field
+                        // in the dialog when the "browse" button is visible.
+                        dialog.addFocusable( lockButton, 4 + hasFileBrowser );
+
+                        lockButton.on( 'click', function( evt ) {
+                                toggleLockRatio();
+                                evt.data && evt.data.preventDefault();
+                        }, this.getDialog() );
+
+                        setupMouseClasses( lockButton );
+                }
+
+                // Activate the reset size button.
+                if ( resetButton ) {
+                        // Consider that there's an additional focusable field
+                        // in the dialog when the "browse" button is visible.
+                        dialog.addFocusable( resetButton, 5 + hasFileBrowser );
+
+                        // Fills width and height fields with the original dimensions of the
+                        // image (stored in widget#data since widget#init).
+                        resetButton.on( 'click', function( evt ) {
+                                // If there's a new image loaded, reset button should revert
+                                // cached dimensions of pre-loaded DOM element.
+                                if ( srcChanged ) {
+                                        widthField.setValue( preLoadedWidth );
+                                        heightField.setValue( preLoadedHeight );
+                                }
+
+                                // If the old image remains, reset button should revert
+                                // dimensions as loaded when the dialog was first shown.
+                                else {
+                                        widthField.setValue( domWidth );
+                                        heightField.setValue( domHeight );
+                                }
+
+                                evt.data && evt.data.preventDefault();
+                        }, this );
+
+                        setupMouseClasses( resetButton );
+                }
+        }
+
+        function toggleLockRatio( enable ) {
+                // No locking if there's no radio (i.e. due to ACF).
+                if ( !lockButton )
+                        return;
+
+                if ( typeof enable == 'boolean' ) {
+                        // If user explicitly wants to decide whether
+                        // to lock or not, don't do anything.
+                        if ( userDefinedLock )
+                                return;
+
+                        lockRatio = enable;
+                }
+
+                // Undefined. User changed lock value.
+                else {
+                        var width = widthField.getValue(),
+                                height;
+
+                        userDefinedLock = true;
+                        lockRatio = !lockRatio;
+
+                        // Automatically adjust height to width to match
+                        // the original ratio (based on dom- dimensions).
+                        if ( lockRatio && width ) {
+                                height = domHeight / domWidth * width;
+
+                                if ( !isNaN( height ) )
+                                        heightField.setValue( Math.round( height ) );
+                        }
+                }
+
+                lockButton[ lockRatio ? 'removeClass' : 'addClass' ]( 'cke_btn_unlocked' );
+                lockButton.setAttribute( 'aria-checked', lockRatio );
+
+                // Ratio button hc presentation - WHITE SQUARE / BLACK SQUARE
+                if ( CKEDITOR.env.hc ) {
+                        var icon = lockButton.getChild( 0 );
+                        icon.setHtml( lockRatio ? CKEDITOR.env.ie ? '\u25A0' : '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2' );
+                }
+        }
+
+        function toggleDimensions( enable ) {
+                var method = enable ? 'enable' : 'disable';
+
+                widthField[ method ]();
+                heightField[ method ]();
+        }
+
+        var srcBoxChildren = [
+                        {
+                                id: 'src',
+                                type: 'text',
+                                label: commonLang.url,
+                                onKeyup: onChangeSrc,
+                                onChange: onChangeSrc,
+                                setup: function( widget ) {
+                                        this.setValue( widget.data.src );
+                                },
+                                commit: function( widget ) {
+                                        widget.setData( 'src', this.getValue() );
+                                },
+                                validate: CKEDITOR.dialog.validate.notEmpty( lang.urlMissing )
+                        }
+                ];
+
+        // Render the "Browse" button on demand to avoid an "empty" (hidden child)
+        // space in dialog layout that distorts the UI.
+        if ( hasFileBrowser ) {
+                srcBoxChildren.push( {
+                        type: 'button',
+                        id: 'browse',
+                        // v-align with the 'txtUrl' field.
+                        // TODO: We need something better than a fixed size here.
+                        style: 'display:inline-block;margin-top:14px;',
+                        align: 'center',
+                        label: editor.lang.common.browseServer,
+                        hidden: true,
+                        filebrowser: 'info:src'
+                } );
+        }
+
+        return {
+                title: lang.title,
+                minWidth: 250,
+                minHeight: 100,
+                onLoad: function() {
+                        // Create a "global" reference to the document for this dialog instance.
+                        doc = this._.element.getDocument();
+
+                        // Create a pre-loader used for determining dimensions of new images.
+                        preLoader = createPreLoader();
+                },
+                onShow: function() {
+                        // Create a "global" reference to edited widget.
+                        widget = this.widget;
+
+                        // Create a "global" reference to widget's image.
+                        image = widget.parts.image;
+
+                        // Reset global variables.
+                        srcChanged = userDefinedLock = lockRatio = false;
+
+                        // Natural dimensions of the image.
+                        natural = getNatural( image );
+
+                        // Get the natural width of the image.
+                        preLoadedWidth = domWidth = natural.width;
+
+                        // Get the natural height of the image.
+                        preLoadedHeight = domHeight = natural.height;
+                },
+                contents: [
+                        {
+                                id: 'info',
+                                label: lang.infoTab,
+                                elements: [
+                                        {
+                                                type: 'vbox',
+                                                padding: 0,
+                                                children: [
+                                                        {
+                                                                type: 'hbox',
+                                                                widths: [ '100%' ],
+                                                                className: 'cke_dialog_image_url',
+                                                                children: srcBoxChildren
+                                                        }
+                                                ]
+                                        },
+                                        {
+                                                id: 'alt',
+                                                type: 'text',
+                                                label: lang.alt,
+                                                setup: function( widget ) {
+                                                        this.setValue( widget.data.alt );
+                                                },
+                                                commit: function( widget ) {
+                                                        widget.setData( 'alt', this.getValue() );
+                                                },
+                                                validate: editor.config.image2_altRequired === true ? CKEDITOR.dialog.validate.notEmpty( lang.altMissing ) : null
+                                        },
+                                        {
+                                                type: 'hbox',
+                                                widths: [ '25%', '25%', '50%' ],
+                                                requiredContent: features.dimension.requiredContent,
+                                                children: [
+                                                        {
+                                                                type: 'text',
+                                                                width: '45px',
+                                                                id: 'width',
+                                                                label: commonLang.width,
+                                                                validate: validateDimension,
+                                                                onKeyUp: onChangeDimension,
+                                                                onLoad: function() {
+                                                                        widthField = this;
+                                                                },
+                                                                setup: function( widget ) {
+                                                                        this.setValue( widget.data.width );
+                                                                },
+                                                                commit: function( widget ) {
+                                                                        widget.setData( 'width', this.getValue() );
+                                                                }
+                                                        },
+                                                        {
+                                                                type: 'text',
+                                                                id: 'height',
+                                                                width: '45px',
+                                                                label: commonLang.height,
+                                                                validate: validateDimension,
+                                                                onKeyUp: onChangeDimension,
+                                                                onLoad: function() {
+                                                                        heightField = this;
+                                                                },
+                                                                setup: function( widget ) {
+                                                                        this.setValue( widget.data.height );
+                                                                },
+                                                                commit: function( widget ) {
+                                                                        widget.setData( 'height', this.getValue() );
+                                                                }
+                                                        },
+                                                        {
+                                                                id: 'lock',
+                                                                type: 'html',
+                                                                style: lockResetStyle,
+                                                                onLoad: onLoadLockReset,
+                                                                setup: function( widget ) {
+                                                                        toggleLockRatio( widget.data.lock );
+                                                                },
+                                                                commit: function( widget ) {
+                                                                        widget.setData( 'lock', lockRatio );
+                                                                },
+                                                                html: lockResetHtml
+                                                        }
+                                                ]
+                                        },
+                                        {
+                                                type: 'hbox',
+                                                id: 'alignment',
+                                                requiredContent: features.align.requiredContent,
+                                                children: [
+                                                        {
+                                                                id: 'align',
+                                                                type: 'radio',
+                                                                items: [
+                                                                        [ commonLang.alignNone, 'none' ],
+                                                                        [ commonLang.alignLeft, 'left' ],
+                                                                        [ commonLang.alignCenter, 'center' ],
+                                                                        [ commonLang.alignRight, 'right' ]
+                                                                ],
+                                                                label: commonLang.align,
+                                                                setup: function( widget ) {
+                                                                        this.setValue( widget.data.align );
+                                                                },
+                                                                commit: function( widget ) {
+                                                                        widget.setData( 'align', this.getValue() );
+                                                                }
+                                                        }
+                                                ]
+                                        },
+                                        {
+                                                id: 'hasCaption',
+                                                type: 'checkbox',
+                                                label: lang.captioned,
+                                                requiredContent: features.caption.requiredContent,
+                                                setup: function( widget ) {
+                                                        this.setValue( widget.data.hasCaption );
+                                                },
+                                                commit: function( widget ) {
+                                                        widget.setData( 'hasCaption', this.getValue() );
+                                                }
+                                        }
+                                ]
+                        },
+                        {
+                                id: 'Upload',
+                                hidden: true,
+                                filebrowser: 'uploadButton',
+                                label: lang.uploadTab,
+                                elements: [
+                                        {
+                                                type: 'file',
+                                                id: 'upload',
+                                                label: lang.btnUpload,
+                                                style: 'height:40px'
+                                        },
+                                        {
+                                                type: 'fileButton',
+                                                id: 'uploadButton',
+                                                filebrowser: 'info:src',
+                                                label: lang.btnUpload,
+                                                'for': [ 'Upload', 'upload' ]
+                                        }
+                                ]
+                        }
+                ]
+        };
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'af', {
+        alt: 'Alternatiewe teks',
+        btnUpload: 'Stuur na bediener',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Afbeelding informasie',
+        lockRatio: 'Vaste proporsie',
+        menu: 'Afbeelding eienskappe',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Herstel grootte',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Afbeelding eienskappe',
+        uploadTab: 'Oplaai',
+        urlMissing: 'Die URL na die afbeelding ontbreek.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'ar', {
+        alt: 'عنوان الصورة',
+        btnUpload: 'أرسلها للخادم',
+        captioned: 'صورة ذات اسم',
+        captionPlaceholder: 'تسمية',
+        infoTab: 'معلومات الصورة',
+        lockRatio: 'تناسق الحجم',
+        menu: 'خصائص الصورة',
+        pathName: 'صورة',
+        pathNameCaption: 'تسمية',
+        resetSize: 'إستعادة الحجم الأصلي',
+        resizer: 'انقر ثم اسحب للتحجيم',
+        title: 'خصائص الصورة',
+        uploadTab: 'رفع',
+        urlMissing: 'عنوان مصدر الصورة مفقود',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'az', {
+        alt: 'Alternativ mətn',
+        btnUpload: 'Serverə göndər',
+        captioned: 'Altyazı olan şəkil',
+        captionPlaceholder: 'Altyazı',
+        infoTab: 'Şəkil haqqında məlumat',
+        lockRatio: 'Ölçülərin nisbəti saxla',
+        menu: 'Şəklin seçimləri',
+        pathName: 'Şəkil',
+        pathNameCaption: 'Altyazı',
+        resetSize: 'Ölçüləri qaytar',
+        resizer: 'Ölçülər dəyişmək üçün tıklayın və aparın',
+        title: 'Şəklin seçimləri',
+        uploadTab: 'Serverə yüklə',
+        urlMissing: 'Şəklin ünvanı yanlışdır.',
+        altMissing: 'Alternativ mətn tapılmayıb'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'bg', {
+        alt: 'Алтернативен текст',
+        btnUpload: 'Изпрати я на сървъра',
+        captioned: 'Надписано изображение',
+        captionPlaceholder: 'Надпис',
+        infoTab: 'Детайли за изображението',
+        lockRatio: 'Заключване на съотношението',
+        menu: 'Настройки на изображението',
+        pathName: 'изображение',
+        pathNameCaption: 'надпис',
+        resetSize: 'Нулиране на размер',
+        resizer: 'Кликни и влачи, за да преоразмериш',
+        title: 'Настройки на изображението',
+        uploadTab: 'Качване',
+        urlMissing: 'URL адреса на изображението липсва.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'bn', {
+        alt: 'বিকল্প টেক্সট',
+        btnUpload: 'ইহাকে সার্ভারে প্রেরন কর',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'ছবির তথ্য',
+        lockRatio: 'অনুপাত লক কর',
+        menu: 'ছবির প্রোপার্টি',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'সাইজ পূর্বাবস্থায় ফিরিয়ে দাও',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'ছবির প্রোপার্টি',
+        uploadTab: 'আপলোড',
+        urlMissing: 'Image source URL is missing.', // MISSING
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'bs', {
+        alt: 'Tekst na slici',
+        btnUpload: 'Šalji na server',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Info slike',
+        lockRatio: 'Zakljuèaj odnos',
+        menu: 'Svojstva slike',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Resetuj dimenzije',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Svojstva slike',
+        uploadTab: 'Šalji',
+        urlMissing: 'Image source URL is missing.', // MISSING
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'ca', {
+        alt: 'Text alternatiu',
+        btnUpload: 'Envia-la al servidor',
+        captioned: 'Imatge amb subtítol',
+        captionPlaceholder: 'Títol',
+        infoTab: 'Informació de la imatge',
+        lockRatio: 'Bloqueja les proporcions',
+        menu: 'Propietats de la imatge',
+        pathName: 'imatge',
+        pathNameCaption: 'subtítol',
+        resetSize: 'Restaura la mida',
+        resizer: 'Clicar i arrossegar per redimensionar',
+        title: 'Propietats de la imatge',
+        uploadTab: 'Puja',
+        urlMissing: 'Falta la URL de la imatge.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'cs', {
+        alt: 'Alternativní text',
+        btnUpload: 'Odeslat na server',
+        captioned: 'Obrázek s popisem',
+        captionPlaceholder: 'Popis',
+        infoTab: 'Informace o obrázku',
+        lockRatio: 'Zámek',
+        menu: 'Vlastnosti obrázku',
+        pathName: 'Obrázek',
+        pathNameCaption: 'Popis',
+        resetSize: 'Původní velikost',
+        resizer: 'Klepněte a táhněte pro změnu velikosti',
+        title: 'Vlastnosti obrázku',
+        uploadTab: 'Odeslat',
+        urlMissing: 'Zadané URL zdroje obrázku nebylo nalezeno.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'cy', {
+        alt: 'Testun Amgen',
+        btnUpload: 'Anfon i\'r Gweinydd',
+        captioned: 'Delwedd â phennawd',
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Gwyb Delwedd',
+        lockRatio: 'Cloi Cymhareb',
+        menu: 'Priodweddau Delwedd',
+        pathName: 'delwedd',
+        pathNameCaption: 'pennawd',
+        resetSize: 'Ailosod Maint',
+        resizer: 'Clicio a llusgo i ail-meintio',
+        title: 'Priodweddau Delwedd',
+        uploadTab: 'Lanlwytho',
+        urlMissing: 'URL gwreiddiol y ddelwedd ar goll.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'da', {
+        alt: 'Alternativ tekst',
+        btnUpload: 'Upload fil til serveren',
+        captioned: 'Tekstet billede',
+        captionPlaceholder: 'Tekst',
+        infoTab: 'Generelt',
+        lockRatio: 'Lås størrelsesforhold',
+        menu: 'Egenskaber for billede',
+        pathName: 'billede',
+        pathNameCaption: 'tekst',
+        resetSize: 'Nulstil størrelse',
+        resizer: 'Klik og træk for at ændre størrelsen',
+        title: 'Egenskaber for billede',
+        uploadTab: 'Upload',
+        urlMissing: 'Kilde på billed-URL mangler',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'de-ch', {
+        alt: 'Alternativer Text',
+        btnUpload: 'Zum Server senden',
+        captioned: 'Bild mit Überschrift',
+        captionPlaceholder: 'Überschrift',
+        infoTab: 'Bildinfo',
+        lockRatio: 'Größenverhältnis beibehalten',
+        menu: 'Bildeigenschaften',
+        pathName: 'Bild',
+        pathNameCaption: 'Überschrift',
+        resetSize: 'Grösse zurücksetzen',
+        resizer: 'Zum Vergrössern auswählen und ziehen',
+        title: 'Bild-Eigenschaften',
+        uploadTab: 'Hochladen',
+        urlMissing: 'Bildquellen-URL fehlt.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'de', {
+        alt: 'Alternativer Text',
+        btnUpload: 'Zum Server senden',
+        captioned: 'Bild mit Überschrift',
+        captionPlaceholder: 'Überschrift',
+        infoTab: 'Bildinfo',
+        lockRatio: 'Größenverhältnis beibehalten',
+        menu: 'Bildeigenschaften',
+        pathName: 'Bild',
+        pathNameCaption: 'Überschrift',
+        resetSize: 'Größe zurücksetzen',
+        resizer: 'Zum Vergrößern auswählen und ziehen',
+        title: 'Bild-Eigenschaften',
+        uploadTab: 'Hochladen',
+        urlMissing: 'Bildquellen-URL fehlt.',
+        altMissing: 'Alternativer Text fehlt.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'el', {
+        alt: 'Εναλλακτικό Κείμενο',
+        btnUpload: 'Αποστολή στον Διακομιστή',
+        captioned: 'Εικόνα με λεζάντα',
+        captionPlaceholder: 'Λεζάντα',
+        infoTab: 'Πληροφορίες Εικόνας',
+        lockRatio: 'Κλείδωμα Αναλογίας',
+        menu: 'Ιδιότητες Εικόνας',
+        pathName: 'εικόνα',
+        pathNameCaption: 'λεζάντα',
+        resetSize: 'Επαναφορά Αρχικού Μεγέθους',
+        resizer: 'Κάνετε κλικ και σύρετε το ποντίκι για να αλλάξετε το μέγεθος',
+        title: 'Ιδιότητες Εικόνας',
+        uploadTab: 'Αποστολή',
+        urlMissing: 'Λείπει το πηγαίο URL της εικόνας.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'en-au', {
+        alt: 'Alternative Text',
+        btnUpload: 'Send it to the Server',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Image Info',
+        lockRatio: 'Lock Ratio',
+        menu: 'Image Properties',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Reset Size',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Image Properties',
+        uploadTab: 'Upload',
+        urlMissing: 'Image source URL is missing.', // MISSING
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'en-ca', {
+        alt: 'Alternative Text',
+        btnUpload: 'Send it to the Server',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Image Info',
+        lockRatio: 'Lock Ratio',
+        menu: 'Image Properties',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Reset Size',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Image Properties',
+        uploadTab: 'Upload',
+        urlMissing: 'Image source URL is missing.', // MISSING
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'en-gb', {
+        alt: 'Alternative Text',
+        btnUpload: 'Send it to the Server',
+        captioned: 'Captioned image',
+        captionPlaceholder: 'Caption',
+        infoTab: 'Image Info',
+        lockRatio: 'Lock Ratio',
+        menu: 'Image Properties',
+        pathName: 'image',
+        pathNameCaption: 'caption',
+        resetSize: 'Reset Size',
+        resizer: 'Click and drag to resize',
+        title: 'Image Properties',
+        uploadTab: 'Upload',
+        urlMissing: 'Image source URL is missing.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'en', {
+        alt: 'Alternative Text',
+        btnUpload: 'Send it to the Server',
+        captioned: 'Captioned image',
+        captionPlaceholder: 'Caption',
+        infoTab: 'Image Info',
+        lockRatio: 'Lock Ratio',
+        menu: 'Image Properties',
+        pathName: 'image',
+        pathNameCaption: 'caption',
+        resetSize: 'Reset Size',
+        resizer: 'Click and drag to resize',
+        title: 'Image Properties',
+        uploadTab: 'Upload',
+        urlMissing: 'Image source URL is missing.',
+        altMissing: 'Alternative text is missing.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'eo', {
+        alt: 'Anstataŭiga Teksto',
+        btnUpload: 'Sendu al Servilo',
+        captioned: 'Bildo kun apudskribo',
+        captionPlaceholder: 'Apudskribo',
+        infoTab: 'Informoj pri Bildo',
+        lockRatio: 'Konservi Proporcion',
+        menu: 'Atributoj de Bildo',
+        pathName: 'bildo',
+        pathNameCaption: 'apudskribo',
+        resetSize: 'Origina Grando',
+        resizer: 'Kliki kaj treni por ŝanĝi la grandon',
+        title: 'Atributoj de Bildo',
+        uploadTab: 'Alŝuti',
+        urlMissing: 'La fontretadreso de la bildo mankas.',
+        altMissing: 'Alternativa teksto mankas.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'es-mx', {
+        alt: 'Texto alternativo',
+        btnUpload: 'Enviar al servidor',
+        captioned: 'Imagen subtitulada',
+        captionPlaceholder: 'Subtítulo',
+        infoTab: 'Información de la imagen',
+        lockRatio: 'Bloquear aspecto',
+        menu: 'Propiedades de la imagen',
+        pathName: 'imagen',
+        pathNameCaption: 'subtítulo',
+        resetSize: 'Reiniciar tamaño',
+        resizer: 'Presiona y arrastra para redimensionar',
+        title: 'Propiedades de imagen',
+        uploadTab: 'Cargar',
+        urlMissing: 'Falta la URL de origen de la imagen.',
+        altMissing: 'Falta texto alternativo.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'es', {
+        alt: 'Texto Alternativo',
+        btnUpload: 'Enviar al Servidor',
+        captioned: 'Imagen subtitulada',
+        captionPlaceholder: 'Leyenda',
+        infoTab: 'Información de Imagen',
+        lockRatio: 'Proporcional',
+        menu: 'Propiedades de Imagen',
+        pathName: 'image',
+        pathNameCaption: 'subtítulo',
+        resetSize: 'Tamaño Original',
+        resizer: 'Dar clic y arrastrar para cambiar tamaño',
+        title: 'Propiedades de Imagen',
+        uploadTab: 'Cargar',
+        urlMissing: 'Debe indicar la URL de la imagen.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'et', {
+        alt: 'Alternatiivne tekst',
+        btnUpload: 'Saada serverisse',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Pildi info',
+        lockRatio: 'Lukusta kuvasuhe',
+        menu: 'Pildi omadused',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Lähtesta suurus',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Pildi omadused',
+        uploadTab: 'Lae üles',
+        urlMissing: 'Pildi lähte-URL on puudu.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'eu', {
+        alt: 'Ordezko testua',
+        btnUpload: 'Bidali zerbitzarira',
+        captioned: 'Argazki oina',
+        captionPlaceholder: 'Argazki oina',
+        infoTab: 'Irudiaren informazioa',
+        lockRatio: 'Blokeatu erlazioa',
+        menu: 'Irudiaren propietateak',
+        pathName: 'Irudia',
+        pathNameCaption: 'Argazki oina',
+        resetSize: 'Berrezarri tamaina',
+        resizer: 'Klikatu eta arrastatu tamainaz aldatzeko',
+        title: 'Irudiaren propietateak',
+        uploadTab: 'Kargatu',
+        urlMissing: 'Irudiaren iturburuaren URLa falta da.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'fa', {
+        alt: 'متن جایگزین',
+        btnUpload: 'به سرور بفرست',
+        captioned: 'تصویر زیرنویس شده',
+        captionPlaceholder: 'عنوان',
+        infoTab: 'اطلاعات تصویر',
+        lockRatio: 'قفل کردن نسبت',
+        menu: 'ویژگی​های تصویر',
+        pathName: 'تصویر',
+        pathNameCaption: 'عنوان',
+        resetSize: 'بازنشانی اندازه',
+        resizer: 'کلیک و کشیدن برای تغییر اندازه',
+        title: 'ویژگی​های تصویر',
+        uploadTab: 'بالاگذاری',
+        urlMissing: 'آدرس URL اصلی تصویر یافت نشد.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'fi', {
+        alt: 'Vaihtoehtoinen teksti',
+        btnUpload: 'Lähetä palvelimelle',
+        captioned: 'Kuva kuvatekstillä',
+        captionPlaceholder: 'Kuvateksti',
+        infoTab: 'Kuvan tiedot',
+        lockRatio: 'Lukitse suhteet',
+        menu: 'Kuvan ominaisuudet',
+        pathName: 'kuva',
+        pathNameCaption: 'kuvateksti',
+        resetSize: 'Alkuperäinen koko',
+        resizer: 'Klikkaa ja raahaa muuttaaksesi kokoa',
+        title: 'Kuvan ominaisuudet',
+        uploadTab: 'Lisää tiedosto',
+        urlMissing: 'Kuvan lähdeosoite puuttuu.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'fo', {
+        alt: 'Alternativur tekstur',
+        btnUpload: 'Send til ambætaran',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Myndaupplýsingar',
+        lockRatio: 'Læs lutfallið',
+        menu: 'Myndaeginleikar',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Upprunastødd',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Myndaeginleikar',
+        uploadTab: 'Send til ambætaran',
+        urlMissing: 'URL til mynd manglar.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'fr-ca', {
+        alt: 'Texte alternatif',
+        btnUpload: 'Envoyer sur le serveur',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Informations sur l\'image2',
+        lockRatio: 'Verrouiller les proportions',
+        menu: 'Propriétés de l\'image2',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Taille originale',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Propriétés de l\'image2',
+        uploadTab: 'Téléverser',
+        urlMissing: 'L\'URL de la source de l\'image est manquant.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'fr', {
+        alt: 'Texte alternatif',
+        btnUpload: 'Envoyer sur le serveur',
+        captioned: 'Image légendée',
+        captionPlaceholder: 'Légende',
+        infoTab: 'Informations sur l\'image',
+        lockRatio: 'Conserver les proportions',
+        menu: 'Propriétés de l\'image',
+        pathName: 'image',
+        pathNameCaption: 'légende',
+        resetSize: 'Réinitialiser la taille',
+        resizer: 'Cliquer et glisser pour redimensionner',
+        title: 'Propriétés de l\'image',
+        uploadTab: 'Téléverser',
+        urlMissing: 'L\'URL source de l\'image est manquante.',
+        altMissing: 'Vous n\'avez pas indiqué de texte de remplacement.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'gl', {
+        alt: 'Texto alternativo',
+        btnUpload: 'Enviar ao servidor',
+        captioned: 'Imaxe con lenda',
+        captionPlaceholder: 'Lenda',
+        infoTab: 'Información da imaxe',
+        lockRatio: 'Proporcional',
+        menu: 'Propiedades da imaxe',
+        pathName: 'Imaxe',
+        pathNameCaption: 'lenda',
+        resetSize: 'Tamaño orixinal',
+        resizer: 'Prema e arrastre para axustar o tamaño',
+        title: 'Propiedades da imaxe',
+        uploadTab: 'Cargar',
+        urlMissing: 'Non se atopa o URL da imaxe.',
+        altMissing: 'Non foi posíbel atopar o texto alternativo.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'gu', {
+        alt: 'ઑલ્ટર્નટ ટેક્સ્ટ',
+        btnUpload: 'આ સર્વરને મોકલવું',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'ચિત્ર ની જાણકારી',
+        lockRatio: 'લૉક ગુણોત્તર',
+        menu: 'ચિત્રના ગુણ',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'રીસેટ સાઇઝ',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'ચિત્રના ગુણ',
+        uploadTab: 'અપલોડ',
+        urlMissing: 'ઈમેજની મૂળ URL છે નહી.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'he', {
+        alt: 'טקסט חלופי',
+        btnUpload: 'שליחה לשרת',
+        captioned: 'כותרת תמונה',
+        captionPlaceholder: 'כותרת',
+        infoTab: 'מידע על התמונה',
+        lockRatio: 'נעילת היחס',
+        menu: 'תכונות התמונה',
+        pathName: 'תמונה',
+        pathNameCaption: 'כותרת',
+        resetSize: 'איפוס הגודל',
+        resizer: 'לחץ וגרור לשינוי הגודל',
+        title: 'מאפייני התמונה',
+        uploadTab: 'העלאה',
+        urlMissing: 'כתובת התמונה חסרה.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'hi', {
+        alt: 'वैकल्पिक टेक्स्ट',
+        btnUpload: 'इसे सर्वर को भेजें',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'तस्वीर की जानकारी',
+        lockRatio: 'लॉक अनुपात',
+        menu: 'तस्वीर प्रॉपर्टीज़',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'रीसॅट साइज़',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'तस्वीर प्रॉपर्टीज़',
+        uploadTab: 'अपलोड',
+        urlMissing: 'Image source URL is missing.', // MISSING
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'hr', {
+        alt: 'Alternativni tekst',
+        btnUpload: 'Pošalji na server',
+        captioned: 'Titl slike',
+        captionPlaceholder: 'Titl',
+        infoTab: 'Info slike',
+        lockRatio: 'Zaključaj odnos',
+        menu: 'Svojstva slika',
+        pathName: 'slika',
+        pathNameCaption: 'titl',
+        resetSize: 'Obriši veličinu',
+        resizer: 'Odaberi i povuci za promjenu veličine',
+        title: 'Svojstva slika',
+        uploadTab: 'Pošalji',
+        urlMissing: 'Nedostaje URL slike.',
+        altMissing: 'Nedostaje alternativni tekst.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'hu', {
+        alt: 'Buborék szöveg',
+        btnUpload: 'Küldés a szerverre',
+        captioned: 'Feliratozott kép',
+        captionPlaceholder: 'Képfelirat',
+        infoTab: 'Alaptulajdonságok',
+        lockRatio: 'Arány megtartása',
+        menu: 'Kép tulajdonságai',
+        pathName: 'kép',
+        pathNameCaption: 'felirat',
+        resetSize: 'Eredeti méret',
+        resizer: 'Kattints és húzz az átméretezéshez',
+        title: 'Kép tulajdonságai',
+        uploadTab: 'Feltöltés',
+        urlMissing: 'Hiányzik a kép URL-je',
+        altMissing: 'Az alternatív szöveg hiányzik.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'id', {
+        alt: 'Teks alternatif',
+        btnUpload: 'Kirim ke Server',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Info Gambar',
+        lockRatio: 'Lock Ratio', // MISSING
+        menu: 'Image Properties', // MISSING
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Atur Ulang Ukuran',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Image Properties', // MISSING
+        uploadTab: 'Unggah',
+        urlMissing: 'Image source URL is missing.', // MISSING
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'is', {
+        alt: 'Baklægur texti',
+        btnUpload: 'Hlaða upp',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Almennt',
+        lockRatio: 'Festa stærðarhlutfall',
+        menu: 'Eigindi myndar',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Reikna stærð',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Eigindi myndar',
+        uploadTab: 'Senda upp',
+        urlMissing: 'Image source URL is missing.', // MISSING
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'it', {
+        alt: 'Testo alternativo',
+        btnUpload: 'Invia al server',
+        captioned: 'Immagine con didascalia',
+        captionPlaceholder: 'Didascalia',
+        infoTab: 'Informazioni immagine',
+        lockRatio: 'Blocca rapporto',
+        menu: 'Proprietà immagine',
+        pathName: 'immagine',
+        pathNameCaption: 'didascalia',
+        resetSize: 'Reimposta dimensione',
+        resizer: 'Fare clic e trascinare per ridimensionare',
+        title: 'Proprietà immagine',
+        uploadTab: 'Carica',
+        urlMissing: 'Manca l\'URL dell\'immagine.',
+        altMissing: 'Testo alternativo mancante.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'ja', {
+        alt: '代替テキスト',
+        btnUpload: 'サーバーに送信',
+        captioned: 'キャプションを付ける',
+        captionPlaceholder: 'キャプション',
+        infoTab: '画像情報',
+        lockRatio: '比率を固定',
+        menu: '画像のプロパティ',
+        pathName: 'image',
+        pathNameCaption: 'caption',
+        resetSize: 'サイズをリセット',
+        resizer: 'ドラッグしてリサイズ',
+        title: '画像のプロパティ',
+        uploadTab: 'アップロード',
+        urlMissing: '画像のURLを入力してください。',
+        altMissing: '代替テキストを入力してください。'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'ka', {
+        alt: 'სანაცვლო ტექსტი',
+        btnUpload: 'სერვერისთვის გაგზავნა',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'სურათის ინფორმცია',
+        lockRatio: 'პროპორციის შენარჩუნება',
+        menu: 'სურათის პარამეტრები',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'ზომის დაბრუნება',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'სურათის პარამეტრები',
+        uploadTab: 'აქაჩვა',
+        urlMissing: 'სურათის URL არაა შევსებული.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'km', {
+        alt: 'អត្ថបទជំនួស',
+        btnUpload: 'បញ្ជូនទៅកាន់ម៉ាស៊ីនផ្តល់សេវា',
+        captioned: 'រូប​ដែល​មាន​ចំណង​ជើង',
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'ពត៌មានអំពីរូបភាព',
+        lockRatio: 'ចាក់​សោ​ផល​ធៀប',
+        menu: 'លក្ខណៈ​សម្បត្តិ​រូប​ភាព',
+        pathName: 'រូបភាព',
+        pathNameCaption: 'ចំណងជើង',
+        resetSize: 'កំណត់ទំហំឡើងវិញ',
+        resizer: 'ចុច​ហើយ​ទាញ​ដើម្បី​ប្ដូរ​ទំហំ',
+        title: 'លក្ខណៈ​សម្បត្តិ​រូប​ភាប',
+        uploadTab: 'ផ្ទុក​ឡើង',
+        urlMissing: 'ខ្វះ URL ប្រភព​រូប​ភាព។',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'ko', {
+        alt: '대체 문자열',
+        btnUpload: '서버로 전송',
+        captioned: '이미지 설명 넣기',
+        captionPlaceholder: '설명',
+        infoTab: '이미지 정보',
+        lockRatio: '비율 유지',
+        menu: '이미지 속성',
+        pathName: '이미지',
+        pathNameCaption: '설명',
+        resetSize: '원래 크기로',
+        resizer: '크기를 조절하려면 클릭 후 드래그 하세요',
+        title: '이미지 속성',
+        uploadTab: '업로드',
+        urlMissing: '이미지 원본 주소(URL)가 없습니다.',
+        altMissing: '대체 문자가 없습니다.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'ku', {
+        alt: 'جێگرەوەی دەق',
+        btnUpload: 'ناردنی بۆ ڕاژه',
+        captioned: 'وێنەی بەسەردێر',
+        captionPlaceholder: 'سەردێر',
+        infoTab: 'زانیاری وێنه',
+        lockRatio: 'داخستنی ڕێژه',
+        menu: 'خاسیەتی وێنه',
+        pathName: 'وێنە',
+        pathNameCaption: 'سەردێر',
+        resetSize: 'ڕێکخستنەوەی قەباره',
+        resizer: 'کرتەبکە و ڕایبکێشە بۆ قەبارە گۆڕین',
+        title: 'خاسیەتی وێنه',
+        uploadTab: 'بارکردن',
+        urlMissing: 'سەرچاوەی بەستەری وێنه بزره',
+        altMissing: 'جێگرەوەی دەق لەدەست چووە.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'lt', {
+        alt: 'Alternatyvus Tekstas',
+        btnUpload: 'Siųsti į serverį',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Vaizdo informacija',
+        lockRatio: 'Išlaikyti proporciją',
+        menu: 'Vaizdo savybės',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Atstatyti dydį',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Vaizdo savybės',
+        uploadTab: 'Siųsti',
+        urlMissing: 'Paveiksliuko nuorodos nėra.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'lv', {
+        alt: 'Alternatīvais teksts',
+        btnUpload: 'Nosūtīt serverim',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Informācija par attēlu',
+        lockRatio: 'Nemainīga Augstuma/Platuma attiecība',
+        menu: 'Attēla īpašības',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Atjaunot sākotnējo izmēru',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Attēla īpašības',
+        uploadTab: 'Augšupielādēt',
+        urlMissing: 'Trūkst attēla atrašanās adrese.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'mk', {
+        alt: 'Алтернативен текст',
+        btnUpload: 'Прикачи на сервер',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Информации за сликата',
+        lockRatio: 'Зачувај пропорција',
+        menu: 'Својства на сликата',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Ресетирај големина',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Својства на сликата',
+        uploadTab: 'Прикачи',
+        urlMissing: 'Недостасува URL-то на сликата.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'mn', {
+        alt: 'Зургийг орлох бичвэр',
+        btnUpload: 'Үүнийг сервэррүү илгээ',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Зурагны мэдээлэл',
+        lockRatio: 'Радио түгжих',
+        menu: 'Зураг',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'хэмжээ дахин оноох',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Зураг',
+        uploadTab: 'Илгээж ачаалах',
+        urlMissing: 'Зургийн эх сурвалжийн хаяг (URL) байхгүй байна.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'ms', {
+        alt: 'Text Alternatif',
+        btnUpload: 'Hantar ke Server',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Info Imej',
+        lockRatio: 'Tetapkan Nisbah',
+        menu: 'Ciri-ciri Imej',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Saiz Set Semula',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Ciri-ciri Imej',
+        uploadTab: 'Muat Naik',
+        urlMissing: 'Image source URL is missing.', // MISSING
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'nb', {
+        alt: 'Alternativ tekst',
+        btnUpload: 'Send det til serveren',
+        captioned: 'Bilde med bildetekst',
+        captionPlaceholder: 'Bildetekst',
+        infoTab: 'Bildeinformasjon',
+        lockRatio: 'Lås forhold',
+        menu: 'Bildeegenskaper',
+        pathName: 'bilde',
+        pathNameCaption: 'bildetekst',
+        resetSize: 'Tilbakestill størrelse',
+        resizer: 'Klikk og dra for å endre størrelse',
+        title: 'Bildeegenskaper',
+        uploadTab: 'Last opp',
+        urlMissing: 'Bildets adresse mangler.',
+        altMissing: 'Alternativ tekst mangler.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'nl', {
+        alt: 'Alternatieve tekst',
+        btnUpload: 'Naar server verzenden',
+        captioned: 'Afbeelding met onderschrift',
+        captionPlaceholder: 'Onderschrift',
+        infoTab: 'Afbeeldingsinformatie',
+        lockRatio: 'Verhouding vergrendelen',
+        menu: 'Eigenschappen afbeelding',
+        pathName: 'afbeelding',
+        pathNameCaption: 'onderschrift',
+        resetSize: 'Afmetingen herstellen',
+        resizer: 'Klik en sleep om te herschalen',
+        title: 'Afbeeldingseigenschappen',
+        uploadTab: 'Uploaden',
+        urlMissing: 'De URL naar de afbeelding ontbreekt.',
+        altMissing: 'Alternatieve tekst ontbreekt.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'no', {
+        alt: 'Alternativ tekst',
+        btnUpload: 'Send det til serveren',
+        captioned: 'Bilde med bildetekst',
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Bildeinformasjon',
+        lockRatio: 'Lås forhold',
+        menu: 'Bildeegenskaper',
+        pathName: 'bilde',
+        pathNameCaption: 'bildetekst',
+        resetSize: 'Tilbakestill størrelse',
+        resizer: 'Klikk og dra for å endre størrelse',
+        title: 'Bildeegenskaper',
+        uploadTab: 'Last opp',
+        urlMissing: 'Bildets adresse mangler.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'oc', {
+        alt: 'Tèxte alternatiu',
+        btnUpload: 'Mandar sul servidor',
+        captioned: 'Imatge amb legenda',
+        captionPlaceholder: 'Legenda',
+        infoTab: 'Informacions sus l\'imatge',
+        lockRatio: 'Conservar las proporcions',
+        menu: 'Proprietats de l\'imatge',
+        pathName: 'imatge',
+        pathNameCaption: 'legenda',
+        resetSize: 'Reïnicializar la talha',
+        resizer: 'Clicar e lisar per redimensionar',
+        title: 'Proprietats de l\'imatge',
+        uploadTab: 'Mandar',
+        urlMissing: 'L\'URL font de l\'imatge es mancanta.',
+        altMissing: 'Lo tèxte alternatiu es mancant.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'pl', {
+        alt: 'Tekst zastępczy',
+        btnUpload: 'Wyślij',
+        captioned: 'Obrazek z podpisem',
+        captionPlaceholder: 'Podpis',
+        infoTab: 'Informacje o obrazku',
+        lockRatio: 'Zablokuj proporcje',
+        menu: 'Właściwości obrazka',
+        pathName: 'obrazek',
+        pathNameCaption: 'podpis',
+        resetSize: 'Przywróć rozmiar',
+        resizer: 'Kliknij i przeciągnij, by zmienić rozmiar.',
+        title: 'Właściwości obrazka',
+        uploadTab: 'Wyślij',
+        urlMissing: 'Podaj adres URL obrazka.',
+        altMissing: 'Podaj tekst zastępczy obrazka.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'pt-br', {
+        alt: 'Texto Alternativo',
+        btnUpload: 'Enviar para o Servidor',
+        captioned: 'Legenda da Imagem',
+        captionPlaceholder: 'Legenda',
+        infoTab: 'Informações da Imagem',
+        lockRatio: 'Travar Proporções',
+        menu: 'Formatar Imagem',
+        pathName: 'Imagem',
+        pathNameCaption: 'Legenda',
+        resetSize: 'Redefinir para o Tamanho Original',
+        resizer: 'Click e arraste para redimensionar',
+        title: 'Formatar Imagem',
+        uploadTab: 'Enviar ao Servidor',
+        urlMissing: 'URL da imagem está faltando.',
+        altMissing: 'Texto alternativo não informado.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'pt', {
+        alt: 'Texto alternativo',
+        btnUpload: 'Enviar para o servidor',
+        captioned: 'Imagem legendada',
+        captionPlaceholder: 'Legenda',
+        infoTab: 'Informação da imagem',
+        lockRatio: 'Proporcional',
+        menu: 'Propriedades da imagem',
+        pathName: 'imagem',
+        pathNameCaption: 'legenda',
+        resetSize: 'Tamanho original',
+        resizer: 'Clique e arraste para redimensionar',
+        title: 'Propriedades da imagem',
+        uploadTab: 'Carregar',
+        urlMissing: 'O URL de origem da imagem está em falta.',
+        altMissing: 'Texto alternativo em falta.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'ro', {
+        alt: 'Text alternativ',
+        btnUpload: 'Trimite la server',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Informaţii despre imagine',
+        lockRatio: 'Păstrează proporţiile',
+        menu: 'Proprietăţile imaginii',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Resetează mărimea',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Proprietăţile imaginii',
+        uploadTab: 'Încarcă',
+        urlMissing: 'Sursa URL a imaginii lipsește.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'ru', {
+        alt: 'Альтернативный текст',
+        btnUpload: 'Загрузить на сервер',
+        captioned: 'Отображать название',
+        captionPlaceholder: 'Название',
+        infoTab: 'Данные об изображении',
+        lockRatio: 'Сохранять пропорции',
+        menu: 'Свойства изображения',
+        pathName: 'изображение',
+        pathNameCaption: 'название',
+        resetSize: 'Вернуть обычные размеры',
+        resizer: 'Нажмите и растяните',
+        title: 'Свойства изображения',
+        uploadTab: 'Загрузка файла',
+        urlMissing: 'Не указана ссылка на изображение.',
+        altMissing: 'Не задан альтернативный текст'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'si', {
+        alt: 'විකල්ප ',
+        btnUpload: 'සේවාදායකය වෙත යොමුකිරිම',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'රුපයේ තොරතුරු',
+        lockRatio: 'නවතන අනුපාතය ',
+        menu: 'රුපයේ ගුණ',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'නැවතත් විශාලත්වය වෙනස් කිරීම',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'රුපයේ ',
+        uploadTab: 'උඩුගතකිරීම',
+        urlMissing: 'රුප මුලාශ්‍ර URL නැත.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'sk', {
+        alt: 'Alternatívny text',
+        btnUpload: 'Odoslať to na server',
+        captioned: 'Opísaný obrázok',
+        captionPlaceholder: 'Popis',
+        infoTab: 'Informácie o obrázku',
+        lockRatio: 'Pomer zámky',
+        menu: 'Vlastnosti obrázka',
+        pathName: 'obrázok',
+        pathNameCaption: 'popis',
+        resetSize: 'Pôvodná veľkosť',
+        resizer: 'Kliknite a potiahnite pre zmenu veľkosti',
+        title: 'Vlastnosti obrázka',
+        uploadTab: 'Nahrať',
+        urlMissing: 'Chýba URL zdroja obrázka.',
+        altMissing: 'Chýba alternatívny text.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'sl', {
+        alt: 'Nadomestno besedilo',
+        btnUpload: 'Pošlji na strežnik',
+        captioned: 'Slika z napisom',
+        captionPlaceholder: 'Napis',
+        infoTab: 'Podatki o sliki',
+        lockRatio: 'Zakleni razmerje',
+        menu: 'Lastnosti slike',
+        pathName: 'slika',
+        pathNameCaption: 'napis',
+        resetSize: 'Ponastavi velikost',
+        resizer: 'Kliknite in povlecite, da spremenite velikost',
+        title: 'Lastnosti slike',
+        uploadTab: 'Naloži',
+        urlMissing: 'Manjka vir (URL) slike.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'sq', {
+        alt: 'Tekst Alternativ',
+        btnUpload: 'Dërgo në server',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Informacione mbi Fotografinë',
+        lockRatio: 'Mbyll Racionin',
+        menu: 'Karakteristikat e Fotografisë',
+        pathName: 'foto',
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Rikthe Madhësinë',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Karakteristikat e Fotografisë',
+        uploadTab: 'Ngarko',
+        urlMissing: 'Mungon URL e burimit të fotografisë.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'sr-latn', {
+        alt: 'Alternativni tekst',
+        btnUpload: 'Pošalji na server',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Info slike',
+        lockRatio: 'Zaključaj odnos',
+        menu: 'Osobine slika',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Resetuj veličinu',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Osobine slika',
+        uploadTab: 'Pošalji',
+        urlMissing: 'Image source URL is missing.', // MISSING
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'sr', {
+        alt: 'Алтернативни текст',
+        btnUpload: 'Пошаљи на сервер',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'Инфо слике',
+        lockRatio: 'Закључај однос',
+        menu: 'Особине слика',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'Ресетуј величину',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'Особине слика',
+        uploadTab: 'Пошаљи',
+        urlMissing: 'Недостаје УРЛ слике.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'sv', {
+        alt: 'Alternativ text',
+        btnUpload: 'Skicka till server',
+        captioned: 'Rubricerad bild',
+        captionPlaceholder: 'Bildtext',
+        infoTab: 'Bildinformation',
+        lockRatio: 'Lås höjd/bredd förhållanden',
+        menu: 'Bildegenskaper',
+        pathName: 'bild',
+        pathNameCaption: 'rubrik',
+        resetSize: 'Återställ storlek',
+        resizer: 'Klicka och drag för att ändra storlek',
+        title: 'Bildegenskaper',
+        uploadTab: 'Ladda upp',
+        urlMissing: 'Bildkällans URL saknas.',
+        altMissing: 'Alternativ text saknas'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'th', {
+        alt: 'คำประกอบรูปภาพ',
+        btnUpload: 'อัพโหลดไฟล์ไปเก็บไว้ที่เครื่องแม่ข่าย (เซิร์ฟเวอร์)',
+        captioned: 'Captioned image', // MISSING
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'ข้อมูลของรูปภาพ',
+        lockRatio: 'กำหนดอัตราส่วน กว้าง-สูง แบบคงที่',
+        menu: 'คุณสมบัติของ รูปภาพ',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'กำหนดรูปเท่าขนาดจริง',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'คุณสมบัติของ รูปภาพ',
+        uploadTab: 'อัพโหลดไฟล์',
+        urlMissing: 'Image source URL is missing.', // MISSING
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'tr', {
+        alt: 'Alternatif Yazı',
+        btnUpload: 'Sunucuya Yolla',
+        captioned: 'Başlıklı resim',
+        captionPlaceholder: 'Başlık',
+        infoTab: 'Resim Bilgisi',
+        lockRatio: 'Oranı Kilitle',
+        menu: 'Resim Özellikleri',
+        pathName: 'Resim',
+        pathNameCaption: 'başlık',
+        resetSize: 'Boyutu Başa Döndür',
+        resizer: 'Boyutlandırmak için, tıklayın ve sürükleyin',
+        title: 'Resim Özellikleri',
+        uploadTab: 'Karşıya Yükle',
+        urlMissing: 'Resmin URL kaynağı bulunamadı.',
+        altMissing: 'Alternatif yazı eksik.'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'tt', {
+        alt: 'Альтернатив текст',
+        btnUpload: 'Серверга җибәрү',
+        captioned: 'Исеме куелган рәсем',
+        captionPlaceholder: 'Исем',
+        infoTab: 'Рәсем тасвирламасы',
+        lockRatio: 'Lock Ratio', // MISSING
+        menu: 'Рәсем үзлекләре',
+        pathName: 'рәсем',
+        pathNameCaption: 'исем',
+        resetSize: 'Баштагы зурлык',
+        resizer: 'Күчереп куер өчен басып шудырыгыз',
+        title: 'Рәсем үзлекләре',
+        uploadTab: 'Йөкләү',
+        urlMissing: 'Image source URL is missing.', // MISSING
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'ug', {
+        alt: 'تېكىست ئالماشتۇر',
+        btnUpload: 'مۇلازىمېتىرغا يۈكلە',
+        captioned: 'ماۋزۇلۇق سۈرەت',
+        captionPlaceholder: 'Caption', // MISSING
+        infoTab: 'سۈرەت',
+        lockRatio: 'نىسبەتنى قۇلۇپلا',
+        menu: 'سۈرەت خاسلىقى',
+        pathName: 'image', // MISSING
+        pathNameCaption: 'caption', // MISSING
+        resetSize: 'ئەسلى چوڭلۇق',
+        resizer: 'Click and drag to resize', // MISSING
+        title: 'سۈرەت خاسلىقى',
+        uploadTab: 'يۈكلە',
+        urlMissing: 'سۈرەتنىڭ ئەسلى ھۆججەت ئادرېسى كەم',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'uk', {
+        alt: 'Альтернативний текст',
+        btnUpload: 'Надіслати на сервер',
+        captioned: 'Підписане зображення',
+        captionPlaceholder: 'Заголовок',
+        infoTab: 'Інформація про зображення',
+        lockRatio: 'Зберегти пропорції',
+        menu: 'Властивості зображення',
+        pathName: 'Зображення',
+        pathNameCaption: 'заголовок',
+        resetSize: 'Очистити поля розмірів',
+        resizer: 'Клікніть та потягніть для зміни розмірів',
+        title: 'Властивості зображення',
+        uploadTab: 'Надіслати',
+        urlMissing: 'Вкажіть URL зображення.',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'vi', {
+        alt: 'Chú thích ảnh',
+        btnUpload: 'Tải lên máy chủ',
+        captioned: 'Ảnh có chú thích',
+        captionPlaceholder: 'Nhãn',
+        infoTab: 'Thông tin của ảnh',
+        lockRatio: 'Giữ nguyên tỷ lệ',
+        menu: 'Thuộc tính của ảnh',
+        pathName: 'ảnh',
+        pathNameCaption: 'chú thích',
+        resetSize: 'Kích thước gốc',
+        resizer: 'Kéo rê để thay đổi kích cỡ',
+        title: 'Thuộc tính của ảnh',
+        uploadTab: 'Tải lên',
+        urlMissing: 'Thiếu đường dẫn hình ảnh',
+        altMissing: 'Alternative text is missing.' // MISSING
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'zh-cn', {
+        alt: '替换文本',
+        btnUpload: '上传到服务器',
+        captioned: '带标题图像',
+        captionPlaceholder: '标题',
+        infoTab: '图像信息',
+        lockRatio: '锁定比例',
+        menu: '图像属性',
+        pathName: '图像',
+        pathNameCaption: '标题',
+        resetSize: '原始尺寸',
+        resizer: '点击并拖拽以改变尺寸',
+        title: '图像属性',
+        uploadTab: '上传',
+        urlMissing: '缺少图像源文件地址',
+        altMissing: '缺少替换文本'
+} );
@@ -0,0 +1,21 @@
+/*
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+CKEDITOR.plugins.setLang( 'image2', 'zh', {
+        alt: '替代文字',
+        btnUpload: '傳送至伺服器',
+        captioned: '已加標題之圖片',
+        captionPlaceholder: '標題',
+        infoTab: '影像資訊',
+        lockRatio: '固定比例',
+        menu: '影像屬性',
+        pathName: '圖片',
+        pathNameCaption: '標題',
+        resetSize: '重設大小',
+        resizer: '拖曳以改變大小',
+        title: '影像屬性',
+        uploadTab: '上傳',
+        urlMissing: '遺失圖片來源之 URL ',
+        altMissing: '替代文字遺失。'
+} );
@@ -0,0 +1,1712 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+'use strict';
+
+( function() {
+
+        var template = '<img alt="" src="" />',
+                templateBlock = new CKEDITOR.template(
+                        '<figure class="{captionedClass}">' +
+                                template +
+                                '<figcaption>{captionPlaceholder}</figcaption>' +
+                        '</figure>' ),
+                alignmentsObj = { left: 0, center: 1, right: 2 },
+                regexPercent = /^\s*(\d+\%)\s*$/i;
+
+        CKEDITOR.plugins.add( 'image2', {
+                // jscs:disable maximumLineLength
+                lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,es-mx,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,oc,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
+                // jscs:enable maximumLineLength
+                requires: 'widget,dialog',
+                icons: 'image',
+                hidpi: true,
+
+                onLoad: function() {
+                        CKEDITOR.addCss(
+                        '.cke_image_nocaption{' +
+                                // This is to remove unwanted space so resize
+                                // wrapper is displayed property.
+                                'line-height:0' +
+                        '}' +
+                        '.cke_editable.cke_image_sw, .cke_editable.cke_image_sw *{cursor:sw-resize !important}' +
+                        '.cke_editable.cke_image_se, .cke_editable.cke_image_se *{cursor:se-resize !important}' +
+                        '.cke_image_resizer{' +
+                                'display:none;' +
+                                'position:absolute;' +
+                                'width:10px;' +
+                                'height:10px;' +
+                                'bottom:-5px;' +
+                                'right:-5px;' +
+                                'background:#000;' +
+                                'outline:1px solid #fff;' +
+                                // Prevent drag handler from being misplaced (http://dev.ckeditor.com/ticket/11207).
+                                'line-height:0;' +
+                                'cursor:se-resize;' +
+                        '}' +
+                        '.cke_image_resizer_wrapper{' +
+                                'position:relative;' +
+                                'display:inline-block;' +
+                                'line-height:0;' +
+                        '}' +
+                        // Bottom-left corner style of the resizer.
+                        '.cke_image_resizer.cke_image_resizer_left{' +
+                                'right:auto;' +
+                                'left:-5px;' +
+                                'cursor:sw-resize;' +
+                        '}' +
+                        '.cke_widget_wrapper:hover .cke_image_resizer,' +
+                        '.cke_image_resizer.cke_image_resizing{' +
+                                'display:block' +
+                        '}' +
+                        // Expand widget wrapper when linked inline image.
+                        '.cke_widget_wrapper>a{' +
+                                'display:inline-block' +
+                        '}' );
+                },
+
+                init: function( editor ) {
+                        // Adapts configuration from original image plugin. Should be removed
+                        // when we'll rename image2 to image.
+                        var config = editor.config,
+                                lang = editor.lang.image2,
+                                image = widgetDef( editor );
+
+                        // Since filebrowser plugin discovers config properties by dialog (plugin?)
+                        // names (sic!), this hack will be necessary as long as Image2 is not named
+                        // Image. And since Image2 will never be Image, for sure some filebrowser logic
+                        // got to be refined.
+                        config.filebrowserImage2BrowseUrl = config.filebrowserImageBrowseUrl;
+                        config.filebrowserImage2UploadUrl = config.filebrowserImageUploadUrl;
+
+                        // Add custom elementspath names to widget definition.
+                        image.pathName = lang.pathName;
+                        image.editables.caption.pathName = lang.pathNameCaption;
+
+                        // Register the widget.
+                        editor.widgets.add( 'image', image );
+
+                        // Add toolbar button for this plugin.
+                        editor.ui.addButton && editor.ui.addButton( 'Image', {
+                                label: editor.lang.common.image,
+                                command: 'image',
+                                toolbar: 'insert,10'
+                        } );
+
+                        // Register context menu option for editing widget.
+                        if ( editor.contextMenu ) {
+                                editor.addMenuGroup( 'image', 10 );
+
+                                editor.addMenuItem( 'image', {
+                                        label: lang.menu,
+                                        command: 'image',
+                                        group: 'image'
+                                } );
+                        }
+
+                        CKEDITOR.dialog.add( 'image2', this.path + 'dialogs/image2.js' );
+                },
+
+                afterInit: function( editor ) {
+                        // Integrate with align commands (justify plugin).
+                        var align = { left: 1, right: 1, center: 1, block: 1 },
+                                integrate = alignCommandIntegrator( editor );
+
+                        for ( var value in align )
+                                integrate( value );
+
+                        // Integrate with link commands (link plugin).
+                        linkCommandIntegrator( editor );
+                }
+        } );
+
+        // Wiget states (forms) depending on alignment and configuration.
+        //
+        // Non-captioned widget (inline styles)
+        //              ┌──────┬───────────────────────────────┬─────────────────────────────┐
+        //              │Align │Internal form                  │Data                         │
+        //              ├──────┼───────────────────────────────┼─────────────────────────────┤
+        //              │none  │<wrapper>                      │<img />                      │
+        //              │      │ <img />                       │                             │
+        //              │      │</wrapper>                     │                             │
+        //              ├──────┼───────────────────────────────┼─────────────────────────────┤
+        //              │left  │<wrapper style=”float:left”>   │<img style=”float:left” />   │
+        //              │      │ <img />                       │                             │
+        //              │      │</wrapper>                     │                             │
+        //              ├──────┼───────────────────────────────┼─────────────────────────────┤
+        //              │center│<wrapper>                      │<p style=”text-align:center”>│
+        //              │      │ <p style=”text-align:center”> │  <img />                    │
+        //              │      │   <img />                     │</p>                         │
+        //              │      │ </p>                          │                             │
+        //              │      │</wrapper>                     │                             │
+        //              ├──────┼───────────────────────────────┼─────────────────────────────┤
+        //              │right │<wrapper style=”float:right”>  │<img style=”float:right” />  │
+        //              │      │ <img />                       │                             │
+        //              │      │</wrapper>                     │                             │
+        //              └──────┴───────────────────────────────┴─────────────────────────────┘
+        //
+        // Non-captioned widget (config.image2_alignClasses defined)
+        //              ┌──────┬───────────────────────────────┬─────────────────────────────┐
+        //              │Align │Internal form                  │Data                         │
+        //              ├──────┼───────────────────────────────┼─────────────────────────────┤
+        //              │none  │<wrapper>                      │<img />                      │
+        //              │      │ <img />                       │                             │
+        //              │      │</wrapper>                     │                             │
+        //              ├──────┼───────────────────────────────┼─────────────────────────────┤
+        //              │left  │<wrapper class=”left”>         │<img class=”left” />         │
+        //              │      │ <img />                       │                             │
+        //              │      │</wrapper>                     │                             │
+        //              ├──────┼───────────────────────────────┼─────────────────────────────┤
+        //              │center│<wrapper>                      │<p class=”center”>           │
+        //              │      │ <p class=”center”>            │ <img />                     │
+        //              │      │   <img />                     │</p>                         │
+        //              │      │ </p>                          │                             │
+        //              │      │</wrapper>                     │                             │
+        //              ├──────┼───────────────────────────────┼─────────────────────────────┤
+        //              │right │<wrapper class=”right”>        │<img class=”right” />        │
+        //              │      │ <img />                       │                             │
+        //              │      │</wrapper>                     │                             │
+        //              └──────┴───────────────────────────────┴─────────────────────────────┘
+        //
+        // Captioned widget (inline styles)
+        //              ┌──────┬────────────────────────────────────────┬────────────────────────────────────────┐
+        //              │Align │Internal form                           │Data                                    │
+        //              ├──────┼────────────────────────────────────────┼────────────────────────────────────────┤
+        //              │none  │<wrapper>                               │<figure />                              │
+        //              │      │ <figure />                             │                                        │
+        //              │      │</wrapper>                              │                                        │
+        //              ├──────┼────────────────────────────────────────┼────────────────────────────────────────┤
+        //              │left  │<wrapper style=”float:left”>            │<figure style=”float:left” />           │
+        //              │      │ <figure />                             │                                        │
+        //              │      │</wrapper>                              │                                        │
+        //              ├──────┼────────────────────────────────────────┼────────────────────────────────────────┤
+        //              │center│<wrapper style=”text-align:center”>     │<div style=”text-align:center”>         │
+        //              │      │ <figure style=”display:inline-block” />│ <figure style=”display:inline-block” />│
+        //              │      │</wrapper>                              │</p>                                    │
+        //              ├──────┼────────────────────────────────────────┼────────────────────────────────────────┤
+        //              │right │<wrapper style=”float:right”>           │<figure style=”float:right” />          │
+        //              │      │ <figure />                             │                                        │
+        //              │      │</wrapper>                              │                                        │
+        //              └──────┴────────────────────────────────────────┴────────────────────────────────────────┘
+        //
+        // Captioned widget (config.image2_alignClasses defined)
+        //              ┌──────┬────────────────────────────────────────┬────────────────────────────────────────┐
+        //              │Align │Internal form                           │Data                                    │
+        //              ├──────┼────────────────────────────────────────┼────────────────────────────────────────┤
+        //              │none  │<wrapper>                               │<figure />                              │
+        //              │      │ <figure />                             │                                        │
+        //              │      │</wrapper>                              │                                        │
+        //              ├──────┼────────────────────────────────────────┼────────────────────────────────────────┤
+        //              │left  │<wrapper class=”left”>                  │<figure class=”left” />                 │
+        //              │      │ <figure />                             │                                        │
+        //              │      │</wrapper>                              │                                        │
+        //              ├──────┼────────────────────────────────────────┼────────────────────────────────────────┤
+        //              │center│<wrapper class=”center”>                │<div class=”center”>                    │
+        //              │      │ <figure />                             │ <figure />                             │
+        //              │      │</wrapper>                              │</p>                                    │
+        //              ├──────┼────────────────────────────────────────┼────────────────────────────────────────┤
+        //              │right │<wrapper class=”right”>                 │<figure class=”right” />                │
+        //              │      │ <figure />                             │                                        │
+        //              │      │</wrapper>                              │                                        │
+        //              └──────┴────────────────────────────────────────┴────────────────────────────────────────┘
+        //
+        // @param {CKEDITOR.editor}
+        // @returns {Object}
+        function widgetDef( editor ) {
+                var alignClasses = editor.config.image2_alignClasses,
+                        captionedClass = editor.config.image2_captionedClass;
+
+                function deflate() {
+                        if ( this.deflated )
+                                return;
+
+                        // Remember whether widget was focused before destroyed.
+                        if ( editor.widgets.focused == this.widget )
+                                this.focused = true;
+
+                        editor.widgets.destroy( this.widget );
+
+                        // Mark widget was destroyed.
+                        this.deflated = true;
+                }
+
+                function inflate() {
+                        var editable = editor.editable(),
+                        doc = editor.document;
+
+                        // Create a new widget. This widget will be either captioned
+                        // non-captioned, block or inline according to what is the
+                        // new state of the widget.
+                        if ( this.deflated ) {
+                                this.widget = editor.widgets.initOn( this.element, 'image', this.widget.data );
+
+                                // Once widget was re-created, it may become an inline element without
+                                // block wrapper (i.e. when unaligned, end not captioned). Let's do some
+                                // sort of autoparagraphing here (http://dev.ckeditor.com/ticket/10853).
+                                if ( this.widget.inline && !( new CKEDITOR.dom.elementPath( this.widget.wrapper, editable ).block ) ) {
+                                        var block = doc.createElement( editor.activeEnterMode == CKEDITOR.ENTER_P ? 'p' : 'div' );
+                                        block.replace( this.widget.wrapper );
+                                        this.widget.wrapper.move( block );
+                                }
+
+                                // The focus must be transferred from the old one (destroyed)
+                                // to the new one (just created).
+                                if ( this.focused ) {
+                                        this.widget.focus();
+                                        delete this.focused;
+                                }
+
+                                delete this.deflated;
+                        }
+
+                        // If now widget was destroyed just update wrapper's alignment.
+                        // According to the new state.
+                        else {
+                                setWrapperAlign( this.widget, alignClasses );
+                        }
+                }
+
+                return {
+                        allowedContent: getWidgetAllowedContent( editor ),
+
+                        requiredContent: 'img[src,alt]',
+
+                        features: getWidgetFeatures( editor ),
+
+                        styleableElements: 'img figure',
+
+                        // This widget converts style-driven dimensions to attributes.
+                        contentTransformations: [
+                                [ 'img[width]: sizeToAttribute' ]
+                        ],
+
+                        // This widget has an editable caption.
+                        editables: {
+                                caption: {
+                                        selector: 'figcaption',
+                                        allowedContent: 'br em strong sub sup u s; a[!href,target]'
+                                }
+                        },
+
+                        parts: {
+                                image: 'img',
+                                caption: 'figcaption'
+                                // parts#link defined in widget#init
+                        },
+
+                        // The name of this widget's dialog.
+                        dialog: 'image2',
+
+                        // Template of the widget: plain image.
+                        template: template,
+
+                        data: function() {
+                                var features = this.features;
+
+                                // Image can't be captioned when figcaption is disallowed (http://dev.ckeditor.com/ticket/11004).
+                                if ( this.data.hasCaption && !editor.filter.checkFeature( features.caption ) )
+                                        this.data.hasCaption = false;
+
+                                // Image can't be aligned when floating is disallowed (http://dev.ckeditor.com/ticket/11004).
+                                if ( this.data.align != 'none' && !editor.filter.checkFeature( features.align ) )
+                                        this.data.align = 'none';
+
+                                // Convert the internal form of the widget from the old state to the new one.
+                                this.shiftState( {
+                                        widget: this,
+                                        element: this.element,
+                                        oldData: this.oldData,
+                                        newData: this.data,
+                                        deflate: deflate,
+                                        inflate: inflate
+                                } );
+
+                                // Update widget.parts.link since it will not auto-update unless widget
+                                // is destroyed and re-inited.
+                                if ( !this.data.link ) {
+                                        if ( this.parts.link )
+                                                delete this.parts.link;
+                                } else {
+                                        if ( !this.parts.link )
+                                                this.parts.link = this.parts.image.getParent();
+                                }
+
+                                this.parts.image.setAttributes( {
+                                        src: this.data.src,
+
+                                        // This internal is required by the editor.
+                                        'data-cke-saved-src': this.data.src,
+
+                                        alt: this.data.alt
+                                } );
+
+                                // If shifting non-captioned -> captioned, remove classes
+                                // related to styles from <img/>.
+                                if ( this.oldData && !this.oldData.hasCaption && this.data.hasCaption ) {
+                                        for ( var c in this.data.classes )
+                                                this.parts.image.removeClass( c );
+                                }
+
+                                // Set dimensions of the image according to gathered data.
+                                // Do it only when the attributes are allowed (http://dev.ckeditor.com/ticket/11004).
+                                if ( editor.filter.checkFeature( features.dimension ) )
+                                        setDimensions( this );
+
+                                // Cache current data.
+                                this.oldData = CKEDITOR.tools.extend( {}, this.data );
+                        },
+
+                        init: function() {
+                                var helpers = CKEDITOR.plugins.image2,
+                                        image = this.parts.image,
+                                        data = {
+                                                hasCaption: !!this.parts.caption,
+                                                src: image.getAttribute( 'src' ),
+                                                alt: image.getAttribute( 'alt' ) || '',
+                                                width: image.getAttribute( 'width' ) || '',
+                                                height: image.getAttribute( 'height' ) || '',
+
+                                                // Lock ratio is on by default (http://dev.ckeditor.com/ticket/10833).
+                                                lock: this.ready ? helpers.checkHasNaturalRatio( image ) : true
+                                        };
+
+                                // If we used 'a' in widget#parts definition, it could happen that
+                                // selected element is a child of widget.parts#caption. Since there's no clever
+                                // way to solve it with CSS selectors, it's done like that. (http://dev.ckeditor.com/ticket/11783).
+                                var link = image.getAscendant( 'a' );
+
+                                if ( link && this.wrapper.contains( link ) )
+                                        this.parts.link = link;
+
+                                // Depending on configuration, read style/class from element and
+                                // then remove it. Removed style/class will be set on wrapper in #data listener.
+                                // Note: Center alignment is detected during upcast, so only left/right cases
+                                // are checked below.
+                                if ( !data.align ) {
+                                        var alignElement = data.hasCaption ? this.element : image;
+
+                                        // Read the initial left/right alignment from the class set on element.
+                                        if ( alignClasses ) {
+                                                if ( alignElement.hasClass( alignClasses[ 0 ] ) ) {
+                                                        data.align = 'left';
+                                                } else if ( alignElement.hasClass( alignClasses[ 2 ] ) ) {
+                                                        data.align = 'right';
+                                                }
+
+                                                if ( data.align ) {
+                                                        alignElement.removeClass( alignClasses[ alignmentsObj[ data.align ] ] );
+                                                } else {
+                                                        data.align = 'none';
+                                                }
+                                        }
+                                        // Read initial float style from figure/image and then remove it.
+                                        else {
+                                                data.align = alignElement.getStyle( 'float' ) || 'none';
+                                                alignElement.removeStyle( 'float' );
+                                        }
+                                }
+
+                                // Update data.link object with attributes if the link has been discovered.
+                                if ( editor.plugins.link && this.parts.link ) {
+                                        data.link = helpers.getLinkAttributesParser()( editor, this.parts.link );
+
+                                        // Get rid of cke_widget_* classes in data. Otherwise
+                                        // they might appear in link dialog.
+                                        var advanced = data.link.advanced;
+                                        if ( advanced && advanced.advCSSClasses ) {
+                                                advanced.advCSSClasses = CKEDITOR.tools.trim( advanced.advCSSClasses.replace( /cke_\S+/, '' ) );
+                                        }
+                                }
+
+                                // Get rid of extra vertical space when there's no caption.
+                                // It will improve the look of the resizer.
+                                this.wrapper[ ( data.hasCaption ? 'remove' : 'add' ) + 'Class' ]( 'cke_image_nocaption' );
+
+                                this.setData( data );
+
+                                // Setup dynamic image resizing with mouse.
+                                // Don't initialize resizer when dimensions are disallowed (http://dev.ckeditor.com/ticket/11004).
+                                if ( editor.filter.checkFeature( this.features.dimension ) && editor.config.image2_disableResizer !== true )
+                                        setupResizer( this );
+
+                                this.shiftState = helpers.stateShifter( this.editor );
+
+                                // Add widget editing option to its context menu.
+                                this.on( 'contextMenu', function( evt ) {
+                                        evt.data.image = CKEDITOR.TRISTATE_OFF;
+
+                                        // Integrate context menu items for link.
+                                        // Note that widget may be wrapped in a link, which
+                                        // does not belong to that widget (http://dev.ckeditor.com/ticket/11814).
+                                        if ( this.parts.link || this.wrapper.getAscendant( 'a' ) )
+                                                evt.data.link = evt.data.unlink = CKEDITOR.TRISTATE_OFF;
+                                } );
+
+                                // Pass the reference to this widget to the dialog.
+                                this.on( 'dialog', function( evt ) {
+                                        evt.data.widget = this;
+                                }, this );
+                        },
+
+                        // Overrides default method to handle internal mutability of Image2.
+                        // @see CKEDITOR.plugins.widget#addClass
+                        addClass: function( className ) {
+                                getStyleableElement( this ).addClass( className );
+                        },
+
+                        // Overrides default method to handle internal mutability of Image2.
+                        // @see CKEDITOR.plugins.widget#hasClass
+                        hasClass: function( className ) {
+                                return getStyleableElement( this ).hasClass( className );
+                        },
+
+                        // Overrides default method to handle internal mutability of Image2.
+                        // @see CKEDITOR.plugins.widget#removeClass
+                        removeClass: function( className ) {
+                                getStyleableElement( this ).removeClass( className );
+                        },
+
+                        // Overrides default method to handle internal mutability of Image2.
+                        // @see CKEDITOR.plugins.widget#getClasses
+                        getClasses: ( function() {
+                                var classRegex = new RegExp( '^(' + [].concat( captionedClass, alignClasses ).join( '|' ) + ')$' );
+
+                                return function() {
+                                        var classes = this.repository.parseElementClasses( getStyleableElement( this ).getAttribute( 'class' ) );
+
+                                        // Neither config.image2_captionedClass nor config.image2_alignClasses
+                                        // do not belong to style classes.
+                                        for ( var c in classes ) {
+                                                if ( classRegex.test( c ) )
+                                                        delete classes[ c ];
+                                        }
+
+                                        return classes;
+                                };
+                        } )(),
+
+                        upcast: upcastWidgetElement( editor ),
+                        downcast: downcastWidgetElement( editor ),
+
+                        getLabel: function() {
+                                var label = ( this.data.alt || '' ) + ' ' + this.pathName;
+
+                                return this.editor.lang.widget.label.replace( /%1/, label );
+                        }
+                };
+        }
+
+        /**
+         * A set of Enhanced Image (image2) plugin helpers.
+         *
+         * @class
+         * @singleton
+         */
+        CKEDITOR.plugins.image2 = {
+                stateShifter: function( editor ) {
+                        // Tag name used for centering non-captioned widgets.
+                        var doc = editor.document,
+                                alignClasses = editor.config.image2_alignClasses,
+                                captionedClass = editor.config.image2_captionedClass,
+                                editable = editor.editable(),
+
+                                // The order that stateActions get executed. It matters!
+                                shiftables = [ 'hasCaption', 'align', 'link' ];
+
+                        // Atomic procedures, one per state variable.
+                        var stateActions = {
+                                align: function( shift, oldValue, newValue ) {
+                                        var el = shift.element;
+
+                                        // Alignment changed.
+                                        if ( shift.changed.align ) {
+                                                // No caption in the new state.
+                                                if ( !shift.newData.hasCaption ) {
+                                                        // Changed to "center" (non-captioned).
+                                                        if ( newValue == 'center' ) {
+                                                                shift.deflate();
+                                                                shift.element = wrapInCentering( editor, el );
+                                                        }
+
+                                                        // Changed to "non-center" from "center" while caption removed.
+                                                        if ( !shift.changed.hasCaption && oldValue == 'center' && newValue != 'center' ) {
+                                                                shift.deflate();
+                                                                shift.element = unwrapFromCentering( el );
+                                                        }
+                                                }
+                                        }
+
+                                        // Alignment remains and "center" removed caption.
+                                        else if ( newValue == 'center' && shift.changed.hasCaption && !shift.newData.hasCaption ) {
+                                                shift.deflate();
+                                                shift.element = wrapInCentering( editor, el );
+                                        }
+
+                                        // Finally set display for figure.
+                                        if ( !alignClasses && el.is( 'figure' ) ) {
+                                                if ( newValue == 'center' )
+                                                        el.setStyle( 'display', 'inline-block' );
+                                                else
+                                                        el.removeStyle( 'display' );
+                                        }
+                                },
+
+                                hasCaption:     function( shift, oldValue, newValue ) {
+                                        // This action is for real state change only.
+                                        if ( !shift.changed.hasCaption )
+                                                return;
+
+                                        // Get <img/> or <a><img/></a> from widget. Note that widget element might itself
+                                        // be what we're looking for. Also element can be <p style="text-align:center"><a>...</a></p>.
+                                        var imageOrLink;
+                                        if ( shift.element.is( { img: 1, a: 1 } ) )
+                                                imageOrLink = shift.element;
+                                        else
+                                                imageOrLink =  shift.element.findOne( 'a,img' );
+
+                                        // Switching hasCaption always destroys the widget.
+                                        shift.deflate();
+
+                                        // There was no caption, but the caption is to be added.
+                                        if ( newValue ) {
+                                                // Create new <figure> from widget template.
+                                                var figure = CKEDITOR.dom.element.createFromHtml( templateBlock.output( {
+                                                        captionedClass: captionedClass,
+                                                        captionPlaceholder: editor.lang.image2.captionPlaceholder
+                                                } ), doc );
+
+                                                // Replace element with <figure>.
+                                                replaceSafely( figure, shift.element );
+
+                                                // Use old <img/> or <a><img/></a> instead of the one from the template,
+                                                // so we won't lose additional attributes.
+                                                imageOrLink.replace( figure.findOne( 'img' ) );
+
+                                                // Update widget's element.
+                                                shift.element = figure;
+                                        }
+
+                                        // The caption was present, but now it's to be removed.
+                                        else {
+                                                // Unwrap <img/> or <a><img/></a> from figure.
+                                                imageOrLink.replace( shift.element );
+
+                                                // Update widget's element.
+                                                shift.element = imageOrLink;
+                                        }
+                                },
+
+                                link: function( shift, oldValue, newValue ) {
+                                        if ( shift.changed.link ) {
+                                                var img = shift.element.is( 'img' ) ?
+                                                                shift.element : shift.element.findOne( 'img' ),
+                                                        link = shift.element.is( 'a' ) ?
+                                                                shift.element : shift.element.findOne( 'a' ),
+                                                        // Why deflate:
+                                                        // If element is <img/>, it will be wrapped into <a>,
+                                                        // which becomes a new widget.element.
+                                                        // If element is <a><img/></a>, it will be unlinked
+                                                        // so <img/> becomes a new widget.element.
+                                                        needsDeflate = ( shift.element.is( 'a' ) && !newValue ) || ( shift.element.is( 'img' ) && newValue ),
+                                                        newEl;
+
+                                                if ( needsDeflate )
+                                                        shift.deflate();
+
+                                                // If unlinked the image, returned element is <img>.
+                                                if ( !newValue )
+                                                        newEl = unwrapFromLink( link );
+                                                else {
+                                                        // If linked the image, returned element is <a>.
+                                                        if ( !oldValue )
+                                                                newEl = wrapInLink( img, shift.newData.link );
+
+                                                        // Set and remove all attributes associated with this state.
+                                                        var attributes = CKEDITOR.plugins.image2.getLinkAttributesGetter()( editor, newValue );
+
+                                                        if ( !CKEDITOR.tools.isEmpty( attributes.set ) )
+                                                                ( newEl || link ).setAttributes( attributes.set );
+
+                                                        if ( attributes.removed.length )
+                                                                ( newEl || link ).removeAttributes( attributes.removed );
+                                                }
+
+                                                if ( needsDeflate )
+                                                        shift.element = newEl;
+                                        }
+                                }
+                        };
+
+                        function wrapInCentering( editor, element ) {
+                                var attribsAndStyles = {};
+
+                                if ( alignClasses )
+                                        attribsAndStyles.attributes = { 'class': alignClasses[ 1 ] };
+                                else
+                                        attribsAndStyles.styles = { 'text-align': 'center' };
+
+                                // There's no gentle way to center inline element with CSS, so create p/div
+                                // that wraps widget contents and does the trick either with style or class.
+                                var center = doc.createElement(
+                                        editor.activeEnterMode == CKEDITOR.ENTER_P ? 'p' : 'div', attribsAndStyles );
+
+                                // Replace element with centering wrapper.
+                                replaceSafely( center, element );
+                                element.move( center );
+
+                                return center;
+                        }
+
+                        function unwrapFromCentering( element ) {
+                                var imageOrLink = element.findOne( 'a,img' );
+
+                                imageOrLink.replace( element );
+
+                                return imageOrLink;
+                        }
+
+                        // Wraps <img/> -> <a><img/></a>.
+                        // Returns reference to <a>.
+                        //
+                        // @param {CKEDITOR.dom.element} img
+                        // @param {Object} linkData
+                        // @returns {CKEDITOR.dom.element}
+                        function wrapInLink( img, linkData ) {
+                                var link = doc.createElement( 'a', {
+                                        attributes: {
+                                                href: linkData.url
+                                        }
+                                } );
+
+                                link.replace( img );
+                                img.move( link );
+
+                                return link;
+                        }
+
+                        // De-wraps <a><img/></a> -> <img/>.
+                        // Returns the reference to <img/>
+                        //
+                        // @param {CKEDITOR.dom.element} link
+                        // @returns {CKEDITOR.dom.element}
+                        function unwrapFromLink( link ) {
+                                var img = link.findOne( 'img' );
+
+                                img.replace( link );
+
+                                return img;
+                        }
+
+                        function replaceSafely( replacing, replaced ) {
+                                if ( replaced.getParent() ) {
+                                        var range = editor.createRange();
+
+                                        range.moveToPosition( replaced, CKEDITOR.POSITION_BEFORE_START );
+
+                                        // Remove old element. Do it before insertion to avoid a case when
+                                        // element is moved from 'replaced' element before it, what creates
+                                        // a tricky case which insertElementIntorRange does not handle.
+                                        replaced.remove();
+
+                                        editable.insertElementIntoRange( replacing, range );
+                                }
+                                else {
+                                        replacing.replace( replaced );
+                                }
+                        }
+
+                        return function( shift ) {
+                                var name, i;
+
+                                shift.changed = {};
+
+                                for ( i = 0; i < shiftables.length; i++ ) {
+                                        name = shiftables[ i ];
+
+                                        shift.changed[ name ] = shift.oldData ?
+                                                shift.oldData[ name ] !== shift.newData[ name ] : false;
+                                }
+
+                                // Iterate over possible state variables.
+                                for ( i = 0; i < shiftables.length; i++ ) {
+                                        name = shiftables[ i ];
+
+                                        stateActions[ name ]( shift,
+                                                shift.oldData ? shift.oldData[ name ] : null,
+                                                shift.newData[ name ] );
+                                }
+
+                                shift.inflate();
+                        };
+                },
+
+                /**
+                 * Checks whether the current image ratio matches the natural one
+                 * by comparing dimensions.
+                 *
+                 * @param {CKEDITOR.dom.element} image
+                 * @returns {Boolean}
+                 */
+                checkHasNaturalRatio: function( image ) {
+                        var $ = image.$,
+                                natural = this.getNatural( image );
+
+                        // The reason for two alternative comparisons is that the rounding can come from
+                        // both dimensions, e.g. there are two cases:
+                        //      1. height is computed as a rounded relation of the real height and the value of width,
+                        //      2. width is computed as a rounded relation of the real width and the value of heigh.
+                        return Math.round( $.clientWidth / natural.width * natural.height ) == $.clientHeight ||
+                                Math.round( $.clientHeight / natural.height * natural.width ) == $.clientWidth;
+                },
+
+                /**
+                 * Returns natural dimensions of the image. For modern browsers
+                 * it uses natural(Width|Height). For old ones (IE8) it creates
+                 * a new image and reads the dimensions.
+                 *
+                 * @param {CKEDITOR.dom.element} image
+                 * @returns {Object}
+                 */
+                getNatural: function( image ) {
+                        var dimensions;
+
+                        if ( image.$.naturalWidth ) {
+                                dimensions = {
+                                        width: image.$.naturalWidth,
+                                        height: image.$.naturalHeight
+                                };
+                        } else {
+                                var img = new Image();
+                                img.src = image.getAttribute( 'src' );
+
+                                dimensions = {
+                                        width: img.width,
+                                        height: img.height
+                                };
+                        }
+
+                        return dimensions;
+                },
+
+                /**
+                 * Returns an attribute getter function. Default getter comes from the Link plugin
+                 * and is documented by {@link CKEDITOR.plugins.link#getLinkAttributes}.
+                 *
+                 * **Note:** It is possible to override this method and use a custom getter e.g.
+                 * in the absence of the Link plugin.
+                 *
+                 * **Note:** If a custom getter is used, a data model format it produces
+                 * must be compatible with {@link CKEDITOR.plugins.link#getLinkAttributes}.
+                 *
+                 * **Note:** A custom getter must understand the data model format produced by
+                 * {@link #getLinkAttributesParser} to work correctly.
+                 *
+                 * @returns {Function} A function that gets (composes) link attributes.
+                 * @since 4.5.5
+                 */
+                getLinkAttributesGetter: function() {
+                        // http://dev.ckeditor.com/ticket/13885
+                        return CKEDITOR.plugins.link.getLinkAttributes;
+                },
+
+                /**
+                 * Returns an attribute parser function. Default parser comes from the Link plugin
+                 * and is documented by {@link CKEDITOR.plugins.link#parseLinkAttributes}.
+                 *
+                 * **Note:** It is possible to override this method and use a custom parser e.g.
+                 * in the absence of the Link plugin.
+                 *
+                 * **Note:** If a custom parser is used, a data model format produced by the parser
+                 * must be compatible with {@link #getLinkAttributesGetter}.
+                 *
+                 * **Note:** If a custom parser is used, it should be compatible with the
+                 * {@link CKEDITOR.plugins.link#parseLinkAttributes} data model format. Otherwise the
+                 * Link plugin dialog may not be populated correctly with parsed data. However
+                 * as long as Enhanced Image is **not** used with the Link plugin dialog, any custom data model
+                 * will work, being stored as an internal property of Enhanced Image widget's data only.
+                 *
+                 * @returns {Function} A function that parses attributes.
+                 * @since 4.5.5
+                 */
+                getLinkAttributesParser: function() {
+                        // http://dev.ckeditor.com/ticket/13885
+                        return CKEDITOR.plugins.link.parseLinkAttributes;
+                }
+        };
+
+        function setWrapperAlign( widget, alignClasses ) {
+                var wrapper = widget.wrapper,
+                        align = widget.data.align,
+                        hasCaption = widget.data.hasCaption;
+
+                if ( alignClasses ) {
+                        // Remove all align classes first.
+                        for ( var i = 3; i--; )
+                                wrapper.removeClass( alignClasses[ i ] );
+
+                        if ( align == 'center' ) {
+                                // Avoid touching non-captioned, centered widgets because
+                                // they have the class set on the element instead of wrapper:
+                                //
+                                //      <div class="cke_widget_wrapper">
+                                //              <p class="center-class">
+                                //                      <img />
+                                //              </p>
+                                //      </div>
+                                if ( hasCaption ) {
+                                        wrapper.addClass( alignClasses[ 1 ] );
+                                }
+                        } else if ( align != 'none' ) {
+                                wrapper.addClass( alignClasses[ alignmentsObj[ align ] ] );
+                        }
+                } else {
+                        if ( align == 'center' ) {
+                                if ( hasCaption )
+                                        wrapper.setStyle( 'text-align', 'center' );
+                                else
+                                        wrapper.removeStyle( 'text-align' );
+
+                                wrapper.removeStyle( 'float' );
+                        }
+                        else {
+                                if ( align == 'none' )
+                                        wrapper.removeStyle( 'float' );
+                                else
+                                        wrapper.setStyle( 'float', align );
+
+                                wrapper.removeStyle( 'text-align' );
+                        }
+                }
+        }
+
+        // Returns a function that creates widgets from all <img> and
+        // <figure class="{config.image2_captionedClass}"> elements.
+        //
+        // @param {CKEDITOR.editor} editor
+        // @returns {Function}
+        function upcastWidgetElement( editor ) {
+                var isCenterWrapper = centerWrapperChecker( editor ),
+                        captionedClass = editor.config.image2_captionedClass;
+
+                // @param {CKEDITOR.htmlParser.element} el
+                // @param {Object} data
+                return function( el, data ) {
+                        var dimensions = { width: 1, height: 1 },
+                                name = el.name,
+                                image;
+
+                        // http://dev.ckeditor.com/ticket/11110 Don't initialize on pasted fake objects.
+                        if ( el.attributes[ 'data-cke-realelement' ] )
+                                return;
+
+                        // If a center wrapper is found, there are 3 possible cases:
+                        //
+                        // 1. <div style="text-align:center"><figure>...</figure></div>.
+                        //    In this case centering is done with a class set on widget.wrapper.
+                        //    Simply replace centering wrapper with figure (it's no longer necessary).
+                        //
+                        // 2. <p style="text-align:center"><img/></p>.
+                        //    Nothing to do here: <p> remains for styling purposes.
+                        //
+                        // 3. <div style="text-align:center"><img/></div>.
+                        //    Nothing to do here (2.) but that case is only possible in enterMode different
+                        //    than ENTER_P.
+                        if ( isCenterWrapper( el ) ) {
+                                if ( name == 'div' ) {
+                                        var figure = el.getFirst( 'figure' );
+
+                                        // Case #1.
+                                        if ( figure ) {
+                                                el.replaceWith( figure );
+                                                el = figure;
+                                        }
+                                }
+                                // Cases #2 and #3 (handled transparently)
+
+                                // If there's a centering wrapper, save it in data.
+                                data.align = 'center';
+
+                                // Image can be wrapped in link <a><img/></a>.
+                                image = el.getFirst( 'img' ) || el.getFirst( 'a' ).getFirst( 'img' );
+                        }
+
+                        // No center wrapper has been found.
+                        else if ( name == 'figure' && el.hasClass( captionedClass ) ) {
+                                image = el.getFirst( 'img' ) || el.getFirst( 'a' ).getFirst( 'img' );
+
+                                // Upcast linked image like <a><img/></a>.
+                        } else if ( isLinkedOrStandaloneImage( el ) ) {
+                                image = el.name == 'a' ? el.children[ 0 ] : el;
+                        }
+
+                        if ( !image )
+                                return;
+
+                        // If there's an image, then cool, we got a widget.
+                        // Now just remove dimension attributes expressed with %.
+                        for ( var d in dimensions ) {
+                                var dimension = image.attributes[ d ];
+
+                                if ( dimension && dimension.match( regexPercent ) )
+                                        delete image.attributes[ d ];
+                        }
+
+                        return el;
+                };
+        }
+
+        // Returns a function which transforms the widget to the external format
+        // according to the current configuration.
+        //
+        // @param {CKEDITOR.editor}
+        function downcastWidgetElement( editor ) {
+                var alignClasses = editor.config.image2_alignClasses;
+
+                // @param {CKEDITOR.htmlParser.element} el
+                return function( el ) {
+                        // In case of <a><img/></a>, <img/> is the element to hold
+                        // inline styles or classes (image2_alignClasses).
+                        var attrsHolder = el.name == 'a' ? el.getFirst() : el,
+                                attrs = attrsHolder.attributes,
+                                align = this.data.align;
+
+                        // De-wrap the image from resize handle wrapper.
+                        // Only block widgets have one.
+                        if ( !this.inline ) {
+                                var resizeWrapper = el.getFirst( 'span' );
+
+                                if ( resizeWrapper )
+                                        resizeWrapper.replaceWith( resizeWrapper.getFirst( { img: 1, a: 1 } ) );
+                        }
+
+                        if ( align && align != 'none' ) {
+                                var styles = CKEDITOR.tools.parseCssText( attrs.style || '' );
+
+                                // When the widget is captioned (<figure>) and internally centering is done
+                                // with widget's wrapper style/class, in the external data representation,
+                                // <figure> must be wrapped with an element holding an style/class:
+                                //
+                                //      <div style="text-align:center">
+                                //              <figure class="image" style="display:inline-block">...</figure>
+                                //      </div>
+                                // or
+                                //      <div class="some-center-class">
+                                //              <figure class="image">...</figure>
+                                //      </div>
+                                //
+                                if ( align == 'center' && el.name == 'figure' ) {
+                                        el = el.wrapWith( new CKEDITOR.htmlParser.element( 'div',
+                                                alignClasses ? { 'class': alignClasses[ 1 ] } : { style: 'text-align:center' } ) );
+                                }
+
+                                // If left/right, add float style to the downcasted element.
+                                else if ( align in { left: 1, right: 1 } ) {
+                                        if ( alignClasses )
+                                                attrsHolder.addClass( alignClasses[ alignmentsObj[ align ] ] );
+                                        else
+                                                styles[ 'float' ] = align;
+                                }
+
+                                // Update element styles.
+                                if ( !alignClasses && !CKEDITOR.tools.isEmpty( styles ) )
+                                        attrs.style = CKEDITOR.tools.writeCssText( styles );
+                        }
+
+                        return el;
+                };
+        }
+
+        // Returns a function that checks if an element is a centering wrapper.
+        //
+        // @param {CKEDITOR.editor} editor
+        // @returns {Function}
+        function centerWrapperChecker( editor ) {
+                var captionedClass = editor.config.image2_captionedClass,
+                        alignClasses = editor.config.image2_alignClasses,
+                        validChildren = { figure: 1, a: 1, img: 1 };
+
+                return function( el ) {
+                        // Wrapper must be either <div> or <p>.
+                        if ( !( el.name in { div: 1, p: 1 } ) )
+                                return false;
+
+                        var children = el.children;
+
+                        // Centering wrapper can have only one child.
+                        if ( children.length !== 1 )
+                                return false;
+
+                        var child = children[ 0 ];
+
+                        // Only <figure> or <img /> can be first (only) child of centering wrapper,
+                        // regardless of its type.
+                        if ( !( child.name in validChildren ) )
+                                return false;
+
+                        // If centering wrapper is <p>, only <img /> can be the child.
+                        //   <p style="text-align:center"><img /></p>
+                        if ( el.name == 'p' ) {
+                                if ( !isLinkedOrStandaloneImage( child ) )
+                                        return false;
+                        }
+                        // Centering <div> can hold <img/> or <figure>, depending on enterMode.
+                        else {
+                                // If a <figure> is the first (only) child, it must have a class.
+                                //   <div style="text-align:center"><figure>...</figure><div>
+                                if ( child.name == 'figure' ) {
+                                        if ( !child.hasClass( captionedClass ) )
+                                                return false;
+                                } else {
+                                        // Centering <div> can hold <img/> or <a><img/></a> only when enterMode
+                                        // is ENTER_(BR|DIV).
+                                        //   <div style="text-align:center"><img /></div>
+                                        //   <div style="text-align:center"><a><img /></a></div>
+                                        if ( editor.enterMode == CKEDITOR.ENTER_P )
+                                                return false;
+
+                                        // Regardless of enterMode, a child which is not <figure> must be
+                                        // either <img/> or <a><img/></a>.
+                                        if ( !isLinkedOrStandaloneImage( child ) )
+                                                return false;
+                                }
+                        }
+
+                        // Centering wrapper got to be... centering. If image2_alignClasses are defined,
+                        // check for centering class. Otherwise, check the style.
+                        if ( alignClasses ? el.hasClass( alignClasses[ 1 ] ) :
+                                        CKEDITOR.tools.parseCssText( el.attributes.style || '', true )[ 'text-align' ] == 'center' )
+                                return true;
+
+                        return false;
+                };
+        }
+
+        // Checks whether element is <img/> or <a><img/></a>.
+        //
+        // @param {CKEDITOR.htmlParser.element}
+        function isLinkedOrStandaloneImage( el ) {
+                if ( el.name == 'img' )
+                        return true;
+                else if ( el.name == 'a' )
+                        return el.children.length == 1 && el.getFirst( 'img' );
+
+                return false;
+        }
+
+        // Sets width and height of the widget image according to current widget data.
+        //
+        // @param {CKEDITOR.plugins.widget} widget
+        function setDimensions( widget ) {
+                var data = widget.data,
+                        dimensions = { width: data.width, height: data.height },
+                        image = widget.parts.image;
+
+                for ( var d in dimensions ) {
+                        if ( dimensions[ d ] )
+                                image.setAttribute( d, dimensions[ d ] );
+                        else
+                                image.removeAttribute( d );
+                }
+        }
+
+        // Defines all features related to drag-driven image resizing.
+        //
+        // @param {CKEDITOR.plugins.widget} widget
+        function setupResizer( widget ) {
+                var editor = widget.editor,
+                        editable = editor.editable(),
+                        doc = editor.document,
+
+                        // Store the resizer in a widget for testing (http://dev.ckeditor.com/ticket/11004).
+                        resizer = widget.resizer = doc.createElement( 'span' );
+
+                resizer.addClass( 'cke_image_resizer' );
+                resizer.setAttribute( 'title', editor.lang.image2.resizer );
+                resizer.append( new CKEDITOR.dom.text( '\u200b', doc ) );
+
+                // Inline widgets don't need a resizer wrapper as an image spans the entire widget.
+                if ( !widget.inline ) {
+                        var imageOrLink = widget.parts.link || widget.parts.image,
+                                oldResizeWrapper = imageOrLink.getParent(),
+                                resizeWrapper = doc.createElement( 'span' );
+
+                        resizeWrapper.addClass( 'cke_image_resizer_wrapper' );
+                        resizeWrapper.append( imageOrLink );
+                        resizeWrapper.append( resizer );
+                        widget.element.append( resizeWrapper, true );
+
+                        // Remove the old wrapper which could came from e.g. pasted HTML
+                        // and which could be corrupted (e.g. resizer span has been lost).
+                        if ( oldResizeWrapper.is( 'span' ) )
+                                oldResizeWrapper.remove();
+                } else {
+                        widget.wrapper.append( resizer );
+                }
+
+                // Calculate values of size variables and mouse offsets.
+                resizer.on( 'mousedown', function( evt ) {
+                        var image = widget.parts.image,
+
+                                // "factor" can be either 1 or -1. I.e.: For right-aligned images, we need to
+                                // subtract the difference to get proper width, etc. Without "factor",
+                                // resizer starts working the opposite way.
+                                factor = widget.data.align == 'right' ? -1 : 1,
+
+                                // The x-coordinate of the mouse relative to the screen
+                                // when button gets pressed.
+                                startX = evt.data.$.screenX,
+                                startY = evt.data.$.screenY,
+
+                                // The initial dimensions and aspect ratio of the image.
+                                startWidth = image.$.clientWidth,
+                                startHeight = image.$.clientHeight,
+                                ratio = startWidth / startHeight,
+
+                                listeners = [],
+
+                                // A class applied to editable during resizing.
+                                cursorClass = 'cke_image_s' + ( !~factor ? 'w' : 'e' ),
+
+                                nativeEvt, newWidth, newHeight, updateData,
+                                moveDiffX, moveDiffY, moveRatio;
+
+                        // Save the undo snapshot first: before resizing.
+                        editor.fire( 'saveSnapshot' );
+
+                        // Mousemove listeners are removed on mouseup.
+                        attachToDocuments( 'mousemove', onMouseMove, listeners );
+
+                        // Clean up the mousemove listener. Update widget data if valid.
+                        attachToDocuments( 'mouseup', onMouseUp, listeners );
+
+                        // The entire editable will have the special cursor while resizing goes on.
+                        editable.addClass( cursorClass );
+
+                        // This is to always keep the resizer element visible while resizing.
+                        resizer.addClass( 'cke_image_resizing' );
+
+                        // Attaches an event to a global document if inline editor.
+                        // Additionally, if classic (`iframe`-based) editor, also attaches the same event to `iframe`'s document.
+                        function attachToDocuments( name, callback, collection ) {
+                                var globalDoc = CKEDITOR.document,
+                                        listeners = [];
+
+                                if ( !doc.equals( globalDoc ) )
+                                        listeners.push( globalDoc.on( name, callback ) );
+
+                                listeners.push( doc.on( name, callback ) );
+
+                                if ( collection ) {
+                                        for ( var i = listeners.length; i--; )
+                                                collection.push( listeners.pop() );
+                                }
+                        }
+
+                        // Calculate with first, and then adjust height, preserving ratio.
+                        function adjustToX() {
+                                newWidth = startWidth + factor * moveDiffX;
+                                newHeight = Math.round( newWidth / ratio );
+                        }
+
+                        // Calculate height first, and then adjust width, preserving ratio.
+                        function adjustToY() {
+                                newHeight = startHeight - moveDiffY;
+                                newWidth = Math.round( newHeight * ratio );
+                        }
+
+                        // This is how variables refer to the geometry.
+                        // Note: x corresponds to moveOffset, this is the position of mouse
+                        // Note: o corresponds to [startX, startY].
+                        //
+                        //      +--------------+--------------+
+                        //      |              |              |
+                        //      |      I       |      II      |
+                        //      |              |              |
+                        //      +------------- o -------------+ _ _ _
+                        //      |              |              |      ^
+                        //      |      VI      |     III      |      | moveDiffY
+                        //      |              |         x _ _ _ _ _ v
+                        //      +--------------+---------|----+
+                        //                     |         |
+                        //                      <------->
+                        //                      moveDiffX
+                        function onMouseMove( evt ) {
+                                nativeEvt = evt.data.$;
+
+                                // This is how far the mouse is from the point the button was pressed.
+                                moveDiffX = nativeEvt.screenX - startX;
+                                moveDiffY = startY - nativeEvt.screenY;
+
+                                // This is the aspect ratio of the move difference.
+                                moveRatio = Math.abs( moveDiffX / moveDiffY );
+
+                                // Left, center or none-aligned widget.
+                                if ( factor == 1 ) {
+                                        if ( moveDiffX <= 0 ) {
+                                                // Case: IV.
+                                                if ( moveDiffY <= 0 )
+                                                        adjustToX();
+
+                                                // Case: I.
+                                                else {
+                                                        if ( moveRatio >= ratio )
+                                                                adjustToX();
+                                                        else
+                                                                adjustToY();
+                                                }
+                                        } else {
+                                                // Case: III.
+                                                if ( moveDiffY <= 0 ) {
+                                                        if ( moveRatio >= ratio )
+                                                                adjustToY();
+                                                        else
+                                                                adjustToX();
+                                                }
+
+                                                // Case: II.
+                                                else {
+                                                        adjustToY();
+                                                }
+                                        }
+                                }
+
+                                // Right-aligned widget. It mirrors behaviours, so I becomes II,
+                                // IV becomes III and vice-versa.
+                                else {
+                                        if ( moveDiffX <= 0 ) {
+                                                // Case: IV.
+                                                if ( moveDiffY <= 0 ) {
+                                                        if ( moveRatio >= ratio )
+                                                                adjustToY();
+                                                        else
+                                                                adjustToX();
+                                                }
+
+                                                // Case: I.
+                                                else {
+                                                        adjustToY();
+                                                }
+                                        } else {
+                                                // Case: III.
+                                                if ( moveDiffY <= 0 )
+                                                        adjustToX();
+
+                                                // Case: II.
+                                                else {
+                                                        if ( moveRatio >= ratio ) {
+                                                                adjustToX();
+                                                        } else {
+                                                                adjustToY();
+                                                        }
+                                                }
+                                        }
+                                }
+
+                                // Don't update attributes if less than 10.
+                                // This is to prevent images to visually disappear.
+                                if ( newWidth >= 15 && newHeight >= 15 ) {
+                                        image.setAttributes( { width: newWidth, height: newHeight } );
+                                        updateData = true;
+                                } else {
+                                        updateData = false;
+                                }
+                        }
+
+                        function onMouseUp() {
+                                var l;
+
+                                while ( ( l = listeners.pop() ) )
+                                        l.removeListener();
+
+                                // Restore default cursor by removing special class.
+                                editable.removeClass( cursorClass );
+
+                                // This is to bring back the regular behaviour of the resizer.
+                                resizer.removeClass( 'cke_image_resizing' );
+
+                                if ( updateData ) {
+                                        widget.setData( { width: newWidth, height: newHeight } );
+
+                                        // Save another undo snapshot: after resizing.
+                                        editor.fire( 'saveSnapshot' );
+                                }
+
+                                // Don't update data twice or more.
+                                updateData = false;
+                        }
+                } );
+
+                // Change the position of the widget resizer when data changes.
+                widget.on( 'data', function() {
+                        resizer[ widget.data.align == 'right' ? 'addClass' : 'removeClass' ]( 'cke_image_resizer_left' );
+                } );
+        }
+
+        // Integrates widget alignment setting with justify
+        // plugin's commands (execution and refreshment).
+        // @param {CKEDITOR.editor} editor
+        // @param {String} value 'left', 'right', 'center' or 'block'
+        function alignCommandIntegrator( editor ) {
+                var execCallbacks = [],
+                        enabled;
+
+                return function( value ) {
+                        var command = editor.getCommand( 'justify' + value );
+
+                        // Most likely, the justify plugin isn't loaded.
+                        if ( !command )
+                                return;
+
+                        // This command will be manually refreshed along with
+                        // other commands after exec.
+                        execCallbacks.push( function() {
+                                command.refresh( editor, editor.elementPath() );
+                        } );
+
+                        if ( value in { right: 1, left: 1, center: 1 } ) {
+                                command.on( 'exec', function( evt ) {
+                                        var widget = getFocusedWidget( editor );
+
+                                        if ( widget ) {
+                                                widget.setData( 'align', value );
+
+                                                // Once the widget changed its align, all the align commands
+                                                // must be refreshed: the event is to be cancelled.
+                                                for ( var i = execCallbacks.length; i--; )
+                                                        execCallbacks[ i ]();
+
+                                                evt.cancel();
+                                        }
+                                } );
+                        }
+
+                        command.on( 'refresh', function( evt ) {
+                                var widget = getFocusedWidget( editor ),
+                                        allowed = { right: 1, left: 1, center: 1 };
+
+                                if ( !widget )
+                                        return;
+
+                                // Cache "enabled" on first use. This is because filter#checkFeature may
+                                // not be available during plugin's afterInit in the future — a moment when
+                                // alignCommandIntegrator is called.
+                                if ( enabled === undefined )
+                                        enabled = editor.filter.checkFeature( editor.widgets.registered.image.features.align );
+
+                                // Don't allow justify commands when widget alignment is disabled (http://dev.ckeditor.com/ticket/11004).
+                                if ( !enabled )
+                                        this.setState( CKEDITOR.TRISTATE_DISABLED );
+                                else {
+                                        this.setState(
+                                                ( widget.data.align == value ) ? (
+                                                        CKEDITOR.TRISTATE_ON
+                                                ) : (
+                                                        ( value in allowed ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED
+                                                )
+                                        );
+                                }
+
+                                evt.cancel();
+                        } );
+                };
+        }
+
+        function linkCommandIntegrator( editor ) {
+                // Nothing to integrate with if link is not loaded.
+                if ( !editor.plugins.link )
+                        return;
+
+                CKEDITOR.on( 'dialogDefinition', function( evt ) {
+                        var dialog = evt.data;
+
+                        if ( dialog.name == 'link' ) {
+                                var def = dialog.definition;
+
+                                var onShow = def.onShow,
+                                        onOk = def.onOk;
+
+                                def.onShow = function() {
+                                        var widget = getFocusedWidget( editor ),
+                                                displayTextField = this.getContentElement( 'info', 'linkDisplayText' ).getElement().getParent().getParent();
+
+                                        // Widget cannot be enclosed in a link, i.e.
+                                        //              <a>foo<inline widget/>bar</a>
+                                        if ( widget && ( widget.inline ? !widget.wrapper.getAscendant( 'a' ) : 1 ) ) {
+                                                this.setupContent( widget.data.link || {} );
+
+                                                // Hide the display text in case of linking image2 widget.
+                                                displayTextField.hide();
+                                        } else {
+                                                // Make sure that display text is visible, as it might be hidden by image2 integration
+                                                // before.
+                                                displayTextField.show();
+                                                onShow.apply( this, arguments );
+                                        }
+                                };
+
+                                // Set widget data if linking the widget using
+                                // link dialog (instead of default action).
+                                // State shifter handles data change and takes
+                                // care of internal DOM structure of linked widget.
+                                def.onOk = function() {
+                                        var widget = getFocusedWidget( editor );
+
+                                        // Widget cannot be enclosed in a link, i.e.
+                                        //              <a>foo<inline widget/>bar</a>
+                                        if ( widget && ( widget.inline ? !widget.wrapper.getAscendant( 'a' ) : 1 ) ) {
+                                                var data = {};
+
+                                                // Collect data from fields.
+                                                this.commitContent( data );
+
+                                                // Set collected data to widget.
+                                                widget.setData( 'link', data );
+                                        } else {
+                                                onOk.apply( this, arguments );
+                                        }
+                                };
+                        }
+                } );
+
+                // Overwrite default behaviour of unlink command.
+                editor.getCommand( 'unlink' ).on( 'exec', function( evt ) {
+                        var widget = getFocusedWidget( editor );
+
+                        // Override unlink only when link truly belongs to the widget.
+                        // If wrapped inline widget in a link, let default unlink work (http://dev.ckeditor.com/ticket/11814).
+                        if ( !widget || !widget.parts.link )
+                                return;
+
+                        widget.setData( 'link', null );
+
+                        // Selection (which is fake) may not change if unlinked image in focused widget,
+                        // i.e. if captioned image. Let's refresh command state manually here.
+                        this.refresh( editor, editor.elementPath() );
+
+                        evt.cancel();
+                } );
+
+                // Overwrite default refresh of unlink command.
+                editor.getCommand( 'unlink' ).on( 'refresh', function( evt ) {
+                        var widget = getFocusedWidget( editor );
+
+                        if ( !widget )
+                                return;
+
+                        // Note that widget may be wrapped in a link, which
+                        // does not belong to that widget (http://dev.ckeditor.com/ticket/11814).
+                        this.setState( widget.data.link || widget.wrapper.getAscendant( 'a' ) ?
+                                CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED );
+
+                        evt.cancel();
+                } );
+        }
+
+        // Returns the focused widget, if of the type specific for this plugin.
+        // If no widget is focused, `null` is returned.
+        //
+        // @param {CKEDITOR.editor}
+        // @returns {CKEDITOR.plugins.widget}
+        function getFocusedWidget( editor ) {
+                var widget = editor.widgets.focused;
+
+                if ( widget && widget.name == 'image' )
+                        return widget;
+
+                return null;
+        }
+
+        // Returns a set of widget allowedContent rules, depending
+        // on configurations like config#image2_alignClasses or
+        // config#image2_captionedClass.
+        //
+        // @param {CKEDITOR.editor}
+        // @returns {Object}
+        function getWidgetAllowedContent( editor ) {
+                var alignClasses = editor.config.image2_alignClasses,
+                        rules = {
+                                // Widget may need <div> or <p> centering wrapper.
+                                div: {
+                                        match: centerWrapperChecker( editor )
+                                },
+                                p: {
+                                        match: centerWrapperChecker( editor )
+                                },
+                                img: {
+                                        attributes: '!src,alt,width,height'
+                                },
+                                figure: {
+                                        classes: '!' + editor.config.image2_captionedClass
+                                },
+                                figcaption: true
+                        };
+
+                if ( alignClasses ) {
+                        // Centering class from the config.
+                        rules.div.classes = alignClasses[ 1 ];
+                        rules.p.classes = rules.div.classes;
+
+                        // Left/right classes from the config.
+                        rules.img.classes = alignClasses[ 0 ] + ',' + alignClasses[ 2 ];
+                        rules.figure.classes += ',' + rules.img.classes;
+                } else {
+                        // Centering with text-align.
+                        rules.div.styles = 'text-align';
+                        rules.p.styles = 'text-align';
+
+                        rules.img.styles = 'float';
+                        rules.figure.styles = 'float,display';
+                }
+
+                return rules;
+        }
+
+        // Returns a set of widget feature rules, depending
+        // on editor configuration. Note that the following may not cover
+        // all the possible cases since requiredContent supports a single
+        // tag only.
+        //
+        // @param {CKEDITOR.editor}
+        // @returns {Object}
+        function getWidgetFeatures( editor ) {
+                var alignClasses = editor.config.image2_alignClasses,
+                        features = {
+                                dimension: {
+                                        requiredContent: 'img[width,height]'
+                                },
+                                align: {
+                                        requiredContent: 'img' +
+                                                ( alignClasses ? '(' + alignClasses[ 0 ] + ')' : '{float}' )
+                                },
+                                caption: {
+                                        requiredContent: 'figcaption'
+                                }
+                        };
+
+                return features;
+        }
+
+        // Returns element which is styled, considering current
+        // state of the widget.
+        //
+        // @see CKEDITOR.plugins.widget#applyStyle
+        // @param {CKEDITOR.plugins.widget} widget
+        // @returns {CKEDITOR.dom.element}
+        function getStyleableElement( widget ) {
+                return widget.data.hasCaption ? widget.element : widget.parts.image;
+        }
+} )();
+
+/**
+ * A CSS class applied to the `<figure>` element of a captioned image.
+ *
+ * Read more in the [documentation](#!/guide/dev_captionedimage) and see the
+ * [SDK sample](http://sdk.ckeditor.com/samples/captionedimage.html).
+ *
+ *              // Changes the class to "captionedImage".
+ *              config.image2_captionedClass = 'captionedImage';
+ *
+ * @cfg {String} [image2_captionedClass='image']
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.image2_captionedClass = 'image';
+
+/**
+ * Determines whether dimension inputs should be automatically filled when the image URL changes in the Enhanced Image
+ * plugin dialog window.
+ *
+ * Read more in the [documentation](#!/guide/dev_captionedimage) and see the
+ * [SDK sample](http://sdk.ckeditor.com/samples/captionedimage.html).
+ *
+ *              config.image2_prefillDimensions = false;
+ *
+ * @since 4.5
+ * @cfg {Boolean} [image2_prefillDimensions=true]
+ * @member CKEDITOR.config
+ */
+
+/**
+ * Disables the image resizer. By default the resizer is enabled.
+ *
+ * Read more in the [documentation](#!/guide/dev_captionedimage) and see the
+ * [SDK sample](http://sdk.ckeditor.com/samples/captionedimage.html).
+ *
+ *              config.image2_disableResizer = true;
+ *
+ * @since 4.5
+ * @cfg {Boolean} [image2_disableResizer=false]
+ * @member CKEDITOR.config
+ */
+
+/**
+ * CSS classes applied to aligned images. Useful to take control over the way
+ * the images are aligned, i.e. to customize output HTML and integrate external stylesheets.
+ *
+ * Classes should be defined in an array of three elements, containing left, center, and right
+ * alignment classes, respectively. For example:
+ *
+ *              config.image2_alignClasses = [ 'align-left', 'align-center', 'align-right' ];
+ *
+ * **Note**: Once this configuration option is set, the plugin will no longer produce inline
+ * styles for alignment. It means that e.g. the following HTML will be produced:
+ *
+ *              <img alt="My image" class="custom-center-class" src="foo.png" />
+ *
+ * instead of:
+ *
+ *              <img alt="My image" style="float:left" src="foo.png" />
+ *
+ * **Note**: Once this configuration option is set, corresponding style definitions
+ * must be supplied to the editor:
+ *
+ * * For [classic editor](#!/guide/dev_framed) it can be done by defining additional
+ * styles in the {@link CKEDITOR.config#contentsCss stylesheets loaded by the editor}. The same
+ * styles must be provided on the target page where the content will be loaded.
+ * * For [inline editor](#!/guide/dev_inline) the styles can be defined directly
+ * with `<style> ... <style>` or `<link href="..." rel="stylesheet">`, i.e. within the `<head>`
+ * of the page.
+ *
+ * For example, considering the following configuration:
+ *
+ *              config.image2_alignClasses = [ 'align-left', 'align-center', 'align-right' ];
+ *
+ * CSS rules can be defined as follows:
+ *
+ *              .align-left {
+ *                      float: left;
+ *              }
+ *
+ *              .align-right {
+ *                      float: right;
+ *              }
+ *
+ *              .align-center {
+ *                      text-align: center;
+ *              }
+ *
+ *              .align-center > figure {
+ *                      display: inline-block;
+ *              }
+ *
+ * Read more in the [documentation](#!/guide/dev_captionedimage) and see the
+ * [SDK sample](http://sdk.ckeditor.com/samples/captionedimage.html).
+ *
+ * @since 4.4
+ * @cfg {String[]} [image2_alignClasses=null]
+ * @member CKEDITOR.config
+ */
+
+/**
+ * Determines whether alternative text is required for the captioned image.
+ *
+ *              config.image2_altRequired = true;
+ *
+ * Read more in the [documentation](#!/guide/dev_captionedimage) and see the
+ * [SDK sample](http://sdk.ckeditor.com/samples/captionedimage.html).
+ *
+ * @since 4.6.0
+ * @cfg {Boolean} [image2_altRequired=false]
+ * @member CKEDITOR.config
+ */
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+        <meta charset="utf-8">
+        <title>New Image plugin &mdash; CKEditor Sample</title>
+        <script src="../../../ckeditor.js"></script>
+        <script>
+                if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
+                        CKEDITOR.tools.enableHtml5Elements( document );
+        </script>
+        <link href="../../../samples/old/sample.css" rel="stylesheet">
+        <meta name="ckeditor-sample-name" content="New Image plugin">
+        <meta name="ckeditor-sample-group" content="Plugins">
+        <meta name="ckeditor-sample-description" content="Using the new Image plugin to insert captioned images and adjust their dimensions.">
+        <meta name="ckeditor-sample-isnew" content="1">
+</head>
+<body>
+        <h1 class="samples">
+                <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; New Image plugin
+        </h1>
+        <div class="warning deprecated">
+                This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/captionedimage.html">brand new version in CKEditor SDK</a>.
+        </div>
+
+        <div class="description">
+                <p>
+                        This editor is using the new <strong>Image</strong> (<code>image2</code>) plugin, which implements a dynamic <em>click-and-drag</em> resizing
+                        and easy captioning of the images.
+                </p>
+                <p>
+                        To use the new plugin, extend <code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraPlugins">config.extraPlugins</a></code>:
+                </p>
+<pre class="samples">
+CKEDITOR.replace( '<em>textarea_id</em>', {
+        <strong>extraPlugins: 'image2'</strong>
+} );
+</pre>
+        </div>
+
+        <textarea id="editor1" cols="10" rows="10">
+                &lt;h1&gt;Apollo 11&lt;/h1&gt;&lt;figure class=&quot;image&quot; style=&quot;float: right&quot;&gt;&lt;img alt=&quot;Saturn V&quot; src=&quot;assets/image1.jpg&quot; width=&quot;200&quot; /&gt;&lt;figcaption&gt;Roll out of Saturn V on launch pad&lt;/figcaption&gt;&lt;/figure&gt;&lt;p&gt;&lt;strong&gt;Apollo 11&lt;/strong&gt; was the spaceflight that landed the first humans, Americans &lt;a href=&quot;http://en.wikipedia.org/wiki/Neil_Armstrong&quot; title=&quot;Neil Armstrong&quot;&gt;Neil Armstrong&lt;/a&gt; and &lt;a href=&quot;http://en.wikipedia.org/wiki/Buzz_Aldrin&quot; title=&quot;Buzz Aldrin&quot;&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt;&lt;p&gt;Armstrong spent about &lt;s&gt;three and a half&lt;/s&gt; two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href=&quot;http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)&quot; title=&quot;Michael Collins (astronaut)&quot;&gt;Michael Collins&lt;/a&gt;, piloted the &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_Command/Service_Module&quot; title=&quot;Apollo Command/Service Module&quot;&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt;&lt;h2&gt;Broadcasting and &lt;em&gt;quotes&lt;/em&gt; &lt;a id=&quot;quotes&quot; name=&quot;quotes&quot;&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:&lt;/p&gt;&lt;blockquote&gt;&lt;p&gt;One small step for [a] man, one giant leap for mankind.&lt;/p&gt;&lt;/blockquote&gt;&lt;p&gt;Apollo 11 effectively ended the &lt;a href=&quot;http://en.wikipedia.org/wiki/Space_Race&quot; title=&quot;Space Race&quot;&gt;Space Race&lt;/a&gt; and fulfilled a national goal proposed in 1961 by the late U.S. President &lt;a href=&quot;http://en.wikipedia.org/wiki/John_F._Kennedy&quot; title=&quot;John F. Kennedy&quot;&gt;John F. Kennedy&lt;/a&gt; in a speech before the United States Congress:&lt;/p&gt;&lt;blockquote&gt;&lt;p&gt;[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.&lt;/p&gt;&lt;/blockquote&gt;&lt;figure class=&quot;image&quot; style=&quot;float: right&quot;&gt;&lt;img alt=&quot;The Eagle&quot; src=&quot;assets/image2.jpg&quot; style=&quot;width: 200px&quot; /&gt;&lt;figcaption&gt;The Eagle in lunar orbit&lt;/figcaption&gt;&lt;/figure&gt;&lt;h2&gt;Technical details &lt;a id=&quot;tech-details&quot; name=&quot;tech-details&quot;&gt;&lt;/a&gt;&lt;/h2&gt;&lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href=&quot;http://en.wikipedia.org/wiki/Kennedy_Space_Center&quot; title=&quot;Kennedy Space Center&quot;&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href=&quot;http://en.wikipedia.org/wiki/NASA&quot; title=&quot;NASA&quot;&gt;NASA&lt;/a&gt;&amp;#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt;&lt;ol&gt;&lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt;&lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;After being sent to the Moon by the Saturn V&amp;#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Mare_Tranquillitatis&quot; title=&quot;Mare Tranquillitatis&quot;&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Pacific_Ocean&quot; title=&quot;Pacific Ocean&quot;&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt;&lt;hr /&gt;&lt;p style=&quot;text-align:right&quot;&gt;&lt;small&gt;Source: &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_11&quot;&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
+        </textarea>
+
+        <script>
+
+                CKEDITOR.replace( 'editor1', {
+                        extraPlugins: 'image2',
+                        height: 450
+                } );
+
+        </script>
+
+        <div id="footer">
+                <hr>
+                <p>
+                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
+                </p>
+                <p id="copy">
+                        Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+                        Knabben. All rights reserved.
+                </p>
+        </div>
+</body>
+</html>
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+        <meta charset="utf-8">
+        <title>Widget Drag &amp; Drop with Lineutils &mdash; CKEditor Sample</title>
+        <script src="../../../ckeditor.js"></script>
+        <script>
+                if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
+                        CKEDITOR.tools.enableHtml5Elements( document );
+        </script>
+        <link href="../../../samples/old/sample.css" rel="stylesheet">
+        <link href="../../image2/samples/contents.css" rel="stylesheet">
+</head>
+<body>
+        <h1 class="samples">
+                <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Widget Drag &amp; Drop with Lineutils
+        </h1>
+
+        <h3>Classic (iframe-based) Editor</h3>
+
+        <textarea id="editor1" cols="10" rows="10">
+                <h1>Apollo 11</h1>
+
+                <figure class="caption" style="float:right"><img alt="Saturn V" src="../../image2/samples/assets/image1.jpg" width="200" />
+                <figcaption>Roll out of Saturn V on launch pad</figcaption>
+                </figure>
+
+                <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
+
+                <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
+
+                <h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2>
+
+                <p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
+
+                <blockquote>
+                <p>One small step for [a] man, one giant leap for mankind.</p>
+                </blockquote>
+
+                <p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p>
+
+                <div style="text-align:center">
+                <figure class="caption" style="display:inline-block"><img alt="The Eagle" height="123" src="../../image2/samples/assets/image2.jpg" width="136" />
+                <figcaption>The Eagle in lunar orbit</figcaption>
+                </figure>
+                </div>
+
+                <blockquote>
+                <p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
+                </blockquote>
+
+                <figure class="caption" style="float:right"><img alt="The Eagle" src="../../image2/samples/assets/image2.jpg" width="200" />
+                <figcaption>The Eagle in lunar orbit</figcaption>
+                </figure>
+
+                <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
+
+                <p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p>
+
+                <ol>
+                        <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
+                        <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
+                        <li><strong>Lunar Module</strong> for landing on the Moon.</li>
+                </ol>
+
+                <p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
+
+                <figure class="caption"><img alt="Saturn V" height="129" src="../../image2/samples/assets/image1.jpg" width="101" />
+                <figcaption>Roll out of Saturn V on launch pad</figcaption>
+                </figure>
+
+                <hr />
+                <p style="text-align:right"><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>
+
+        </textarea>
+
+        <h3>Inline Editor</h3>
+
+        <div id="editor2" contenteditable="true" style="outline: 2px solid #ccc">
+                <table border="0" cellpadding="1" cellspacing="1" style="width: 100%; ">
+                        <tbody>
+                                <tr>
+                                        <td>This table</td>
+                                        <td>is the</td>
+                                        <td>very first</td>
+                                        <td>element of the document.</td>
+                                </tr>
+                                <tr>
+                                        <td>We are still</td>
+                                        <td>able to acces</td>
+                                        <td>the space before it.</td>
+                                        <td style="padding: 25px">
+                                        <table border="0" cellpadding="1" cellspacing="1" style="width: 100%; ">
+                                                <tbody>
+                                                        <tr>
+                                                                <td>This table is inside of a cell of another table.</td>
+                                                        </tr>
+                                                        <tr>
+                                                                <td>We can type&nbsp;either before or after it though.</td>
+                                                        </tr>
+                                                </tbody>
+                                        </table>
+                                        </td>
+                                </tr>
+                        </tbody>
+                </table>
+
+                <hr />
+                <hr />
+                <ol style="width: 300px">
+                        <li>This numbered list...</li>
+                        <li>...is a neighbour of a horizontal line...</li>
+                        <li style="padding: 20px;">
+                                <ol>
+                                        <li>Nested list!</li>
+                                </ol>
+                        </li>
+                </ol>
+
+                <figure class="caption"><img alt="Saturn V" src="../../image2/samples/assets/image1.jpg" width="100" />
+                        <figcaption>Roll out of Saturn V on launch pad</figcaption>
+                </figure>
+
+                <ul style="width: 450px">
+                        <li>We can type between the lists...</li>
+                        <li>...thanks to <strong>Magicline</strong>.</li>
+                </ul>
+
+                <p>Lorem ipsum dolor sit amet dui. Morbi vel turpis. Nullam et leo. Etiam rutrum, urna tellus dui vel tincidunt mattis egestas, justo fringilla vel, massa. Phasellus.</p>
+
+                <p>Quisque iaculis, dui lectus varius vitae, tortor. Proin lacus. Pellentesque ac lacus. Aenean nonummy commodo nec, pede. Etiam blandit risus elit.</p>
+
+                <p>Ut pretium. Vestibulum rutrum in, adipiscing elit. Sed in quam in purus sem vitae pede. Pellentesque bibendum, urna sem vel risus. Vivamus posuere metus. Aliquam gravida iaculis nisl. Nam enim. Aliquam erat ac lacus tellus ac felis.</p>
+
+                <div id="last" style="padding: 10px; text-align: center;">
+                        <p>This text is wrapped in a&nbsp;<tt>DIV</tt>&nbsp;element. We can type after this element though.</p>
+                </div>
+        </div>
+
+        <script>
+
+                CKEDITOR.replace( 'editor1', {
+                        extraPlugins: 'image2',
+                        height: 450,
+                        removePlugins: 'image,forms',
+                        contentsCss: [ '../../../contents.css', '../../image2/samples/contents.css' ]
+                } );
+
+                CKEDITOR.inline( 'editor2', {
+                        extraPlugins: 'image2',
+                        height: 450,
+                        removePlugins: 'image,forms'
+                } );
+
+        </script>
+
+        <div id="footer">
+                <hr>
+                <p>
+                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
+                </p>
+                <p id="copy">
+                        Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+                        Knabben. All rights reserved.
+                </p>
+        </div>
+</body>
+</html>
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+        <meta charset="utf-8">
+        <title>Lineutils &mdash; CKEditor Sample</title>
+        <script src="../../../ckeditor.js"></script>
+        <link href="../../../samples/old/sample.css" rel="stylesheet">
+</head>
+<body>
+        <h1 class="samples">
+                <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Lineutils
+        </h1>
+
+        <h3>Classic (iframe-based) Editor</h3>
+
+        <textarea id="editor1" cols="10" rows="10">
+                <table border="0" cellpadding="1" cellspacing="1" style="width: 100%; ">
+                        <tbody>
+                                <tr>
+                                        <td>This table</td>
+                                        <td>is the</td>
+                                        <td>very first</td>
+                                        <td>element of the document.</td>
+                                </tr>
+                                <tr>
+                                        <td>We are still</td>
+                                        <td>able to acces</td>
+                                        <td>the space before it.</td>
+                                        <td style="padding: 25px">
+                                        <table border="0" cellpadding="1" cellspacing="1" style="width: 100%; ">
+                                                <tbody>
+                                                        <tr>
+                                                                <td>This table is inside of a cell of another table.</td>
+                                                        </tr>
+                                                        <tr>
+                                                                <td>We can type&nbsp;either before or after it though.</td>
+                                                        </tr>
+                                                </tbody>
+                                        </table>
+                                        </td>
+                                </tr>
+                        </tbody>
+                </table>
+
+                <p>Two succesive horizontal lines (<tt>HR</tt> tags). We can access the space in between:</p>
+
+                <hr />
+                <hr />
+                <ol style="width: 300px">
+                        <li>This numbered list...</li>
+                        <li>...is a neighbour of a horizontal line...</li>
+                        <li style="padding: 20px;">
+                                <ol>
+                                        <li>Nested list!</li>
+                                </ol>
+                        </li>
+                </ol>
+
+                <ul style="width: 450px">
+                        <li>We can type between the lists...</li>
+                        <li>...thanks to <strong>Magicline</strong>.</li>
+                </ul>
+
+                <p>Lorem ipsum dolor sit amet dui. Morbi vel turpis. Nullam et leo. Etiam rutrum, urna tellus dui vel tincidunt mattis egestas, justo fringilla vel, massa. Phasellus.</p>
+
+                <p>Quisque iaculis, dui lectus varius vitae, tortor. Proin lacus. Pellentesque ac lacus. Aenean nonummy commodo nec, pede. Etiam blandit risus elit.</p>
+
+                <p>Ut pretium. Vestibulum rutrum in, adipiscing elit. Sed in quam in purus sem vitae pede. Pellentesque bibendum, urna sem vel risus. Vivamus posuere metus. Aliquam gravida iaculis nisl. Nam enim. Aliquam erat ac lacus tellus ac felis.</p>
+
+                <div id="last" style="padding: 10px; text-align: center;">
+                <p>This text is wrapped in a&nbsp;<tt>DIV</tt>&nbsp;element. We can type after this element though.</p>
+                </div>
+        </textarea>
+
+        <h3>Inline Editor</h3>
+
+        <div id="editor2" contenteditable="true" style="outline: 2px solid #ccc">
+                <table border="0" cellpadding="1" cellspacing="1" style="width: 100%; ">
+                        <tbody>
+                                <tr>
+                                        <td>This table</td>
+                                        <td>is the</td>
+                                        <td>very first</td>
+                                        <td>element of the document.</td>
+                                </tr>
+                                <tr>
+                                        <td>We are still</td>
+                                        <td>able to acces</td>
+                                        <td>the space before it.</td>
+                                        <td style="padding: 25px">
+                                        <table border="0" cellpadding="1" cellspacing="1" style="width: 100%; ">
+                                                <tbody>
+                                                        <tr>
+                                                                <td>This table is inside of a cell of another table.</td>
+                                                        </tr>
+                                                        <tr>
+                                                                <td>We can type&nbsp;either before or after it though.</td>
+                                                        </tr>
+                                                </tbody>
+                                        </table>
+                                        </td>
+                                </tr>
+                        </tbody>
+                </table>
+
+                <p>Two succesive horizontal lines (<tt>HR</tt> tags). We can access the space in between:</p>
+
+                <hr />
+                <hr />
+                <ol style="width: 300px">
+                        <li>This numbered list...</li>
+                        <li>...is a neighbour of a horizontal line...</li>
+                        <li style="padding: 20px;">
+                                <ol>
+                                        <li>Nested list!</li>
+                                </ol>
+                        </li>
+                </ol>
+
+                <ul style="width: 450px">
+                        <li>We can type between the lists...</li>
+                        <li>...thanks to <strong>Magicline</strong>.</li>
+                </ul>
+
+                <p>Lorem ipsum dolor sit amet dui. Morbi vel turpis. Nullam et leo. Etiam rutrum, urna tellus dui vel tincidunt mattis egestas, justo fringilla vel, massa. Phasellus.</p>
+
+                <p>Quisque iaculis, dui lectus varius vitae, tortor. Proin lacus. Pellentesque ac lacus. Aenean nonummy commodo nec, pede. Etiam blandit risus elit.</p>
+
+                <p>Ut pretium. Vestibulum rutrum in, adipiscing elit. Sed in quam in purus sem vitae pede. Pellentesque bibendum, urna sem vel risus. Vivamus posuere metus. Aliquam gravida iaculis nisl. Nam enim. Aliquam erat ac lacus tellus ac felis.</p>
+
+                <div id="last" style="padding: 10px; text-align: center;">
+                        <p>This text is wrapped in a&nbsp;<tt>DIV</tt>&nbsp;element. We can type after this element though.</p>
+                </div>
+        </div>
+
+        <h3>Extreme inline</h3>
+
+        <div id="editor3" contenteditable="true" style="left: 123px; outline: 1px solid red; border: 15px solid green; position: relative; top: 30; left: 30px;">
+                <div style="padding: 20px; background: gray; width: 300px" class="1">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim.</div>
+                <div style="background: violet; padding: 30px;" class="static">
+                        Position static
+                        <div style="background: green; padding: 30px;  border: 14px solid orange">foo</div>
+                </div>
+                <dl class="2">
+                        <dt>Key</dt><dd>Value</dd>
+                </dl>
+                <div>Whatever</div>
+                <hr id="hr">
+                <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies</p>
+                <hr>
+                <hr>
+                <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies</p>
+                <div style="background: green; padding: 30px; width: 200px">foo</div>
+        </div>
+
+        <h3>Classic (iframe-based) Editor, H-scroll</h3>
+
+        <textarea id="editor4" cols="10" rows="10">
+                <hr />
+                <hr />
+                <ol style="width: 1500px">
+                        <li>This numbered list...</li>
+                        <li>...is a neighbour of a horizontal line...</li>
+                        <li style="padding: 20px;">
+                                <ol>
+                                        <li>Nested list!</li>
+                                </ol>
+                        </li>
+                </ol>
+
+                <ul style="width: 450px">
+                        <li>We can type between the lists...</li>
+                        <li>...thanks to <strong>Magicline</strong>.</li>
+                </ul>
+
+                <p>Lorem ipsum dolor sit amet dui. Morbi vel turpis. Nullam et leo. Etiam rutrum, urna tellus dui vel tincidunt mattis egestas, justo fringilla vel, massa. Phasellus.</p>
+
+                <p>Quisque iaculis, dui lectus varius vitae, tortor. Proin lacus. Pellentesque ac lacus. Aenean nonummy commodo nec, pede. Etiam blandit risus elit.</p>
+
+                <p>Ut pretium. Vestibulum rutrum in, adipiscing elit. Sed in quam in purus sem vitae pede. Pellentesque bibendum, urna sem vel risus. Vivamus posuere metus. Aliquam gravida iaculis nisl. Nam enim. Aliquam erat ac lacus tellus ac felis.</p>
+
+                <div id="last" style="padding: 10px; text-align: center;">
+                <p>This text is wrapped in a&nbsp;<tt>DIV</tt>&nbsp;element. We can type after this element though.</p>
+                </div>
+        </textarea>
+
+        <script>
+
+                CKEDITOR.addCss(
+                        '.cke_editable * { outline: 1px solid #BCEBFF }'
+                );
+
+                function callback() {
+                        var helpers = CKEDITOR.plugins.lineutils;
+                        var liner = new helpers.liner( this );
+                        var locator = new helpers.locator( this );
+                        var finder = new helpers.finder( this, {
+                                lookups: {
+                                        'is block and first child': function( el ) {
+                                                if ( el.is( CKEDITOR.dtd.$listItem ) )
+                                                        return;
+
+                                                if ( el.is( CKEDITOR.dtd.$block ) )
+                                                        return CKEDITOR.LINEUTILS_BEFORE | CKEDITOR.LINEUTILS_AFTER;
+                                        }
+                                }
+                        } ).start( function( relations, x, y ) {
+                                locator.locate( relations );
+
+                                var locations = locator.locations,
+                                        uid, type;
+
+                                liner.prepare( relations, locations );
+
+                                for ( uid in locations ) {
+                                        for ( type in locations[ uid ] )
+                                                liner.placeLine( { uid: uid, type: type } );
+                                }
+
+                                liner.cleanup();
+                        } );
+                }
+
+                CKEDITOR.disableAutoInline = true;
+
+                CKEDITOR.replace( 'editor1', {
+                        extraPlugins: 'lineutils',
+                        height: 450,
+                        removePlugins: 'magicline',
+                        allowedContent: true,
+                        contentsCss: [ '../../../contents.css' ],
+                        on: {
+                                contentDom: callback
+                        }
+                } );
+
+                CKEDITOR.inline( 'editor2', {
+                        extraPlugins: 'lineutils',
+                        removePlugins: 'magicline',
+                        allowedContent: true,
+                        contentsCss: [ '../../../contents.css' ],
+                        on: {
+                                contentDom: callback
+                        }
+                } );
+
+                CKEDITOR.inline( 'editor3', {
+                        extraPlugins: 'lineutils',
+                        removePlugins: 'magicline',
+                        allowedContent: true,
+                        contentsCss: [ '../../../contents.css' ],
+                        on: {
+                                contentDom: callback
+                        }
+                } );
+
+                CKEDITOR.replace( 'editor4', {
+                        extraPlugins: 'lineutils',
+                        removePlugins: 'magicline',
+                        allowedContent: true,
+                        contentsCss: [ '../../../contents.css' ],
+                        on: {
+                                contentDom: callback
+                        }
+                } );
+
+
+        </script>
+
+        <div id="footer">
+                <hr>
+                <p>
+                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
+                </p>
+                <p id="copy">
+                        Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+                        Knabben. All rights reserved.
+                </p>
+        </div>
+</body>
+</html>
@@ -0,0 +1,1018 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+ /**
+ * @fileOverview A set of utilities to find and create horizontal spaces in edited content.
+ */
+
+'use strict';
+
+( function() {
+
+        CKEDITOR.plugins.add( 'lineutils' );
+
+        /**
+         * Determines a position relative to an element in DOM (before).
+         *
+         * @readonly
+         * @property {Number} [=0]
+         * @member CKEDITOR
+         */
+        CKEDITOR.LINEUTILS_BEFORE = 1;
+
+        /**
+         * Determines a position relative to an element in DOM (after).
+         *
+         * @readonly
+         * @property {Number} [=2]
+         * @member CKEDITOR
+         */
+        CKEDITOR.LINEUTILS_AFTER = 2;
+
+        /**
+         * Determines a position relative to an element in DOM (inside).
+         *
+         * @readonly
+         * @property {Number} [=4]
+         * @member CKEDITOR
+         */
+        CKEDITOR.LINEUTILS_INSIDE = 4;
+
+        /**
+         * A utility that traverses the DOM tree and discovers elements
+         * (relations) matching user-defined lookups.
+         *
+         * @private
+         * @class CKEDITOR.plugins.lineutils.finder
+         * @constructor Creates a Finder class instance.
+         * @param {CKEDITOR.editor} editor Editor instance that the Finder belongs to.
+         * @param {Object} def Finder's definition.
+         * @since 4.3
+         */
+        function Finder( editor, def ) {
+                CKEDITOR.tools.extend( this, {
+                        editor: editor,
+                        editable: editor.editable(),
+                        doc: editor.document,
+                        win: editor.window
+                }, def, true );
+
+                this.inline = this.editable.isInline();
+
+                if ( !this.inline ) {
+                        this.frame = this.win.getFrame();
+                }
+
+                this.target = this[ this.inline ? 'editable' : 'doc' ];
+        }
+
+        Finder.prototype = {
+                /**
+                 * Initializes searching for elements with every mousemove event fired.
+                 * To stop searching use {@link #stop}.
+                 *
+                 * @param {Function} [callback] Function executed on every iteration.
+                 */
+                start: function( callback ) {
+                        var that = this,
+                                editor = this.editor,
+                                doc = this.doc,
+                                el, elfp, x, y;
+
+                        var moveBuffer = CKEDITOR.tools.eventsBuffer( 50, function() {
+                                        if ( editor.readOnly || editor.mode != 'wysiwyg' )
+                                                return;
+
+                                        that.relations = {};
+
+                                        // Sometimes it happens that elementFromPoint returns null (especially on IE).
+                                        // Any further traversal makes no sense if there's no start point. Abort.
+                                        // Note: In IE8 elementFromPoint may return zombie nodes of undefined nodeType,
+                                        // so rejecting those as well.
+                                        if ( !( elfp = doc.$.elementFromPoint( x, y ) ) || !elfp.nodeType ) {
+                                                return;
+                                        }
+
+                                        el = new CKEDITOR.dom.element( elfp );
+
+                                        that.traverseSearch( el );
+
+                                        if ( !isNaN( x + y ) ) {
+                                                that.pixelSearch( el, x, y );
+                                        }
+
+                                        callback && callback( that.relations, x, y );
+                                } );
+
+                        // Searching starting from element from point on mousemove.
+                        this.listener = this.editable.attachListener( this.target, 'mousemove', function( evt ) {
+                                x = evt.data.$.clientX;
+                                y = evt.data.$.clientY;
+
+                                moveBuffer.input();
+                        } );
+
+                        this.editable.attachListener( this.inline ? this.editable : this.frame, 'mouseout', function() {
+                                moveBuffer.reset();
+                        } );
+                },
+
+                /**
+                 * Stops observing mouse events attached by {@link #start}.
+                 */
+                stop: function() {
+                        if ( this.listener ) {
+                                this.listener.removeListener();
+                        }
+                },
+
+                /**
+                 * Returns a range representing the relation, according to its element
+                 * and type.
+                 *
+                 * @param {Object} location Location containing a unique identifier and type.
+                 * @returns {CKEDITOR.dom.range} Range representing the relation.
+                 */
+                getRange: ( function() {
+                        var where = {};
+
+                        where[ CKEDITOR.LINEUTILS_BEFORE ] = CKEDITOR.POSITION_BEFORE_START;
+                        where[ CKEDITOR.LINEUTILS_AFTER ] = CKEDITOR.POSITION_AFTER_END;
+                        where[ CKEDITOR.LINEUTILS_INSIDE ] = CKEDITOR.POSITION_AFTER_START;
+
+                        return function( location ) {
+                                var range = this.editor.createRange();
+
+                                range.moveToPosition( this.relations[ location.uid ].element, where[ location.type ] );
+
+                                return range;
+                        };
+                } )(),
+
+                /**
+                 * Stores given relation in a {@link #relations} object. Processes the relation
+                 * to normalize and avoid duplicates.
+                 *
+                 * @param {CKEDITOR.dom.element} el Element of the relation.
+                 * @param {Number} type Relation, one of `CKEDITOR.LINEUTILS_AFTER`, `CKEDITOR.LINEUTILS_BEFORE`, `CKEDITOR.LINEUTILS_INSIDE`.
+                 */
+                store: ( function() {
+                        function merge( el, type, relations ) {
+                                var uid = el.getUniqueId();
+
+                                if ( uid in relations ) {
+                                        relations[ uid ].type |= type;
+                                } else {
+                                        relations[ uid ] = { element: el, type: type };
+                                }
+                        }
+
+                        return function( el, type ) {
+                                var alt;
+
+                                // Normalization to avoid duplicates:
+                                // CKEDITOR.LINEUTILS_AFTER becomes CKEDITOR.LINEUTILS_BEFORE of el.getNext().
+                                if ( is( type, CKEDITOR.LINEUTILS_AFTER ) && isStatic( alt = el.getNext() ) && alt.isVisible() ) {
+                                        merge( alt, CKEDITOR.LINEUTILS_BEFORE, this.relations );
+                                        type ^= CKEDITOR.LINEUTILS_AFTER;
+                                }
+
+                                // Normalization to avoid duplicates:
+                                // CKEDITOR.LINEUTILS_INSIDE becomes CKEDITOR.LINEUTILS_BEFORE of el.getFirst().
+                                if ( is( type, CKEDITOR.LINEUTILS_INSIDE ) && isStatic( alt = el.getFirst() ) && alt.isVisible() ) {
+                                        merge( alt, CKEDITOR.LINEUTILS_BEFORE, this.relations );
+                                        type ^= CKEDITOR.LINEUTILS_INSIDE;
+                                }
+
+                                merge( el, type, this.relations );
+                        };
+                } )(),
+
+                /**
+                 * Traverses the DOM tree towards root, checking all ancestors
+                 * with lookup rules, avoiding duplicates. Stores positive relations
+                 * in the {@link #relations} object.
+                 *
+                 * @param {CKEDITOR.dom.element} el Element which is the starting point.
+                 */
+                traverseSearch: function( el ) {
+                        var l, type, uid;
+
+                        // Go down DOM towards root (or limit).
+                        do {
+                                uid = el.$[ 'data-cke-expando' ];
+
+                                // This element was already visited and checked.
+                                if ( uid && uid in this.relations ) {
+                                        continue;
+                                }
+
+                                if ( el.equals( this.editable ) ) {
+                                        return;
+                                }
+
+                                if ( isStatic( el ) ) {
+                                        // Collect all addresses yielded by lookups for that element.
+                                        for ( l in this.lookups ) {
+
+                                                if ( ( type = this.lookups[ l ]( el ) ) ) {
+                                                        this.store( el, type );
+                                                }
+                                        }
+                                }
+                        } while ( !isLimit( el ) && ( el = el.getParent() ) );
+                },
+
+                /**
+                 * Iterates vertically pixel-by-pixel within a given element starting
+                 * from given coordinates, searching for elements in the neighborhood.
+                 * Once an element is found it is processed by {@link #traverseSearch}.
+                 *
+                 * @param {CKEDITOR.dom.element} el Element which is the starting point.
+                 * @param {Number} [x] Horizontal mouse coordinate relative to the viewport.
+                 * @param {Number} [y] Vertical mouse coordinate relative to the viewport.
+                 */
+                pixelSearch: ( function() {
+                        var contains = CKEDITOR.env.ie || CKEDITOR.env.webkit ?
+                                function( el, found ) {
+                                        return el.contains( found );
+                                } : function( el, found ) {
+                                        return !!( el.compareDocumentPosition( found ) & 16 );
+                                };
+
+                        // Iterates pixel-by-pixel from starting coordinates, moving by defined
+                        // step and getting elementFromPoint in every iteration. Iteration stops when:
+                        //  * A valid element is found.
+                        //  * Condition function returns `false` (i.e. reached boundaries of viewport).
+                        //  * No element is found (i.e. coordinates out of viewport).
+                        //  * Element found is ascendant of starting element.
+                        //
+                        // @param {Object} doc Native DOM document.
+                        // @param {Object} el Native DOM element.
+                        // @param {Number} xStart Horizontal starting coordinate to use.
+                        // @param {Number} yStart Vertical starting coordinate to use.
+                        // @param {Number} step Step of the algorithm.
+                        // @param {Function} condition A condition relative to current vertical coordinate.
+                        function iterate( el, xStart, yStart, step, condition ) {
+                                var y = yStart,
+                                        tryouts = 0,
+                                        found;
+
+                                while ( condition( y ) ) {
+                                        y += step;
+
+                                        // If we try and we try, and still nothing's found, let's end
+                                        // that party.
+                                        if ( ++tryouts == 25 ) {
+                                                return;
+                                        }
+
+                                        found = this.doc.$.elementFromPoint( xStart, y );
+
+                                        // Nothing found. This is crazy... but...
+                                        // It might be that a line, which is in different document,
+                                        // covers that pixel (elementFromPoint is doc-sensitive).
+                                        // Better let's have another try.
+                                        if ( !found ) {
+                                                continue;
+                                        }
+
+                                        // Still in the same element.
+                                        else if ( found == el ) {
+                                                tryouts = 0;
+                                                continue;
+                                        }
+
+                                        // Reached the edge of an element and found an ancestor or...
+                                        // A line, that covers that pixel. Better let's have another try.
+                                        else if ( !contains( el, found ) ) {
+                                                continue;
+                                        }
+
+                                        tryouts = 0;
+
+                                        // Found a valid element. Stop iterating.
+                                        if ( isStatic( ( found = new CKEDITOR.dom.element( found ) ) ) ) {
+                                                return found;
+                                        }
+                                }
+                        }
+
+                        return function( el, x, y ) {
+                                var paneHeight = this.win.getViewPaneSize().height,
+
+                                        // Try to find an element iterating *up* from the starting point.
+                                        neg = iterate.call( this, el.$, x, y, -1, function( y ) {
+                                                return y > 0;
+                                        } ),
+
+                                        // Try to find an element iterating *down* from the starting point.
+                                        pos = iterate.call( this, el.$, x, y, 1, function( y ) {
+                                                return y < paneHeight;
+                                        } );
+
+                                if ( neg ) {
+                                        this.traverseSearch( neg );
+
+                                        // Iterate towards DOM root until neg is a direct child of el.
+                                        while ( !neg.getParent().equals( el ) ) {
+                                                neg = neg.getParent();
+                                        }
+                                }
+
+                                if ( pos ) {
+                                        this.traverseSearch( pos );
+
+                                        // Iterate towards DOM root until pos is a direct child of el.
+                                        while ( !pos.getParent().equals( el ) ) {
+                                                pos = pos.getParent();
+                                        }
+                                }
+
+                                // Iterate forwards starting from neg and backwards from
+                                // pos to harvest all children of el between those elements.
+                                // Stop when neg and pos meet each other or there's none of them.
+                                // TODO (?) reduce number of hops forwards/backwards.
+                                while ( neg || pos ) {
+                                        if ( neg ) {
+                                                neg = neg.getNext( isStatic );
+                                        }
+
+                                        if ( !neg || neg.equals( pos ) ) {
+                                                break;
+                                        }
+
+                                        this.traverseSearch( neg );
+
+                                        if ( pos ) {
+                                                pos = pos.getPrevious( isStatic );
+                                        }
+
+                                        if ( !pos || pos.equals( neg ) ) {
+                                                break;
+                                        }
+
+                                        this.traverseSearch( pos );
+                                }
+                        };
+                } )(),
+
+                /**
+                 * Unlike {@link #traverseSearch}, it collects **all** elements from editable's DOM tree
+                 * and runs lookups for every one of them, collecting relations.
+                 *
+                 * @returns {Object} {@link #relations}.
+                 */
+                greedySearch: function() {
+                        this.relations = {};
+
+                        var all = this.editable.getElementsByTag( '*' ),
+                                i = 0,
+                                el, type, l;
+
+                        while ( ( el = all.getItem( i++ ) ) ) {
+                                // Don't consider editable, as it might be inline,
+                                // and i.e. checking it's siblings is pointless.
+                                if ( el.equals( this.editable ) ) {
+                                        continue;
+                                }
+
+                                // On IE8 element.getElementsByTagName returns comments... sic! (http://dev.ckeditor.com/ticket/13176)
+                                if ( el.type != CKEDITOR.NODE_ELEMENT ) {
+                                        continue;
+                                }
+
+                                // Don't visit non-editable internals, for example widget's
+                                // guts (above wrapper, below nested). Still check editable limits,
+                                // as they are siblings with editable contents.
+                                if ( !el.hasAttribute( 'contenteditable' ) && el.isReadOnly() ) {
+                                        continue;
+                                }
+
+                                if ( isStatic( el ) && el.isVisible() ) {
+                                        // Collect all addresses yielded by lookups for that element.
+                                        for ( l in this.lookups ) {
+                                                if ( ( type = this.lookups[ l ]( el ) ) ) {
+                                                        this.store( el, type );
+                                                }
+                                        }
+                                }
+                        }
+
+                        return this.relations;
+                }
+
+                /**
+                 * Relations express elements in DOM that match user-defined {@link #lookups}.
+                 * Every relation has its own `type` that determines whether
+                 * it refers to the space before, after or inside the `element`.
+                 * This object stores relations found by {@link #traverseSearch} or {@link #greedySearch}, structured
+                 * in the following way:
+                 *
+                 *              relations: {
+                 *                      // Unique identifier of the element.
+                 *                      Number: {
+                 *                              // Element of this relation.
+                 *                              element: {@link CKEDITOR.dom.element}
+                 *                              // Conjunction of CKEDITOR.LINEUTILS_BEFORE, CKEDITOR.LINEUTILS_AFTER and CKEDITOR.LINEUTILS_INSIDE.
+                 *                              type: Number
+                 *                      },
+                 *                      ...
+                 *              }
+                 *
+                 * @property {Object} relations
+                 * @readonly
+                 */
+
+                /**
+                 * A set of user-defined functions used by Finder to check if an element
+                 * is a valid relation, belonging to {@link #relations}.
+                 * When the criterion is met, lookup returns a logical conjunction of `CKEDITOR.LINEUTILS_BEFORE`,
+                 * `CKEDITOR.LINEUTILS_AFTER` or `CKEDITOR.LINEUTILS_INSIDE`.
+                 *
+                 * Lookups are passed along with Finder's definition.
+                 *
+                 *              lookups: {
+                 *                      'some lookup': function( el ) {
+                 *                              if ( someCondition )
+                 *                                      return CKEDITOR.LINEUTILS_BEFORE;
+                 *                      },
+                 *                      ...
+                 *              }
+                 *
+                 * @property {Object} lookups
+                 */
+        };
+
+
+        /**
+         * A utility that analyses relations found by
+         * CKEDITOR.plugins.lineutils.finder and locates them
+         * in the viewport as horizontal lines of specific coordinates.
+         *
+         * @private
+         * @class CKEDITOR.plugins.lineutils.locator
+         * @constructor Creates a Locator class instance.
+         * @param {CKEDITOR.editor} editor Editor instance that Locator belongs to.
+         * @since 4.3
+         */
+        function Locator( editor, def ) {
+                CKEDITOR.tools.extend( this, def, {
+                        editor: editor
+                }, true );
+        }
+
+        Locator.prototype = {
+                /**
+                 * Locates the Y coordinate for all types of every single relation and stores
+                 * them in an object.
+                 *
+                 * @param {Object} relations {@link CKEDITOR.plugins.lineutils.finder#relations}.
+                 * @returns {Object} {@link #locations}.
+                 */
+                locate: ( function() {
+                        function locateSibling( rel, type ) {
+                                var sib = rel.element[ type === CKEDITOR.LINEUTILS_BEFORE ? 'getPrevious' : 'getNext' ]();
+
+                                // Return the middle point between siblings.
+                                if ( sib && isStatic( sib ) ) {
+                                        rel.siblingRect = sib.getClientRect();
+
+                                        if ( type == CKEDITOR.LINEUTILS_BEFORE ) {
+                                                return ( rel.siblingRect.bottom + rel.elementRect.top ) / 2;
+                                        } else {
+                                                return ( rel.elementRect.bottom + rel.siblingRect.top ) / 2;
+                                        }
+                                }
+
+                                // If there's no sibling, use the edge of an element.
+                                else {
+                                        if ( type == CKEDITOR.LINEUTILS_BEFORE ) {
+                                                return rel.elementRect.top;
+                                        } else {
+                                                return rel.elementRect.bottom;
+                                        }
+                                }
+                        }
+
+                        return function( relations ) {
+                                var rel;
+
+                                this.locations = {};
+
+                                for ( var uid in relations ) {
+                                        rel = relations[ uid ];
+                                        rel.elementRect = rel.element.getClientRect();
+
+                                        if ( is( rel.type, CKEDITOR.LINEUTILS_BEFORE ) ) {
+                                                this.store( uid, CKEDITOR.LINEUTILS_BEFORE, locateSibling( rel, CKEDITOR.LINEUTILS_BEFORE ) );
+                                        }
+
+                                        if ( is( rel.type, CKEDITOR.LINEUTILS_AFTER ) ) {
+                                                this.store( uid, CKEDITOR.LINEUTILS_AFTER, locateSibling( rel, CKEDITOR.LINEUTILS_AFTER ) );
+                                        }
+
+                                        // The middle point of the element.
+                                        if ( is( rel.type, CKEDITOR.LINEUTILS_INSIDE ) ) {
+                                                this.store( uid, CKEDITOR.LINEUTILS_INSIDE, ( rel.elementRect.top + rel.elementRect.bottom ) / 2 );
+                                        }
+                                }
+
+                                return this.locations;
+                        };
+                } )(),
+
+                /**
+                 * Calculates distances from every location to given vertical coordinate
+                 * and sorts locations according to that distance.
+                 *
+                 * @param {Number} y The vertical coordinate used for sorting, used as a reference.
+                 * @param {Number} [howMany] Determines the number of "closest locations" to be returned.
+                 * @returns {Array} Sorted, array representation of {@link #locations}.
+                 */
+                sort: ( function() {
+                        var locations, sorted,
+                                dist, i;
+
+                        function distance( y, uid, type ) {
+                                return Math.abs( y - locations[ uid ][ type ] );
+                        }
+
+                        return function( y, howMany ) {
+                                locations = this.locations;
+                                sorted = [];
+
+                                for ( var uid in locations ) {
+                                        for ( var type in locations[ uid ] ) {
+                                                dist = distance( y, uid, type );
+
+                                                // An array is empty.
+                                                if ( !sorted.length ) {
+                                                        sorted.push( { uid: +uid, type: type, dist: dist } );
+                                                } else {
+                                                        // Sort the array on fly when it's populated.
+                                                        for ( i = 0; i < sorted.length; i++ ) {
+                                                                if ( dist < sorted[ i ].dist ) {
+                                                                        sorted.splice( i, 0, { uid: +uid, type: type, dist: dist } );
+                                                                        break;
+                                                                }
+                                                        }
+
+                                                        // Nothing was inserted, so the distance is bigger than
+                                                        // any of already calculated: push to the end.
+                                                        if ( i == sorted.length ) {
+                                                                sorted.push( { uid: +uid, type: type, dist: dist } );
+                                                        }
+                                                }
+                                        }
+                                }
+
+                                if ( typeof howMany != 'undefined' ) {
+                                        return sorted.slice( 0, howMany );
+                                } else {
+                                        return sorted;
+                                }
+                        };
+                } )(),
+
+                /**
+                 * Stores the location in a collection.
+                 *
+                 * @param {Number} uid Unique identifier of the relation.
+                 * @param {Number} type One of `CKEDITOR.LINEUTILS_BEFORE`, `CKEDITOR.LINEUTILS_AFTER` and `CKEDITOR.LINEUTILS_INSIDE`.
+                 * @param {Number} y Vertical position of the relation.
+                 */
+                store: function( uid, type, y ) {
+                        if ( !this.locations[ uid ] ) {
+                                this.locations[ uid ] = {};
+                        }
+
+                        this.locations[ uid ][ type ] = y;
+                }
+
+                /**
+                 * @readonly
+                 * @property {Object} locations
+                 */
+        };
+
+        var tipCss = {
+                        display: 'block',
+                        width: '0px',
+                        height: '0px',
+                        'border-color': 'transparent',
+                        'border-style': 'solid',
+                        position: 'absolute',
+                        top: '-6px'
+                },
+
+                lineStyle = {
+                        height: '0px',
+                        'border-top': '1px dashed red',
+                        position: 'absolute',
+                        'z-index': 9999
+                },
+
+                lineTpl =
+                        '<div data-cke-lineutils-line="1" class="cke_reset_all" style="{lineStyle}">' +
+                                '<span style="{tipLeftStyle}">&nbsp;</span>' +
+                                '<span style="{tipRightStyle}">&nbsp;</span>' +
+                        '</div>';
+
+        /**
+         * A utility that draws horizontal lines in DOM according to locations
+         * returned by CKEDITOR.plugins.lineutils.locator.
+         *
+         * @private
+         * @class CKEDITOR.plugins.lineutils.liner
+         * @constructor Creates a Liner class instance.
+         * @param {CKEDITOR.editor} editor Editor instance that Liner belongs to.
+         * @param {Object} def Liner's definition.
+         * @since 4.3
+         */
+        function Liner( editor, def ) {
+                var editable = editor.editable();
+
+                CKEDITOR.tools.extend( this, {
+                        editor: editor,
+                        editable: editable,
+                        inline: editable.isInline(),
+                        doc: editor.document,
+                        win: editor.window,
+                        container: CKEDITOR.document.getBody(),
+                        winTop: CKEDITOR.document.getWindow()
+                }, def, true );
+
+                this.hidden = {};
+                this.visible = {};
+
+                if ( !this.inline ) {
+                        this.frame = this.win.getFrame();
+                }
+
+                this.queryViewport();
+
+                // Callbacks must be wrapped. Otherwise they're not attached
+                // to global DOM objects (i.e. topmost window) for every editor
+                // because they're treated as duplicates. They belong to the
+                // same prototype shared among Liner instances.
+                var queryViewport = CKEDITOR.tools.bind( this.queryViewport, this ),
+                        hideVisible = CKEDITOR.tools.bind( this.hideVisible, this ),
+                        removeAll = CKEDITOR.tools.bind( this.removeAll, this );
+
+                editable.attachListener( this.winTop, 'resize', queryViewport );
+                editable.attachListener( this.winTop, 'scroll', queryViewport );
+
+                editable.attachListener( this.winTop, 'resize', hideVisible );
+                editable.attachListener( this.win, 'scroll', hideVisible );
+
+                editable.attachListener( this.inline ? editable : this.frame, 'mouseout', function( evt ) {
+                        var x = evt.data.$.clientX,
+                                y = evt.data.$.clientY;
+
+                        this.queryViewport();
+
+                        // Check if mouse is out of the element (iframe/editable).
+                        if ( x <= this.rect.left || x >= this.rect.right || y <= this.rect.top || y >= this.rect.bottom ) {
+                                this.hideVisible();
+                        }
+
+                        // Check if mouse is out of the top-window vieport.
+                        if ( x <= 0 || x >= this.winTopPane.width || y <= 0 || y >= this.winTopPane.height ) {
+                                this.hideVisible();
+                        }
+                }, this );
+
+                editable.attachListener( editor, 'resize', queryViewport );
+                editable.attachListener( editor, 'mode', removeAll );
+                editor.on( 'destroy', removeAll );
+
+                this.lineTpl = new CKEDITOR.template( lineTpl ).output( {
+                        lineStyle: CKEDITOR.tools.writeCssText(
+                                CKEDITOR.tools.extend( {}, lineStyle, this.lineStyle, true )
+                        ),
+                        tipLeftStyle: CKEDITOR.tools.writeCssText(
+                                CKEDITOR.tools.extend( {}, tipCss, {
+                                        left: '0px',
+                                        'border-left-color': 'red',
+                                        'border-width': '6px 0 6px 6px'
+                                }, this.tipCss, this.tipLeftStyle, true )
+                        ),
+                        tipRightStyle: CKEDITOR.tools.writeCssText(
+                                CKEDITOR.tools.extend( {}, tipCss, {
+                                        right: '0px',
+                                        'border-right-color': 'red',
+                                        'border-width': '6px 6px 6px 0'
+                                }, this.tipCss, this.tipRightStyle, true )
+                        )
+                } );
+        }
+
+        Liner.prototype = {
+                /**
+                 * Permanently removes all lines (both hidden and visible) from DOM.
+                 */
+                removeAll: function() {
+                        var l;
+
+                        for ( l in this.hidden ) {
+                                this.hidden[ l ].remove();
+                                delete this.hidden[ l ];
+                        }
+
+                        for ( l in this.visible ) {
+                                this.visible[ l ].remove();
+                                delete this.visible[ l ];
+                        }
+                },
+
+                /**
+                 * Hides a given line.
+                 *
+                 * @param {CKEDITOR.dom.element} line The line to be hidden.
+                 */
+                hideLine: function( line ) {
+                        var uid = line.getUniqueId();
+
+                        line.hide();
+
+                        this.hidden[ uid ] = line;
+                        delete this.visible[ uid ];
+                },
+
+                /**
+                 * Shows a given line.
+                 *
+                 * @param {CKEDITOR.dom.element} line The line to be shown.
+                 */
+                showLine: function( line ) {
+                        var uid = line.getUniqueId();
+
+                        line.show();
+
+                        this.visible[ uid ] = line;
+                        delete this.hidden[ uid ];
+                },
+
+                /**
+                 * Hides all visible lines.
+                 */
+                hideVisible: function() {
+                        for ( var l in this.visible ) {
+                                this.hideLine( this.visible[ l ] );
+                        }
+                },
+
+                /**
+                 * Shows a line at given location.
+                 *
+                 * @param {Object} location Location object containing the unique identifier of the relation
+                 * and its type. Usually returned by {@link CKEDITOR.plugins.lineutils.locator#sort}.
+                 * @param {Function} [callback] A callback to be called once the line is shown.
+                 */
+                placeLine: function( location, callback ) {
+                        var styles, line, l;
+
+                        // No style means that line would be out of viewport.
+                        if ( !( styles = this.getStyle( location.uid, location.type ) ) ) {
+                                return;
+                        }
+
+                        // Search for any visible line of a different hash first.
+                        // It's faster to re-position visible line than to show it.
+                        for ( l in this.visible ) {
+                                if ( this.visible[ l ].getCustomData( 'hash' ) !== this.hash ) {
+                                        line = this.visible[ l ];
+                                        break;
+                                }
+                        }
+
+                        // Search for any hidden line of a different hash.
+                        if ( !line ) {
+                                for ( l in this.hidden ) {
+                                        if ( this.hidden[ l ].getCustomData( 'hash' ) !== this.hash ) {
+                                                this.showLine( ( line = this.hidden[ l ] ) );
+                                                break;
+                                        }
+                                }
+                        }
+
+                        // If no line available, add the new one.
+                        if ( !line ) {
+                                this.showLine( ( line = this.addLine() ) );
+                        }
+
+                        // Mark the line with current hash.
+                        line.setCustomData( 'hash', this.hash );
+
+                        // Mark the line as visible.
+                        this.visible[ line.getUniqueId() ] = line;
+
+                        line.setStyles( styles );
+
+                        callback && callback( line );
+                },
+
+                /**
+                 * Creates a style set to be used by the line, representing a particular
+                 * relation (location).
+                 *
+                 * @param {Number} uid Unique identifier of the relation.
+                 * @param {Number} type Type of the relation.
+                 * @returns {Object} An object containing styles.
+                 */
+                getStyle: function( uid, type ) {
+                        var rel = this.relations[ uid ],
+                                loc = this.locations[ uid ][ type ],
+                                styles = {},
+                                hdiff;
+
+                        // Line should be between two elements.
+                        if ( rel.siblingRect ) {
+                                styles.width = Math.max( rel.siblingRect.width, rel.elementRect.width );
+                        }
+                        // Line is relative to a single element.
+                        else {
+                                styles.width = rel.elementRect.width;
+                        }
+
+                        // Let's calculate the vertical position of the line.
+                        if ( this.inline ) {
+                                // (http://dev.ckeditor.com/ticket/13155)
+                                styles.top = loc + this.winTopScroll.y - this.rect.relativeY;
+                        } else {
+                                styles.top = this.rect.top + this.winTopScroll.y + loc;
+                        }
+
+                        // Check if line would be vertically out of the viewport.
+                        if ( styles.top - this.winTopScroll.y < this.rect.top || styles.top - this.winTopScroll.y > this.rect.bottom ) {
+                                return false;
+                        }
+
+                        // Now let's calculate the horizontal alignment (left and width).
+                        if ( this.inline ) {
+                                // (http://dev.ckeditor.com/ticket/13155)
+                                styles.left = rel.elementRect.left - this.rect.relativeX;
+                        } else {
+                                if ( rel.elementRect.left > 0 )
+                                        styles.left = this.rect.left + rel.elementRect.left;
+
+                                // H-scroll case. Left edge of element may be out of viewport.
+                                else {
+                                        styles.width += rel.elementRect.left;
+                                        styles.left = this.rect.left;
+                                }
+
+                                // H-scroll case. Right edge of element may be out of viewport.
+                                if ( ( hdiff = styles.left + styles.width - ( this.rect.left + this.winPane.width ) ) > 0 ) {
+                                        styles.width -= hdiff;
+                                }
+                        }
+
+                        // Finally include horizontal scroll of the global window.
+                        styles.left += this.winTopScroll.x;
+
+                        // Append 'px' to style values.
+                        for ( var style in styles ) {
+                                styles[ style ] = CKEDITOR.tools.cssLength( styles[ style ] );
+                        }
+
+                        return styles;
+                },
+
+                /**
+                 * Adds a new line to DOM.
+                 *
+                 * @returns {CKEDITOR.dom.element} A brand-new line.
+                 */
+                addLine: function() {
+                        var line = CKEDITOR.dom.element.createFromHtml( this.lineTpl );
+
+                        line.appendTo( this.container );
+
+                        return line;
+                },
+
+                /**
+                 * Assigns a unique hash to the instance that is later used
+                 * to tell unwanted lines from new ones. This method **must** be called
+                 * before a new set of relations is to be visualized so {@link #cleanup}
+                 * eventually hides obsolete lines. This is because lines
+                 * are re-used between {@link #placeLine} calls and the number of
+                 * necessary ones may vary depending on the number of relations.
+                 *
+                 * @param {Object} relations {@link CKEDITOR.plugins.lineutils.finder#relations}.
+                 * @param {Object} locations {@link CKEDITOR.plugins.lineutils.locator#locations}.
+                 */
+                prepare: function( relations, locations ) {
+                        this.relations = relations;
+                        this.locations = locations;
+                        this.hash = Math.random();
+                },
+
+                /**
+                 * Hides all visible lines that do not belong to current hash
+                 * and no longer represent relations (locations).
+                 *
+                 * See also: {@link #prepare}.
+                 */
+                cleanup: function() {
+                        var line;
+
+                        for ( var l in this.visible ) {
+                                line = this.visible[ l ];
+
+                                if ( line.getCustomData( 'hash' ) !== this.hash ) {
+                                        this.hideLine( line );
+                                }
+                        }
+                },
+
+                /**
+                 * Queries dimensions of the viewport, editable, frame etc.
+                 * that are used for correct positioning of the line.
+                 */
+                queryViewport: function() {
+                        this.winPane = this.win.getViewPaneSize();
+                        this.winTopScroll = this.winTop.getScrollPosition();
+                        this.winTopPane = this.winTop.getViewPaneSize();
+
+                        // (http://dev.ckeditor.com/ticket/13155)
+                        this.rect = this.getClientRect( this.inline ? this.editable : this.frame );
+                },
+
+                /**
+                 * Returns `boundingClientRect` of an element, shifted by the position
+                 * of `container` when the container is not `static` (http://dev.ckeditor.com/ticket/13155).
+                 *
+                 * See also: {@link CKEDITOR.dom.element#getClientRect}.
+                 *
+                 * @param {CKEDITOR.dom.element} el A DOM element.
+                 * @returns {Object} A shifted rect, extended by `relativeY` and `relativeX` properties.
+                 */
+                getClientRect: function( el ) {
+                        var rect = el.getClientRect(),
+                                relativeContainerDocPosition = this.container.getDocumentPosition(),
+                                relativeContainerComputedPosition = this.container.getComputedStyle( 'position' );
+
+                        // Static or not, those values are used to offset the position of the line so they cannot be undefined.
+                        rect.relativeX = rect.relativeY = 0;
+
+                        if ( relativeContainerComputedPosition != 'static' ) {
+                                // Remember the offset used to shift the clientRect.
+                                rect.relativeY = relativeContainerDocPosition.y;
+                                rect.relativeX = relativeContainerDocPosition.x;
+
+                                rect.top -= rect.relativeY;
+                                rect.bottom -= rect.relativeY;
+                                rect.left -= rect.relativeX;
+                                rect.right -= rect.relativeX;
+                        }
+
+                        return rect;
+                }
+        };
+
+        function is( type, flag ) {
+                return type & flag;
+        }
+
+        var floats = { left: 1, right: 1, center: 1 },
+                positions = { absolute: 1, fixed: 1 };
+
+        function isElement( node ) {
+                return node && node.type == CKEDITOR.NODE_ELEMENT;
+        }
+
+        function isFloated( el ) {
+                return !!( floats[ el.getComputedStyle( 'float' ) ] || floats[ el.getAttribute( 'align' ) ] );
+        }
+
+        function isPositioned( el ) {
+                return !!positions[ el.getComputedStyle( 'position' ) ];
+        }
+
+        function isLimit( node ) {
+                return isElement( node ) && node.getAttribute( 'contenteditable' ) == 'true';
+        }
+
+        function isStatic( node ) {
+                return isElement( node ) && !isFloated( node ) && !isPositioned( node );
+        }
+
+        /**
+         * Global namespace storing definitions and global helpers for the Line Utilities plugin.
+         *
+         * @private
+         * @class
+         * @singleton
+         * @since 4.3
+         */
+        CKEDITOR.plugins.lineutils = {
+                finder: Finder,
+                locator: Locator,
+                liner: Liner
+        };
+} )();
@@ -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;
+}
\ No newline at end of file
@@ -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;
+}
\ No newline at end of file
@@ -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() );
+                                                }
+                                        }
+                                ]
+                        }
+                ]
+        };
+} );
\ No newline at end of file
@@ -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,dialog',
+
+        // 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 );
+                        }
+                } );
+        }
+} );
@@ -0,0 +1,131 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+/* global CKCONSOLE */
+
+'use strict';
+
+( function() {
+
+        CKCONSOLE.add( 'widget', {
+                panels: [
+                        {
+                                type: 'box',
+                                content: '<ul class="ckconsole_list ckconsole_value" data-value="instances"></ul>',
+
+                                refresh: function( editor ) {
+                                        var instances = obj2Array( editor.widgets.instances );
+
+                                        return {
+                                                header: 'Instances (' + instances.length + ')',
+                                                instances: generateInstancesList( instances )
+                                        };
+                                },
+
+                                refreshOn: function( editor, refresh ) {
+                                        editor.widgets.on( 'instanceCreated', function( evt ) {
+                                                refresh();
+
+                                                evt.data.on( 'data', refresh );
+                                        } );
+
+                                        editor.widgets.on( 'instanceDestroyed', refresh );
+                                }
+                        },
+
+                        {
+                                type: 'box',
+                                content:
+                                        '<ul class="ckconsole_list">' +
+                                                '<li>focused: <span class="ckconsole_value" data-value="focused"></span></li>' +
+                                                '<li>selected: <span class="ckconsole_value" data-value="selected"></span></li>' +
+                                        '</ul>',
+
+                                refresh: function( editor ) {
+                                        var focused = editor.widgets.focused,
+                                                selected = editor.widgets.selected,
+                                                selectedIds = [];
+
+                                        for ( var i = 0; i < selected.length; ++i )
+                                                selectedIds.push( selected[ i ].id );
+
+                                        return {
+                                                header: 'Focus &amp; selection',
+                                                focused: focused ? 'id: ' + focused.id : '-',
+                                                selected: selectedIds.length ? 'id: ' + selectedIds.join( ', id: ' ) : '-'
+                                        };
+                                },
+
+                                refreshOn: function( editor, refresh ) {
+                                        editor.on( 'selectionCheck', refresh, null, null, 999 );
+                                }
+                        },
+
+                        {
+                                type: 'log',
+
+                                on: function( editor, log, logFn ) {
+                                        // Add all listeners with high priorities to log
+                                        // messages in the correct order when one event depends on another.
+                                        // E.g. selectionChange triggers widget selection - if this listener
+                                        // for selectionChange will be executed later than that one, then order
+                                        // will be incorrect.
+
+                                        editor.on( 'selectionChange', function( evt ) {
+                                                var msg = 'selection change',
+                                                        sel = evt.data.selection,
+                                                        el = sel.getSelectedElement(),
+                                                        widget;
+
+                                                if ( el && ( widget = editor.widgets.getByElement( el, true ) ) )
+                                                        msg += ' (id: ' + widget.id + ')';
+
+                                                log( msg );
+                                        }, null, null, 1 );
+
+                                        editor.widgets.on( 'instanceDestroyed', function( evt ) {
+                                                log( 'instance destroyed (id: ' + evt.data.id + ')' );
+                                        }, null, null, 1 );
+
+                                        editor.widgets.on( 'instanceCreated', function( evt ) {
+                                                log( 'instance created (id: ' + evt.data.id + ')' );
+                                        }, null, null, 1 );
+
+                                        editor.widgets.on( 'widgetFocused', function( evt ) {
+                                                log( 'widget focused (id: ' + evt.data.widget.id + ')' );
+                                        }, null, null, 1 );
+
+                                        editor.widgets.on( 'widgetBlurred', function( evt ) {
+                                                log( 'widget blurred (id: ' + evt.data.widget.id + ')' );
+                                        }, null, null, 1 );
+
+                                        editor.widgets.on( 'checkWidgets', logFn( 'checking widgets' ), null, null, 1 );
+                                        editor.widgets.on( 'checkSelection', logFn( 'checking selection' ), null, null, 1 );
+                                }
+                        }
+                ]
+        } );
+
+        function generateInstancesList( instances ) {
+                var html = '',
+                        instance;
+
+                for ( var i = 0; i < instances.length; ++i ) {
+                        instance = instances[ i ];
+                        html += itemTpl.output( { id: instance.id, name: instance.name, data: JSON.stringify( instance.data ) } );
+                }
+                return html;
+        }
+
+        function obj2Array( obj ) {
+                var arr = [];
+                for ( var id in obj )
+                        arr.push( obj[ id ] );
+
+                return arr;
+        }
+
+        var itemTpl = new CKEDITOR.template( '<li>id: <code>{id}</code>, name: <code>{name}</code>, data: <code>{data}</code></li>' );
+} )();
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+        <meta charset="utf-8">
+        <title>Nested widgets &mdash; CKEditor Sample</title>
+        <script src="../../../ckeditor.js"></script>
+        <script src="../../../dev/console/console.js"></script>
+        <script src="../../../dev/console/focusconsole.js"></script>
+        <script src="console.js"></script>
+        <link rel="stylesheet" href="../../../samples/old/sample.css">
+        <link rel="stylesheet" href="../../../contents.css">
+        <link rel="stylesheet" href="assets/simplebox/contents.css">
+</head>
+<body>
+        <h1 class="samples">Nested widgets</h1>
+
+        <h2>Classic (iframe-based) Sample</h2>
+        <textarea cols="80" id="editor1" name="editor1" rows="10">
+                <h1>Simple Box Sample</h1>
+
+                <div class="simplebox align-right" style="width: 60%">
+                        <h2 class="simplebox-title">Title</h2>
+                        <div class="simplebox-content">
+                                <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
+
+                                <figure class="image" style="float: right">
+                                        <img alt="The Eagle" src="assets/sample.jpg" width="150" />
+                                        <figcaption>The Eagle in lunar orbit</figcaption>
+                                </figure>
+
+                                <ul>
+                                        <li>Foo!</li>
+                                        <li>Bar!</li>
+                                </ul>
+
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
+                        </div>
+                </div>
+
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
+
+                <p>Pellentesque vitae eleifend nisl, non accumsan tellus. Maecenas nec libero non tellus tincidunt mollis porttitor sed arcu. Donec ultricies nulla vitae eros lacinia, vel congue sem auctor. Vivamus convallis, urna ac tincidunt malesuada, lectus erat convallis metus, a hendrerit massa augue accumsan magna. Nulla mattis tellus elit, nec congue magna scelerisque eget. Aliquam posuere nisi augue, posuere sodales nisi iaculis eu. Donec fermentum urna id nibh sagittis fermentum sit amet sed enim. Aliquam neque elit, pretium elementum nunc a, faucibus accumsan lorem. Etiam pulvinar odio et hendrerit tincidunt. Suspendisse tempus eros lacus, in convallis velit mollis ut. Aenean congue, justo eleifend ultricies malesuada, nunc nunc molestie mauris, eget placerat libero eros vel nisi. Quisque diam arcu, mollis ac laoreet vitae, varius et sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis in vehicula sapien. Nunc feugiat porta elit nec volutpat.</p>
+
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
+
+                <div class="simplebox align-center" style="width: 750px">
+                        <h2 class="simplebox-title">Title</h2>
+                        <div class="simplebox-content">
+                                <p><img alt="The Eagle" src="assets/sample.jpg" width="150" style="float: left" /><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
+
+                                <ul>
+                                        <li>Foo!</li>
+                                        <li>Bar!</li>
+                                </ul>
+                        </div>
+                </div>
+
+                <p>Ut eget ipsum a sapien porta ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus mi lacus, pharetra eu bibendum blandit, tristique sit amet leo. Integer eu nulla nec magna vulputate blandit. Praesent mattis quis ante eget adipiscing. Nulla vel tempus risus, in placerat velit. Mauris sed nibh at elit posuere laoreet. Morbi non sapien sed nunc fringilla imperdiet.</p>
+        </textarea>
+
+        <h2>Inline Sample</h2>
+        <div id="editor2" contenteditable="true">
+                <h1>Simple Box Sample</h1>
+
+                <div class="simplebox align-right" style="width: 60%">
+                        <h2 class="simplebox-title">Title</h2>
+                        <div class="simplebox-content">
+                                <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
+
+                                <figure class="image" style="float: right">
+                                        <img alt="The Eagle" src="assets/sample.jpg" width="150" />
+                                        <figcaption>The Eagle in lunar orbit</figcaption>
+                                </figure>
+
+                                <ul>
+                                        <li>Foo!</li>
+                                        <li>Bar!</li>
+                                </ul>
+
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
+                        </div>
+                </div>
+
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
+
+                <p>Pellentesque vitae eleifend nisl, non accumsan tellus. Maecenas nec libero non tellus tincidunt mollis porttitor sed arcu. Donec ultricies nulla vitae eros lacinia, vel congue sem auctor. Vivamus convallis, urna ac tincidunt malesuada, lectus erat convallis metus, a hendrerit massa augue accumsan magna. Nulla mattis tellus elit, nec congue magna scelerisque eget. Aliquam posuere nisi augue, posuere sodales nisi iaculis eu. Donec fermentum urna id nibh sagittis fermentum sit amet sed enim. Aliquam neque elit, pretium elementum nunc a, faucibus accumsan lorem. Etiam pulvinar odio et hendrerit tincidunt. Suspendisse tempus eros lacus, in convallis velit mollis ut. Aenean congue, justo eleifend ultricies malesuada, nunc nunc molestie mauris, eget placerat libero eros vel nisi. Quisque diam arcu, mollis ac laoreet vitae, varius et sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis in vehicula sapien. Nunc feugiat porta elit nec volutpat.</p>
+
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci ut nisi adipiscing ultrices. Sed pellentesque iaculis malesuada. Pellentesque scelerisque, purus non porta dictum, neque urna bibendum dolor, eget tristique ipsum metus fringilla dolor. Nullam sed accumsan sapien. Vestibulum in placerat magna. Sed justo lacus, volutpat rhoncus odio luctus, ornare adipiscing mauris. Vivamus erat sem, egestas et lectus eget, varius cursus odio. Duis posuere lacus sit amet urna bibendum, id iaculis eros ultrices. Vestibulum a ultrices ante.</p>
+
+                <div class="simplebox align-center" style="width: 750px">
+                        <h2 class="simplebox-title">Title</h2>
+                        <div class="simplebox-content">
+                                <p><img alt="The Eagle" src="assets/sample.jpg" width="150" style="float: left" /><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
+
+                                <ul>
+                                        <li>Foo!</li>
+                                        <li>Bar!</li>
+                                </ul>
+                        </div>
+                </div>
+
+                <p>Ut eget ipsum a sapien porta ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus mi lacus, pharetra eu bibendum blandit, tristique sit amet leo. Integer eu nulla nec magna vulputate blandit. Praesent mattis quis ante eget adipiscing. Nulla vel tempus risus, in placerat velit. Mauris sed nibh at elit posuere laoreet. Morbi non sapien sed nunc fringilla imperdiet.</p>
+        </div>
+
+        <script>
+                if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
+                        CKEDITOR.tools.enableHtml5Elements( document );
+
+                CKEDITOR.plugins.addExternal( 'simplebox', 'plugins/widget/dev/assets/simplebox/' );
+
+                CKEDITOR.replace( 'editor1', {
+                        extraPlugins: 'simplebox,placeholder,image2',
+                        removePlugins: 'forms,bidi',
+                        contentsCss: [ '../../../contents.css', 'assets/simplebox/contents.css' ],
+                        height: 500
+                } );
+
+                CKEDITOR.inline( 'editor2', {
+                        extraPlugins: 'simplebox,placeholder,image2',
+                        removePlugins: 'forms,bidi'
+                } );
+
+                CKCONSOLE.create( 'widget', { editor: 'editor1' } );
+                CKCONSOLE.create( 'focus', { editor: 'editor1' } );
+                CKCONSOLE.create( 'widget', { editor: 'editor2', folded: true } );
+                CKCONSOLE.create( 'focus', { editor: 'editor2', folded: true } );
+
+        </script>
+</body>
+</html>
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+-->
+<html>
+<head>
+        <meta charset="utf-8">
+        <title>Applying styles to widgets &mdash; CKEditor Sample</title>
+        <script src="../../../ckeditor.js"></script>
+        <link rel="stylesheet" href="../../../samples/old/sample.css">
+        <link rel="stylesheet" href="../../../contents.css">
+        <link rel="stylesheet" href="assets/contents.css">
+</head>
+<body>
+        <h1 class="samples">Applying styles to widgets</h1>
+
+        <h2>Classic (iframe-based) Sample</h2>
+        <textarea cols="80" id="editor1" name="editor1" rows="10">
+                <h1>Apollo 11</h1>
+
+                <figure class="image" style="float: right">
+                        <img alt="Saturn V" src="../../../samples/assets/sample.jpg" width="150" />
+                        <figcaption>Roll out of Saturn V on launch pad</figcaption>
+                </figure>
+
+                <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
+
+                <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
+
+                <h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2>
+
+                <p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
+
+                <blockquote>
+                <p>One small step for [a] man, one giant leap for mankind.</p>
+                </blockquote>
+
+                <p><span class="math-tex">\( \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \)</span></p>
+
+                <p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p>
+
+                <blockquote>
+                <p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
+                </blockquote>
+
+                <figure class="image" style="float: right">
+                        <img alt="The Eagle" src="../../../samples/assets/sample.jpg" width="150" />
+                        <figcaption>The Eagle in lunar orbit</figcaption>
+                </figure>
+
+                <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
+
+                <p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p>
+
+                <ol>
+                        <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
+                        <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
+                        <li><strong>Lunar Module</strong> for landing on the Moon.</li>
+                </ol>
+
+                <p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
+        </textarea>
+
+        <h2>Inline Sample</h2>
+        <div id="editor2" contenteditable="true">
+                <h1>Apollo 11</h1>
+
+                <figure class="image" style="float: right">
+                        <img alt="Saturn V" src="../../../samples/assets/sample.jpg" width="150" />
+                        <figcaption>Roll out of Saturn V on launch pad</figcaption>
+                </figure>
+
+                <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on [[July 20, 1969, at 20:18 UTC]]. Armstrong became the first to step onto the lunar surface 6 hours later on [[July 21 at 02:56 UTC]].</p>
+
+                <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
+
+                <h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2>
+
+                <p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
+
+                <blockquote>
+                <p>One small step for [a] man, one giant leap for mankind.</p>
+                </blockquote>
+
+                <p><span class="math-tex">\( \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \)</span></p>
+
+                <p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p>
+
+                <blockquote>
+                <p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
+                </blockquote>
+
+                <figure class="image" style="float: right">
+                        <img alt="The Eagle" src="../../../samples/assets/sample.jpg" width="150" />
+                        <figcaption>The Eagle in lunar orbit</figcaption>
+                </figure>
+
+                <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
+
+                <p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p>
+
+                <ol>
+                        <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
+                        <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
+                        <li><strong>Lunar Module</strong> for landing on the Moon.</li>
+                </ol>
+
+                <p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
+        </div>
+
+        <script>
+                if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
+                        CKEDITOR.tools.enableHtml5Elements( document );
+
+                CKEDITOR.disableAutoInline = true;
+
+                var stylesSet = [
+                        { name: 'Medium border', type: 'widget', widget: 'image', attributes: { 'class': 'mediumBorder' } },
+                        { name: 'Thick border', type: 'widget', widget: 'image', attributes: { 'class': 'thickBorder' } },
+                        { name: 'So important', type: 'widget', widget: 'image', attributes: { 'class': 'important soMuch' } },
+
+                        { name: 'Red marker', type: 'widget', widget: 'placeholder', attributes: { 'class': 'redMarker' } },
+                        { name: 'Invisible Placeholder', type: 'widget', widget: 'placeholder', attributes: { 'class': 'invisible' } },
+
+                        { name: 'Invisible Mathjax', type: 'widget', widget: 'mathjax', attributes: { 'class': 'invisible' } }
+                ];
+
+                CKEDITOR.replace( 'editor1', {
+                        extraPlugins: 'placeholder,image2,mathjax',
+                        contentsCss: [ '../../../contents.css', 'assets/contents.css' ],
+                        stylesSet: stylesSet,
+                        height: 300
+                } );
+
+                CKEDITOR.inline( 'editor2', {
+                        extraPlugins: 'placeholder,image2,mathjax',
+                        stylesSet: stylesSet,
+                        height: 300
+                } );
+
+        </script>
+</body>
+</html>
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'af', {
+        'move': 'Klik en trek on te beweeg',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'ar', {
+        'move': 'إضغط و إسحب للتحريك',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'az', {
+        'move': 'Tıklayın və aparın',
+        'label': '%1 vidjet'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'bg', {
+        'move': 'Кликни и влачи, за да преместиш',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'ca', {
+        'move': 'Clicar i arrossegar per moure',
+        'label': '%1 widget'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'cs', {
+        'move': 'Klepněte a táhněte pro přesunutí',
+        'label': 'Ovládací prvek %1'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'cy', {
+        'move': 'Clcio a llusgo i symud',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'da', {
+        'move': 'Klik og træk for at flytte',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'de-ch', {
+        'move': 'Zum Verschieben anwählen und ziehen',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'de', {
+        'move': 'Zum Verschieben anwählen und ziehen',
+        'label': '%1 Steuerelement'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'el', {
+        'move': 'Κάνετε κλικ και σύρετε το ποντίκι για να μετακινήστε',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'en-gb', {
+        'move': 'Click and drag to move',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'en', {
+        'move': 'Click and drag to move',
+        'label': '%1 widget'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'eo', {
+        'move': 'klaki kaj treni por movi',
+        'label': '%1 fenestraĵo'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'es-mx', {
+        'move': 'Presiona y arrastra para mover',
+        'label': '%1 widget'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'es', {
+        'move': 'Dar clic y arrastrar para mover',
+        'label': 'reproductor %1'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'eu', {
+        'move': 'Klikatu eta arrastatu lekuz aldatzeko',
+        'label': '%1 widget'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'fa', {
+        'move': 'کلیک و کشیدن برای جابجایی',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'fi', {
+        'move': 'Siirrä klikkaamalla ja raahaamalla',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'fr', {
+        'move': 'Cliquer et glisser pour déplacer',
+        'label': 'Élément %1'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'gl', {
+        'move': 'Prema e arrastre para mover',
+        'label': 'Trebello %1'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'he', {
+        'move': 'לחץ וגרור להזזה',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'hr', {
+        'move': 'Klikni i povuci za pomicanje',
+        'label': '%1 widget'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'hu', {
+        'move': 'Kattints és húzd a mozgatáshoz',
+        'label': '%1 modul'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'id', {
+        'move': 'Tekan dan geser untuk memindahkan',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'it', {
+        'move': 'Fare clic e trascinare per spostare',
+        'label': 'Widget %1'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'ja', {
+        'move': 'ドラッグして移動',
+        'label': '%1 ウィジェット'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'km', {
+        'move': 'ចុច​ហើយ​ទាញ​ដើម្បី​ផ្លាស់​ទី',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'ko', {
+        'move': '움직이려면 클릭 후 드래그 하세요',
+        'label': '%1 위젯'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'ku', {
+        'move': 'کرتەبکە و ڕایبکێشە بۆ جوڵاندن',
+        'label': '%1 ویجێت'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'lv', {
+        'move': 'Klikšķina un velc, lai pārvietotu',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'nb', {
+        'move': 'Klikk og dra for å flytte',
+        'label': 'Widget %1'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'nl', {
+        'move': 'Klik en sleep om te verplaatsen',
+        'label': '%1 widget'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'no', {
+        'move': 'Klikk og dra for å flytte',
+        'label': 'Widget %1'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'oc', {
+        'move': 'Clicar e lisar per desplaçar',
+        'label': 'Element %1'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'pl', {
+        'move': 'Kliknij i przeciągnij, by przenieść.',
+        'label': 'Widget %1'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'pt-br', {
+        'move': 'Click e arraste para mover',
+        'label': '%1 widget'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'pt', {
+        'move': 'Clique e arraste para mover',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'ru', {
+        'move': 'Нажмите и перетащите, чтобы переместить',
+        'label': '%1 виджет'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'sk', {
+        'move': 'Kliknite a potiahnite pre presunutie',
+        'label': '%1 widget'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'sl', {
+        'move': 'Kliknite in povlecite, da premaknete',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'sq', {
+        'move': 'Kliko dhe tërhiqe për ta lëvizur',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'sv', {
+        'move': 'Klicka och drag för att flytta',
+        'label': '%1-widget'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'tr', {
+        'move': 'Taşımak için, tıklayın ve sürükleyin',
+        'label': '%1 Grafik Beleşeni'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'tt', {
+        'move': 'Күчереп куер өчен басып шудырыгыз',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'ug', {
+        'move': 'يۆتكەشتە چېكىپ سۆرەڭ',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'uk', {
+        'move': 'Клікніть і потягніть для переміщення',
+        'label': '%1 віджет'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'vi', {
+        'move': 'Nhấp chuột và kéo để di chuyển',
+        'label': '%1 widget' // MISSING
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'zh-cn', {
+        'move': '点击并拖拽以移动',
+        'label': '%1 小部件'
+} );
@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'widget', 'zh', {
+        'move': '拖曳以移動',
+        'label': '%1 小工具'
+} );
@@ -0,0 +1,4126 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+/**
+ * @fileOverview [Widget](http://ckeditor.com/addon/widget) plugin.
+ */
+
+'use strict';
+
+( function() {
+        var DRAG_HANDLER_SIZE = 15;
+
+        CKEDITOR.plugins.add( 'widget', {
+                // jscs:disable maximumLineLength
+                lang: 'af,ar,az,bg,ca,cs,cy,da,de,de-ch,el,en,en-gb,eo,es,es-mx,eu,fa,fi,fr,gl,he,hr,hu,id,it,ja,km,ko,ku,lv,nb,nl,no,oc,pl,pt,pt-br,ru,sk,sl,sq,sv,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
+                // jscs:enable maximumLineLength
+                requires: 'lineutils,clipboard,widgetselection',
+                onLoad: function() {
+                        CKEDITOR.addCss(
+                                '.cke_widget_wrapper{' +
+                                        'position:relative;' +
+                                        'outline:none' +
+                                '}' +
+                                '.cke_widget_inline{' +
+                                        'display:inline-block' +
+                                '}' +
+                                '.cke_widget_wrapper:hover>.cke_widget_element{' +
+                                        'outline:2px solid yellow;' +
+                                        'cursor:default' +
+                                '}' +
+                                '.cke_widget_wrapper:hover .cke_widget_editable{' +
+                                        'outline:2px solid yellow' +
+                                '}' +
+                                '.cke_widget_wrapper.cke_widget_focused>.cke_widget_element,' +
+                                // We need higher specificity than hover style.
+                                '.cke_widget_wrapper .cke_widget_editable.cke_widget_editable_focused{' +
+                                        'outline:2px solid #ace' +
+                                '}' +
+                                '.cke_widget_editable{' +
+                                        'cursor:text' +
+                                '}' +
+                                '.cke_widget_drag_handler_container{' +
+                                        'position:absolute;' +
+                                        'width:' + DRAG_HANDLER_SIZE + 'px;' +
+                                        'height:0;' +
+                                        // Initially drag handler should not be visible, until its position will be
+                                        // calculated (http://dev.ckeditor.com/ticket/11177).
+                                        // We need to hide unpositined handlers, so they don't extend
+                                        // widget's outline far to the left (http://dev.ckeditor.com/ticket/12024).
+                                        'display:none;' +
+                                        'opacity:0.75;' +
+                                        'transition:height 0s 0.2s;' + // Delay hiding drag handler.
+                                        // Prevent drag handler from being misplaced (http://dev.ckeditor.com/ticket/11198).
+                                        'line-height:0' +
+                                '}' +
+                                '.cke_widget_wrapper:hover>.cke_widget_drag_handler_container{' +
+                                        'height:' + DRAG_HANDLER_SIZE + 'px;' +
+                                        'transition:none' +
+                                '}' +
+                                '.cke_widget_drag_handler_container:hover{' +
+                                        'opacity:1' +
+                                '}' +
+                                'img.cke_widget_drag_handler{' +
+                                        'cursor:move;' +
+                                        'width:' + DRAG_HANDLER_SIZE + 'px;' +
+                                        'height:' + DRAG_HANDLER_SIZE + 'px;' +
+                                        'display:inline-block' +
+                                '}' +
+                                '.cke_widget_mask{' +
+                                        'position:absolute;' +
+                                        'top:0;' +
+                                        'left:0;' +
+                                        'width:100%;' +
+                                        'height:100%;' +
+                                        'display:block' +
+                                '}' +
+                                '.cke_editable.cke_widget_dragging, .cke_editable.cke_widget_dragging *{' +
+                                        'cursor:move !important' +
+                                '}'
+                        );
+                },
+
+                beforeInit: function( editor ) {
+                        /**
+                         * An instance of widget repository. It contains all
+                         * {@link CKEDITOR.plugins.widget.repository#registered registered widget definitions} and
+                         * {@link CKEDITOR.plugins.widget.repository#instances initialized instances}.
+                         *
+                         *              editor.widgets.add( 'someName', {
+                         *                      // Widget definition...
+                         *              } );
+                         *
+                         *              editor.widgets.registered.someName; // -> Widget definition
+                         *
+                         * @since 4.3
+                         * @readonly
+                         * @property {CKEDITOR.plugins.widget.repository} widgets
+                         * @member CKEDITOR.editor
+                         */
+                        editor.widgets = new Repository( editor );
+                },
+
+                afterInit: function( editor ) {
+                        addWidgetButtons( editor );
+                        setupContextMenu( editor );
+                }
+        } );
+
+        /**
+         * Widget repository. It keeps track of all {@link #registered registered widget definitions} and
+         * {@link #instances initialized instances}. An instance of the repository is available under
+         * the {@link CKEDITOR.editor#widgets} property.
+         *
+         * @class CKEDITOR.plugins.widget.repository
+         * @mixins CKEDITOR.event
+         * @constructor Creates a widget repository instance. Note that the widget plugin automatically
+         * creates a repository instance which is available under the {@link CKEDITOR.editor#widgets} property.
+         * @param {CKEDITOR.editor} editor The editor instance for which the repository will be created.
+         */
+        function Repository( editor ) {
+                /**
+                 * The editor instance for which this repository was created.
+                 *
+                 * @readonly
+                 * @property {CKEDITOR.editor} editor
+                 */
+                this.editor = editor;
+
+                /**
+                 * A hash of registered widget definitions (definition name => {@link CKEDITOR.plugins.widget.definition}).
+                 *
+                 * To register a definition use the {@link #add} method.
+                 *
+                 * @readonly
+                 */
+                this.registered = {};
+
+                /**
+                 * An object containing initialized widget instances (widget id => {@link CKEDITOR.plugins.widget}).
+                 *
+                 * @readonly
+                 */
+                this.instances = {};
+
+                /**
+                 * An array of selected widget instances.
+                 *
+                 * @readonly
+                 * @property {CKEDITOR.plugins.widget[]} selected
+                 */
+                this.selected = [];
+
+                /**
+                 * The focused widget instance. See also {@link CKEDITOR.plugins.widget#event-focus}
+                 * and {@link CKEDITOR.plugins.widget#event-blur} events.
+                 *
+                 *              editor.on( 'selectionChange', function() {
+                 *                      if ( editor.widgets.focused ) {
+                 *                              // Do something when a widget is focused...
+                 *                      }
+                 *              } );
+                 *
+                 * @readonly
+                 * @property {CKEDITOR.plugins.widget} focused
+                 */
+                this.focused = null;
+
+                /**
+                 * The widget instance that contains the nested editable which is currently focused.
+                 *
+                 * @readonly
+                 * @property {CKEDITOR.plugins.widget} widgetHoldingFocusedEditable
+                 */
+                this.widgetHoldingFocusedEditable = null;
+
+                this._ = {
+                        nextId: 0,
+                        upcasts: [],
+                        upcastCallbacks: [],
+                        filters: {}
+                };
+
+                setupWidgetsLifecycle( this );
+                setupSelectionObserver( this );
+                setupMouseObserver( this );
+                setupKeyboardObserver( this );
+                setupDragAndDrop( this );
+                setupNativeCutAndCopy( this );
+        }
+
+        Repository.prototype = {
+                /**
+                 * Minimum interval between selection checks.
+                 *
+                 * @private
+                 */
+                MIN_SELECTION_CHECK_INTERVAL: 500,
+
+                /**
+                 * Adds a widget definition to the repository. Fires the {@link CKEDITOR.editor#widgetDefinition} event
+                 * which allows to modify the widget definition which is going to be registered.
+                 *
+                 * @param {String} name The name of the widget definition.
+                 * @param {CKEDITOR.plugins.widget.definition} widgetDef Widget definition.
+                 * @returns {CKEDITOR.plugins.widget.definition}
+                 */
+                add: function( name, widgetDef ) {
+                        // Create prototyped copy of original widget definition, so we won't modify it.
+                        widgetDef = CKEDITOR.tools.prototypedCopy( widgetDef );
+                        widgetDef.name = name;
+
+                        widgetDef._ = widgetDef._ || {};
+
+                        this.editor.fire( 'widgetDefinition', widgetDef );
+
+                        if ( widgetDef.template )
+                                widgetDef.template = new CKEDITOR.template( widgetDef.template );
+
+                        addWidgetCommand( this.editor, widgetDef );
+                        addWidgetProcessors( this, widgetDef );
+
+                        this.registered[ name ] = widgetDef;
+
+                        return widgetDef;
+                },
+
+                /**
+                 * Adds a callback for element upcasting. Each callback will be executed
+                 * for every element which is later tested by upcast methods. If a callback
+                 * returns `false`, the element will not be upcasted.
+                 *
+                 *              // Images with the "banner" class will not be upcasted (e.g. to the image widget).
+                 *              editor.widgets.addUpcastCallback( function( element ) {
+                 *                      if ( element.name == 'img' && element.hasClass( 'banner' ) )
+                 *                              return false;
+                 *              } );
+                 *
+                 * @param {Function} callback
+                 * @param {CKEDITOR.htmlParser.element} callback.element
+                 */
+                addUpcastCallback: function( callback ) {
+                        this._.upcastCallbacks.push( callback );
+                },
+
+                /**
+                 * Checks the selection to update widget states (selection and focus).
+                 *
+                 * This method is triggered by the {@link #event-checkSelection} event.
+                 */
+                checkSelection: function() {
+                        var sel = this.editor.getSelection(),
+                                selectedElement = sel.getSelectedElement(),
+                                updater = stateUpdater( this ),
+                                widget;
+
+                        // Widget is focused so commit and finish checking.
+                        if ( selectedElement && ( widget = this.getByElement( selectedElement, true ) ) )
+                                return updater.focus( widget ).select( widget ).commit();
+
+                        var range = sel.getRanges()[ 0 ];
+
+                        // No ranges or collapsed range mean that nothing is selected, so commit and finish checking.
+                        if ( !range || range.collapsed )
+                                return updater.commit();
+
+                        // Range is not empty, so create walker checking for wrappers.
+                        var walker = new CKEDITOR.dom.walker( range ),
+                                wrapper;
+
+                        walker.evaluator = Widget.isDomWidgetWrapper;
+
+                        while ( ( wrapper = walker.next() ) )
+                                updater.select( this.getByElement( wrapper ) );
+
+                        updater.commit();
+                },
+
+                /**
+                 * Checks if all widget instances are still present in the DOM.
+                 * Destroys those instances that are not present.
+                 * Reinitializes widgets on widget wrappers for which widget instances
+                 * cannot be found. Takes nested widgets into account, too.
+                 *
+                 * This method triggers the {@link #event-checkWidgets} event whose listeners
+                 * can cancel the method's execution or modify its options.
+                 *
+                 * @param [options] The options object.
+                 * @param {Boolean} [options.initOnlyNew] Initializes widgets only on newly wrapped
+                 * widget elements (those which still have the `cke_widget_new` class). When this option is
+                 * set to `true`, widgets which were invalidated (e.g. by replacing with a cloned DOM structure)
+                 * will not be reinitialized. This makes the check faster.
+                 * @param {Boolean} [options.focusInited] If only one widget is initialized by
+                 * the method, it will be focused.
+                 */
+                checkWidgets: function( options ) {
+                        this.fire( 'checkWidgets', CKEDITOR.tools.copy( options || {} ) );
+                },
+
+                /**
+                 * Removes the widget from the editor and moves the selection to the closest
+                 * editable position if the widget was focused before.
+                 *
+                 * @param {CKEDITOR.plugins.widget} widget The widget instance to be deleted.
+                 */
+                del: function( widget ) {
+                        if ( this.focused === widget ) {
+                                var editor = widget.editor,
+                                        range = editor.createRange(),
+                                        found;
+
+                                // If haven't found place for caret on the default side,
+                                // try to find it on the other side.
+                                if ( !( found = range.moveToClosestEditablePosition( widget.wrapper, true ) ) )
+                                        found = range.moveToClosestEditablePosition( widget.wrapper, false );
+
+                                if ( found )
+                                        editor.getSelection().selectRanges( [ range ] );
+                        }
+
+                        widget.wrapper.remove();
+                        this.destroy( widget, true );
+                },
+
+                /**
+                 * Destroys the widget instance and all its nested widgets (widgets inside its nested editables).
+                 *
+                 * @param {CKEDITOR.plugins.widget} widget The widget instance to be destroyed.
+                 * @param {Boolean} [offline] Whether the widget is offline (detached from the DOM tree) &mdash;
+                 * in this case the DOM (attributes, classes, etc.) will not be cleaned up.
+                 */
+                destroy: function( widget, offline ) {
+                        if ( this.widgetHoldingFocusedEditable === widget )
+                                setFocusedEditable( this, widget, null, offline );
+
+                        widget.destroy( offline );
+                        delete this.instances[ widget.id ];
+                        this.fire( 'instanceDestroyed', widget );
+                },
+
+                /**
+                 * Destroys all widget instances.
+                 *
+                 * @param {Boolean} [offline] Whether the widgets are offline (detached from the DOM tree) &mdash;
+                 * in this case the DOM (attributes, classes, etc.) will not be cleaned up.
+                 * @param {CKEDITOR.dom.element} [container] The container within widgets will be destroyed.
+                 * This option will be ignored if the `offline` flag was set to `true`, because in such case
+                 * it is not possible to find widgets within the passed block.
+                 */
+                destroyAll: function( offline, container ) {
+                        var widget,
+                                id,
+                                instances = this.instances;
+
+                        if ( container && !offline ) {
+                                var wrappers = container.find( '.cke_widget_wrapper' ),
+                                        l = wrappers.count(),
+                                        i = 0;
+
+                                // Length is constant, because this is not a live node list.
+                                // Note: since querySelectorAll returns nodes in document order,
+                                // outer widgets are always placed before their nested widgets and therefore
+                                // are destroyed before them.
+                                for ( ; i < l; ++i ) {
+                                        widget = this.getByElement( wrappers.getItem( i ), true );
+                                        // Widget might not be found, because it could be a nested widget,
+                                        // which would be destroyed when destroying its parent.
+                                        if ( widget )
+                                                this.destroy( widget );
+                                }
+
+                                return;
+                        }
+
+                        for ( id in instances ) {
+                                widget = instances[ id ];
+                                this.destroy( widget, offline );
+                        }
+                },
+
+                /**
+                 * Finalizes a process of widget creation. This includes:
+                 *
+                 * * inserting widget element into editor,
+                 * * marking widget instance as ready (see {@link CKEDITOR.plugins.widget#event-ready}),
+                 * * focusing widget instance.
+                 *
+                 * This method is used by the default widget's command and is called
+                 * after widget's dialog (if set) is closed. It may also be used in a
+                 * customized process of widget creation and insertion.
+                 *
+                 *              widget.once( 'edit', function() {
+                 *                      // Finalize creation only of not ready widgets.
+                 *                      if ( widget.isReady() )
+                 *                              return;
+                 *
+                 *                      // Cancel edit event to prevent automatic widget insertion.
+                 *                      evt.cancel();
+                 *
+                 *                      CustomDialog.open( widget.data, function saveCallback( savedData ) {
+                 *                              // Cache the container, because widget may be destroyed while saving data,
+                 *                              // if this process will require some deep transformations.
+                 *                              var container = widget.wrapper.getParent();
+                 *
+                 *                              widget.setData( savedData );
+                 *
+                 *                              // Widget will be retrieved from container and inserted into editor.
+                 *                              editor.widgets.finalizeCreation( container );
+                 *                      } );
+                 *              } );
+                 *
+                 * @param {CKEDITOR.dom.element/CKEDITOR.dom.documentFragment} container The element
+                 * or document fragment which contains widget wrapper. The container is used, so before
+                 * finalizing creation the widget can be freely transformed (even destroyed and reinitialized).
+                 */
+                finalizeCreation: function( container ) {
+                        var wrapper = container.getFirst();
+                        if ( wrapper && Widget.isDomWidgetWrapper( wrapper ) ) {
+                                this.editor.insertElement( wrapper );
+
+                                var widget = this.getByElement( wrapper );
+                                // Fire postponed #ready event.
+                                widget.ready = true;
+                                widget.fire( 'ready' );
+                                widget.focus();
+                        }
+                },
+
+                /**
+                 * Finds a widget instance which contains a given element. The element will be the {@link CKEDITOR.plugins.widget#wrapper wrapper}
+                 * of the returned widget or a descendant of this {@link CKEDITOR.plugins.widget#wrapper wrapper}.
+                 *
+                 *              editor.widgets.getByElement( someWidget.wrapper ); // -> someWidget
+                 *              editor.widgets.getByElement( someWidget.parts.caption ); // -> someWidget
+                 *
+                 *              // Check wrapper only:
+                 *              editor.widgets.getByElement( someWidget.wrapper, true ); // -> someWidget
+                 *              editor.widgets.getByElement( someWidget.parts.caption, true ); // -> null
+                 *
+                 * @param {CKEDITOR.dom.element} element The element to be checked.
+                 * @param {Boolean} [checkWrapperOnly] If set to `true`, the method will not check wrappers' descendants.
+                 * @returns {CKEDITOR.plugins.widget} The widget instance or `null`.
+                 */
+                getByElement: ( function() {
+                        var validWrapperElements = { div: 1, span: 1 };
+                        function getWidgetId( element ) {
+                                return element.is( validWrapperElements ) && element.data( 'cke-widget-id' );
+                        }
+
+                        return function( element, checkWrapperOnly ) {
+                                if ( !element )
+                                        return null;
+
+                                var id = getWidgetId( element );
+
+                                // There's no need to check element parents if element is a wrapper.
+                                if ( !checkWrapperOnly && !id ) {
+                                        var limit = this.editor.editable();
+
+                                        // Try to find a closest ascendant which is a widget wrapper.
+                                        do {
+                                                element = element.getParent();
+                                        } while ( element && !element.equals( limit ) && !( id = getWidgetId( element ) ) );
+                                }
+
+                                return this.instances[ id ] || null;
+                        };
+                } )(),
+
+                /**
+                 * Initializes a widget on a given element if the widget has not been initialized on it yet.
+                 *
+                 * @param {CKEDITOR.dom.element} element The future widget element.
+                 * @param {String/CKEDITOR.plugins.widget.definition} [widgetDef] Name of a widget or a widget definition.
+                 * The widget definition should be previously registered by using the
+                 * {@link CKEDITOR.plugins.widget.repository#add} method.
+                 * @param [startupData] Widget startup data (has precedence over default one).
+                 * @returns {CKEDITOR.plugins.widget} The widget instance or `null` if a widget could not be initialized on
+                 * a given element.
+                 */
+                initOn: function( element, widgetDef, startupData ) {
+                        if ( !widgetDef )
+                                widgetDef = this.registered[ element.data( 'widget' ) ];
+                        else if ( typeof widgetDef == 'string' )
+                                widgetDef = this.registered[ widgetDef ];
+
+                        if ( !widgetDef )
+                                return null;
+
+                        // Wrap element if still wasn't wrapped (was added during runtime by method that skips dataProcessor).
+                        var wrapper = this.wrapElement( element, widgetDef.name );
+
+                        if ( wrapper ) {
+                                // Check if widget wrapper is new (widget hasn't been initialized on it yet).
+                                // This class will be removed by widget constructor to avoid locking snapshot twice.
+                                if ( wrapper.hasClass( 'cke_widget_new' ) ) {
+                                        var widget = new Widget( this, this._.nextId++, element, widgetDef, startupData );
+
+                                        // Widget could be destroyed when initializing it.
+                                        if ( widget.isInited() ) {
+                                                this.instances[ widget.id ] = widget;
+
+                                                return widget;
+                                        } else {
+                                                return null;
+                                        }
+                                }
+
+                                // Widget already has been initialized, so try to get widget by element.
+                                // Note - it may happen that other instance will returned than the one created above,
+                                // if for example widget was destroyed and reinitialized.
+                                return this.getByElement( element );
+                        }
+
+                        // No wrapper means that there's no widget for this element.
+                        return null;
+                },
+
+                /**
+                 * Initializes widgets on all elements which were wrapped by {@link #wrapElement} and
+                 * have not been initialized yet.
+                 *
+                 * @param {CKEDITOR.dom.element} [container=editor.editable()] The container which will be checked for not
+                 * initialized widgets. Defaults to editor's {@link CKEDITOR.editor#editable editable} element.
+                 * @returns {CKEDITOR.plugins.widget[]} Array of widget instances which have been initialized.
+                 * Note: Only first-level widgets are returned &mdash; without nested widgets.
+                 */
+                initOnAll: function( container ) {
+                        var newWidgets = ( container || this.editor.editable() ).find( '.cke_widget_new' ),
+                                newInstances = [],
+                                instance;
+
+                        for ( var i = newWidgets.count(); i--; ) {
+                                instance = this.initOn( newWidgets.getItem( i ).getFirst( Widget.isDomWidgetElement ) );
+                                if ( instance )
+                                        newInstances.push( instance );
+                        }
+
+                        return newInstances;
+                },
+
+                /**
+                 * Allows to listen to events on specific types of widgets, even if they are not created yet.
+                 *
+                 * Please note that this method inherits parameters from the {@link CKEDITOR.event#method-on} method with one
+                 * extra parameter at the beginning which is the widget name.
+                 *
+                 *              editor.widgets.onWidget( 'image', 'action', function( evt ) {
+                 *                      // Event `action` occurs on `image` widget.
+                 *              } );
+                 *
+                 * @since 4.5
+                 * @param {String} widgetName
+                 * @param {String} eventName
+                 * @param {Function} listenerFunction
+                 * @param {Object} [scopeObj]
+                 * @param {Object} [listenerData]
+                 * @param {Number} [priority=10]
+                 */
+                onWidget: function( widgetName ) {
+                        var args = Array.prototype.slice.call( arguments );
+
+                        args.shift();
+
+                        for ( var i in this.instances ) {
+                                var instance = this.instances[ i ];
+
+                                if ( instance.name == widgetName ) {
+                                        instance.on.apply( instance, args );
+                                }
+                        }
+
+                        this.on( 'instanceCreated', function( evt ) {
+                                var widget = evt.data;
+
+                                if ( widget.name == widgetName ) {
+                                        widget.on.apply( widget, args );
+                                }
+                        } );
+                },
+
+                /**
+                 * Parses element classes string and returns an object
+                 * whose keys contain class names. Skips all `cke_*` classes.
+                 *
+                 * This method is used by the {@link CKEDITOR.plugins.widget#getClasses} method and
+                 * may be used when overriding that method.
+                 *
+                 * @since 4.4
+                 * @param {String} classes String (value of `class` attribute).
+                 * @returns {Object} Object containing classes or `null` if no classes found.
+                 */
+                parseElementClasses: function( classes ) {
+                        if ( !classes )
+                                return null;
+
+                        classes = CKEDITOR.tools.trim( classes ).split( /\s+/ );
+
+                        var cl,
+                                obj = {},
+                                hasClasses = 0;
+
+                        while ( ( cl = classes.pop() ) ) {
+                                if ( cl.indexOf( 'cke_' ) == -1 )
+                                        obj[ cl ] = hasClasses = 1;
+                        }
+
+                        return hasClasses ? obj : null;
+                },
+
+                /**
+                 * Wraps an element with a widget's non-editable container.
+                 *
+                 * If this method is called on an {@link CKEDITOR.htmlParser.element}, then it will
+                 * also take care of fixing the DOM after wrapping (the wrapper may not be allowed in element's parent).
+                 *
+                 * @param {CKEDITOR.dom.element/CKEDITOR.htmlParser.element} element The widget element to be wrapped.
+                 * @param {String} [widgetName] The name of the widget definition. Defaults to element's `data-widget`
+                 * attribute value.
+                 * @returns {CKEDITOR.dom.element/CKEDITOR.htmlParser.element} The wrapper element or `null` if
+                 * the widget definition of this name is not registered.
+                 */
+                wrapElement: function( element, widgetName ) {
+                        var wrapper = null,
+                                widgetDef,
+                                isInline;
+
+                        if ( element instanceof CKEDITOR.dom.element ) {
+                                widgetName = widgetName || element.data( 'widget' );
+                                widgetDef = this.registered[ widgetName ];
+
+                                if ( !widgetDef )
+                                        return null;
+
+                                // Do not wrap already wrapped element.
+                                wrapper = element.getParent();
+                                if ( wrapper && wrapper.type == CKEDITOR.NODE_ELEMENT && wrapper.data( 'cke-widget-wrapper' ) )
+                                        return wrapper;
+
+                                // If attribute isn't already set (e.g. for pasted widget), set it.
+                                if ( !element.hasAttribute( 'data-cke-widget-keep-attr' ) )
+                                        element.data( 'cke-widget-keep-attr', element.data( 'widget' ) ? 1 : 0 );
+
+                                element.data( 'widget', widgetName );
+
+                                isInline = isWidgetInline( widgetDef, element.getName() );
+
+                                wrapper = new CKEDITOR.dom.element( isInline ? 'span' : 'div' );
+                                wrapper.setAttributes( getWrapperAttributes( isInline, widgetName ) );
+
+                                wrapper.data( 'cke-display-name', widgetDef.pathName ? widgetDef.pathName : element.getName() );
+
+                                // Replace element unless it is a detached one.
+                                if ( element.getParent( true ) )
+                                        wrapper.replace( element );
+                                element.appendTo( wrapper );
+                        }
+                        else if ( element instanceof CKEDITOR.htmlParser.element ) {
+                                widgetName = widgetName || element.attributes[ 'data-widget' ];
+                                widgetDef = this.registered[ widgetName ];
+
+                                if ( !widgetDef )
+                                        return null;
+
+                                wrapper = element.parent;
+                                if ( wrapper && wrapper.type == CKEDITOR.NODE_ELEMENT && wrapper.attributes[ 'data-cke-widget-wrapper' ] )
+                                        return wrapper;
+
+                                // If attribute isn't already set (e.g. for pasted widget), set it.
+                                if ( !( 'data-cke-widget-keep-attr' in element.attributes ) )
+                                        element.attributes[ 'data-cke-widget-keep-attr' ] = element.attributes[ 'data-widget' ] ? 1 : 0;
+                                if ( widgetName )
+                                        element.attributes[ 'data-widget' ] = widgetName;
+
+                                isInline = isWidgetInline( widgetDef, element.name );
+
+                                wrapper = new CKEDITOR.htmlParser.element( isInline ? 'span' : 'div', getWrapperAttributes( isInline, widgetName ) );
+                                wrapper.attributes[ 'data-cke-display-name' ] = widgetDef.pathName ? widgetDef.pathName : element.name;
+
+                                var parent = element.parent,
+                                        index;
+
+                                // Don't detach already detached element.
+                                if ( parent ) {
+                                        index = element.getIndex();
+                                        element.remove();
+                                }
+
+                                wrapper.add( element );
+
+                                // Insert wrapper fixing DOM (splitting parents if wrapper is not allowed inside them).
+                                parent && insertElement( parent, index, wrapper );
+                        }
+
+                        return wrapper;
+                },
+
+                // Expose for tests.
+                _tests_createEditableFilter: createEditableFilter
+        };
+
+        CKEDITOR.event.implementOn( Repository.prototype );
+
+        /**
+         * An event fired when a widget instance is created, but before it is fully initialized.
+         *
+         * @event instanceCreated
+         * @param {CKEDITOR.plugins.widget} data The widget instance.
+         */
+
+        /**
+         * An event fired when a widget instance was destroyed.
+         *
+         * See also {@link CKEDITOR.plugins.widget#event-destroy}.
+         *
+         * @event instanceDestroyed
+         * @param {CKEDITOR.plugins.widget} data The widget instance.
+         */
+
+        /**
+         * An event fired to trigger the selection check.
+         *
+         * See the {@link #method-checkSelection} method.
+         *
+         * @event checkSelection
+         */
+
+        /**
+         * An event fired by the the {@link #method-checkWidgets} method.
+         *
+         * It can be canceled in order to stop the {@link #method-checkWidgets}
+         * method execution or the event listener can modify the method's options.
+         *
+         * @event checkWidgets
+         * @param [data]
+         * @param {Boolean} [data.initOnlyNew] Initialize widgets only on newly wrapped
+         * widget elements (those which still have the `cke_widget_new` class). When this option is
+         * set to `true`, widgets which were invalidated (e.g. by replacing with a cloned DOM structure)
+         * will not be reinitialized. This makes the check faster.
+         * @param {Boolean} [data.focusInited] If only one widget is initialized by
+         * the method, it will be focused.
+         */
+
+
+        /**
+         * An instance of a widget. Together with {@link CKEDITOR.plugins.widget.repository} these
+         * two classes constitute the core of the Widget System.
+         *
+         * Note that neither the repository nor the widget instances can be created by using their constructors.
+         * A repository instance is automatically set up by the Widget plugin and is accessible under
+         * {@link CKEDITOR.editor#widgets}, while widget instances are created and destroyed by the repository.
+         *
+         * To create a widget, first you need to {@link CKEDITOR.plugins.widget.repository#add register} its
+         * {@link CKEDITOR.plugins.widget.definition definition}:
+         *
+         *              editor.widgets.add( 'simplebox', {
+         *                      upcast: function( element ) {
+         *                              // Defines which elements will become widgets.
+         *                              if ( element.hasClass( 'simplebox' ) )
+         *                                      return true;
+         *                      },
+         *                      init: function() {
+         *                              // ...
+         *                      }
+         *              } );
+         *
+         * Once the widget definition is registered, widgets will be automatically
+         * created when loading data:
+         *
+         *              editor.setData( '<div class="simplebox">foo</div>', function() {
+         *                      console.log( editor.widgets.instances ); // -> An object containing one instance.
+         *              } );
+         *
+         * It is also possible to create instances during runtime by using a command
+         * (if a {@link CKEDITOR.plugins.widget.definition#template} property was defined):
+         *
+         *              // You can execute an automatically defined command to
+         *              // insert a new simplebox widget or edit the one currently focused.
+         *              editor.execCommand( 'simplebox' );
+         *
+         * Note: Since CKEditor 4.5 widget's `startupData` can be passed as the command argument:
+         *
+         *              editor.execCommand( 'simplebox', {
+         *                      startupData: {
+         *                              align: 'left'
+         *                      }
+         *              } );
+         *
+         * A widget can also be created in a completely custom way:
+         *
+         *              var element = editor.document.createElement( 'div' );
+         *              editor.insertElement( element );
+         *              var widget = editor.widgets.initOn( element, 'simplebox' );
+         *
+         * @since 4.3
+         * @class CKEDITOR.plugins.widget
+         * @mixins CKEDITOR.event
+         * @extends CKEDITOR.plugins.widget.definition
+         * @constructor Creates an instance of the widget class. Do not use it directly, but instead initialize widgets
+         * by using the {@link CKEDITOR.plugins.widget.repository#initOn} method or by the upcasting system.
+         * @param {CKEDITOR.plugins.widget.repository} widgetsRepo
+         * @param {Number} id Unique ID of this widget instance.
+         * @param {CKEDITOR.dom.element} element The widget element.
+         * @param {CKEDITOR.plugins.widget.definition} widgetDef Widget's registered definition.
+         * @param [startupData] Initial widget data. This data object will overwrite the default data and
+         * the data loaded from the DOM.
+         */
+        function Widget( widgetsRepo, id, element, widgetDef, startupData ) {
+                var editor = widgetsRepo.editor;
+
+                // Extend this widget with widgetDef-specific methods and properties.
+                CKEDITOR.tools.extend( this, widgetDef, {
+                        /**
+                         * The editor instance.
+                         *
+                         * @readonly
+                         * @property {CKEDITOR.editor}
+                         */
+                        editor: editor,
+
+                        /**
+                         * This widget's unique (per editor instance) ID.
+                         *
+                         * @readonly
+                         * @property {Number}
+                         */
+                        id: id,
+
+                        /**
+                         * Whether this widget is an inline widget (based on an inline element unless
+                         * forced otherwise by {@link CKEDITOR.plugins.widget.definition#inline}).
+                         *
+                         * **Note:** This option does not allow to turn a block element into an inline widget.
+                         * However, it makes it possible to turn an inline element into a block widget or to
+                         * force a correct type in case when automatic recognition fails.
+                         *
+                         * @readonly
+                         * @property {Boolean}
+                         */
+                        inline: element.getParent().getName() == 'span',
+
+                        /**
+                         * The widget element &mdash; the element on which the widget was initialized.
+                         *
+                         * @readonly
+                         * @property {CKEDITOR.dom.element} element
+                         */
+                        element: element,
+
+                        /**
+                         * Widget's data object.
+                         *
+                         * The data can only be set by using the {@link #setData} method.
+                         * Changes made to the data fire the {@link #event-data} event.
+                         *
+                         * @readonly
+                         */
+                        data: CKEDITOR.tools.extend( {}, typeof widgetDef.defaults == 'function' ? widgetDef.defaults() : widgetDef.defaults ),
+
+                        /**
+                         * Indicates if a widget is data-ready. Set to `true` when data from all sources
+                         * ({@link CKEDITOR.plugins.widget.definition#defaults}, set in the
+                         * {@link #init} method, loaded from the widget's element and startup data coming from the constructor)
+                         * are finally loaded. This is immediately followed by the first {@link #event-data}.
+                         *
+                         * @readonly
+                         */
+                        dataReady: false,
+
+                        /**
+                         * Whether a widget instance was initialized. This means that:
+                         *
+                         * * An instance was created,
+                         * * Its properties were set,
+                         * * The `init` method was executed.
+                         *
+                         * **Note**: The first {@link #event-data} event could not be fired yet which
+                         * means that the widget's DOM has not been set up yet. Wait for the {@link #event-ready}
+                         * event to be notified when a widget is fully initialized and ready.
+                         *
+                         * **Note**: Use the {@link #isInited} method to check whether a widget is initialized and
+                         * has not been destroyed.
+                         *
+                         * @readonly
+                         */
+                        inited: false,
+
+                        /**
+                         * Whether a widget instance is ready. This means that the widget is {@link #inited} and
+                         * that its DOM was finally set up.
+                         *
+                         * **Note:** Use the {@link #isReady} method to check whether a widget is ready and
+                         * has not been destroyed.
+                         *
+                         * @readonly
+                         */
+                        ready: false,
+
+                        // Revert what widgetDef could override (automatic #edit listener).
+                        edit: Widget.prototype.edit,
+
+                        /**
+                         * The nested editable element which is currently focused.
+                         *
+                         * @readonly
+                         * @property {CKEDITOR.plugins.widget.nestedEditable}
+                         */
+                        focusedEditable: null,
+
+                        /**
+                         * The widget definition from which this instance was created.
+                         *
+                         * @readonly
+                         * @property {CKEDITOR.plugins.widget.definition} definition
+                         */
+                        definition: widgetDef,
+
+                        /**
+                         * Link to the widget repository which created this instance.
+                         *
+                         * @readonly
+                         * @property {CKEDITOR.plugins.widget.repository} repository
+                         */
+                        repository: widgetsRepo,
+
+                        draggable: widgetDef.draggable !== false,
+
+                        // WAAARNING: Overwrite widgetDef's priv object, because otherwise violent unicorn's gonna visit you.
+                        _: {
+                                downcastFn: ( widgetDef.downcast && typeof widgetDef.downcast == 'string' ) ?
+                                        widgetDef.downcasts[ widgetDef.downcast ] : widgetDef.downcast
+                        }
+                }, true );
+
+                /**
+                 * An object of widget component elements.
+                 *
+                 * For every `partName => selector` pair in {@link CKEDITOR.plugins.widget.definition#parts},
+                 * one `partName => element` pair is added to this object during the widget initialization.
+                 *
+                 * @readonly
+                 * @property {Object} parts
+                 */
+
+                /**
+                 * The template which will be used to create a new widget element (when the widget's command is executed).
+                 * It will be populated with {@link #defaults default values}.
+                 *
+                 * @readonly
+                 * @property {CKEDITOR.template} template
+                 */
+
+                /**
+                 * The widget wrapper &mdash; a non-editable `div` or `span` element (depending on {@link #inline})
+                 * which is a parent of the {@link #element} and widget compontents like the drag handler and the {@link #mask}.
+                 * It is the outermost widget element.
+                 *
+                 * @readonly
+                 * @property {CKEDITOR.dom.element} wrapper
+                 */
+
+                widgetsRepo.fire( 'instanceCreated', this );
+
+                setupWidget( this, widgetDef );
+
+                this.init && this.init();
+
+                // Finally mark widget as inited.
+                this.inited = true;
+
+                setupWidgetData( this, startupData );
+
+                // If at some point (e.g. in #data listener) widget hasn't been destroyed
+                // and widget is already attached to document then fire #ready.
+                if ( this.isInited() && editor.editable().contains( this.wrapper ) ) {
+                        this.ready = true;
+                        this.fire( 'ready' );
+                }
+        }
+
+        Widget.prototype = {
+                /**
+                 * Adds a class to the widget element. This method is used by
+                 * the {@link #applyStyle} method and should be overridden by widgets
+                 * which should handle classes differently (e.g. add them to other elements).
+                 *
+                 * Since 4.6.0 this method also adds a corresponding class prefixed with {@link #WRAPPER_CLASS_PREFIX}
+                 * to the widget wrapper element.
+                 *
+                 * **Note**: This method should not be used directly. Use the {@link #setData} method to
+                 * set the `classes` property. Read more in the {@link #setData} documentation.
+                 *
+                 * See also: {@link #removeClass}, {@link #hasClass}, {@link #getClasses}.
+                 *
+                 * @since 4.4
+                 * @param {String} className The class name to be added.
+                 */
+                addClass: function( className ) {
+                        this.element.addClass( className );
+                        this.wrapper.addClass( Widget.WRAPPER_CLASS_PREFIX + className );
+                },
+
+                /**
+                 * Applies the specified style to the widget. It is highly recommended to use the
+                 * {@link CKEDITOR.editor#applyStyle} or {@link CKEDITOR.style#apply} methods instead of
+                 * using this method directly, because unlike editor's and style's methods, this one
+                 * does not perform any checks.
+                 *
+                 * By default this method handles only classes defined in the style. It clones existing
+                 * classes which are stored in the {@link #property-data widget data}'s `classes` property,
+                 * adds new classes, and calls the {@link #setData} method if at least one new class was added.
+                 * Then, using the {@link #event-data} event listener widget applies modifications passing
+                 * new classes to the {@link #addClass} method.
+                 *
+                 * If you need to handle classes differently than in the default way, you can override the
+                 * {@link #addClass} and related methods. You can also handle other style properties than `classes`
+                 * by overriding this method.
+                 *
+                 * See also: {@link #checkStyleActive}, {@link #removeStyle}.
+                 *
+                 * @since 4.4
+                 * @param {CKEDITOR.style} style The custom widget style to be applied.
+                 */
+                applyStyle: function( style ) {
+                        applyRemoveStyle( this, style, 1 );
+                },
+
+                /**
+                 * Checks if the specified style is applied to this widget. It is highly recommended to use the
+                 * {@link CKEDITOR.style#checkActive} method instead of using this method directly,
+                 * because unlike style's method, this one does not perform any checks.
+                 *
+                 * By default this method handles only classes defined in the style and passes
+                 * them to the {@link #hasClass} method. You can override these methods to handle classes
+                 * differently or to handle more of the style properties.
+                 *
+                 * See also: {@link #applyStyle}, {@link #removeStyle}.
+                 *
+                 * @since 4.4
+                 * @param {CKEDITOR.style} style The custom widget style to be checked.
+                 * @returns {Boolean} Whether the style is applied to this widget.
+                 */
+                checkStyleActive: function( style ) {
+                        var classes = getStyleClasses( style ),
+                                cl;
+
+                        if ( !classes )
+                                return false;
+
+                        while ( ( cl = classes.pop() ) ) {
+                                if ( !this.hasClass( cl ) )
+                                        return false;
+                        }
+                        return true;
+                },
+
+                /**
+                 * Destroys this widget instance.
+                 *
+                 * Use {@link CKEDITOR.plugins.widget.repository#destroy} when possible instead of this method.
+                 *
+                 * This method fires the {#event-destroy} event.
+                 *
+                 * @param {Boolean} [offline] Whether a widget is offline (detached from the DOM tree) &mdash;
+                 * in this case the DOM (attributes, classes, etc.) will not be cleaned up.
+                 */
+                destroy: function( offline ) {
+                        this.fire( 'destroy' );
+
+                        if ( this.editables ) {
+                                for ( var name in this.editables )
+                                        this.destroyEditable( name, offline );
+                        }
+
+                        if ( !offline ) {
+                                if ( this.element.data( 'cke-widget-keep-attr' ) == '0' )
+                                        this.element.removeAttribute( 'data-widget' );
+                                this.element.removeAttributes( [ 'data-cke-widget-data', 'data-cke-widget-keep-attr' ] );
+                                this.element.removeClass( 'cke_widget_element' );
+                                this.element.replace( this.wrapper );
+                        }
+
+                        this.wrapper = null;
+                },
+
+                /**
+                 * Destroys a nested editable and all nested widgets.
+                 *
+                 * @param {String} editableName Nested editable name.
+                 * @param {Boolean} [offline] See {@link #method-destroy} method.
+                 */
+                destroyEditable: function( editableName, offline ) {
+                        var editable = this.editables[ editableName ];
+
+                        editable.removeListener( 'focus', onEditableFocus );
+                        editable.removeListener( 'blur', onEditableBlur );
+                        this.editor.focusManager.remove( editable );
+
+                        if ( !offline ) {
+                                this.repository.destroyAll( false, editable );
+                                editable.removeClass( 'cke_widget_editable' );
+                                editable.removeClass( 'cke_widget_editable_focused' );
+                                editable.removeAttributes( [ 'contenteditable', 'data-cke-widget-editable', 'data-cke-enter-mode' ] );
+                        }
+
+                        delete this.editables[ editableName ];
+                },
+
+                /**
+                 * Starts widget editing.
+                 *
+                 * This method fires the {@link CKEDITOR.plugins.widget#event-edit} event
+                 * which may be canceled in order to prevent it from opening a dialog window.
+                 *
+                 * The dialog window name is obtained from the event's data `dialog` property or
+                 * from {@link CKEDITOR.plugins.widget.definition#dialog}.
+                 *
+                 * @returns {Boolean} Returns `true` if a dialog window was opened.
+                 */
+                edit: function() {
+                        var evtData = { dialog: this.dialog },
+                                that = this;
+
+                        // Edit event was blocked or there's no dialog to be automatically opened.
+                        if ( this.fire( 'edit', evtData ) === false || !evtData.dialog )
+                                return false;
+
+                        this.editor.openDialog( evtData.dialog, function( dialog ) {
+                                var showListener,
+                                        okListener;
+
+                                // Allow to add a custom dialog handler.
+                                if ( that.fire( 'dialog', dialog ) === false )
+                                        return;
+
+                                showListener = dialog.on( 'show', function() {
+                                        dialog.setupContent( that );
+                                } );
+
+                                okListener = dialog.on( 'ok', function() {
+                                        // Commit dialog's fields, but prevent from
+                                        // firing data event for every field. Fire only one,
+                                        // bulk event at the end.
+                                        var dataChanged,
+                                                dataListener = that.on( 'data', function( evt ) {
+                                                        dataChanged = 1;
+                                                        evt.cancel();
+                                                }, null, null, 0 );
+
+                                        // Create snapshot preceeding snapshot with changed widget...
+                                        // TODO it should not be required, but it is and I found similar
+                                        // code in dialog#ok listener in dialog/plugin.js.
+                                        that.editor.fire( 'saveSnapshot' );
+                                        dialog.commitContent( that );
+
+                                        dataListener.removeListener();
+                                        if ( dataChanged ) {
+                                                that.fire( 'data', that.data );
+                                                that.editor.fire( 'saveSnapshot' );
+                                        }
+                                } );
+
+                                dialog.once( 'hide', function() {
+                                        showListener.removeListener();
+                                        okListener.removeListener();
+                                } );
+                        } );
+
+                        return true;
+                },
+
+                /**
+                 * Returns widget element classes parsed to an object. This method
+                 * is used to populate the `classes` property of widget's {@link #property-data}.
+                 *
+                 * This method reuses {@link CKEDITOR.plugins.widget.repository#parseElementClasses}.
+                 * It should be overriden if a widget should handle classes differently (e.g. on other elements).
+                 *
+                 * See also: {@link #removeClass}, {@link #addClass}, {@link #hasClass}.
+                 *
+                 * @since 4.4
+                 * @returns {Object}
+                 */
+                getClasses: function() {
+                        return this.repository.parseElementClasses( this.element.getAttribute( 'class' ) );
+                },
+
+                /**
+                 * Checks if the widget element has specified class. This method is used by
+                 * the {@link #checkStyleActive} method and should be overriden by widgets
+                 * which should handle classes differently (e.g. on other elements).
+                 *
+                 * See also: {@link #removeClass}, {@link #addClass}, {@link #getClasses}.
+                 *
+                 * @since 4.4
+                 * @param {String} className The class to be checked.
+                 * @param {Boolean} Whether a widget has specified class.
+                 */
+                hasClass: function( className ) {
+                        return this.element.hasClass( className );
+                },
+
+                /**
+                 * Initializes a nested editable.
+                 *
+                 * **Note**: Only elements from {@link CKEDITOR.dtd#$editable} may become editables.
+                 *
+                 * @param {String} editableName The nested editable name.
+                 * @param {CKEDITOR.plugins.widget.nestedEditable.definition} definition The definition of the nested editable.
+                 * @returns {Boolean} Whether an editable was successfully initialized.
+                 */
+                initEditable: function( editableName, definition ) {
+                        // Don't fetch just first element which matched selector but look for a correct one. (http://dev.ckeditor.com/ticket/13334)
+                        var editable = this._findOneNotNested( definition.selector );
+
+                        if ( editable && editable.is( CKEDITOR.dtd.$editable ) ) {
+                                editable = new NestedEditable( this.editor, editable, {
+                                        filter: createEditableFilter.call( this.repository, this.name, editableName, definition )
+                                } );
+                                this.editables[ editableName ] = editable;
+
+                                editable.setAttributes( {
+                                        contenteditable: 'true',
+                                        'data-cke-widget-editable': editableName,
+                                        'data-cke-enter-mode': editable.enterMode
+                                } );
+
+                                if ( editable.filter )
+                                        editable.data( 'cke-filter', editable.filter.id );
+
+                                editable.addClass( 'cke_widget_editable' );
+                                // This class may be left when d&ding widget which
+                                // had focused editable. Clean this class here, not in
+                                // cleanUpWidgetElement for performance and code size reasons.
+                                editable.removeClass( 'cke_widget_editable_focused' );
+
+                                if ( definition.pathName )
+                                        editable.data( 'cke-display-name', definition.pathName );
+
+                                this.editor.focusManager.add( editable );
+                                editable.on( 'focus', onEditableFocus, this );
+                                CKEDITOR.env.ie && editable.on( 'blur', onEditableBlur, this );
+
+                                // Finally, process editable's data. This data wasn't processed when loading
+                                // editor's data, becuase they need to be processed separately, with its own filters and settings.
+                                editable._.initialSetData = true;
+                                editable.setData( editable.getHtml() );
+
+                                return true;
+                        }
+
+                        return false;
+                },
+
+                /**
+                 * Looks inside wrapper element to find a node that
+                 * matches given selector and is not nested in other widget. (http://dev.ckeditor.com/ticket/13334)
+                 *
+                 * @since 4.5
+                 * @private
+                 * @param {String} selector Selector to match.
+                 * @returns {CKEDITOR.dom.element} Matched element or `null` if a node has not been found.
+                 */
+                _findOneNotNested: function( selector ) {
+                        var matchedElements = this.wrapper.find( selector ),
+                                match,
+                                closestWrapper;
+
+                        for ( var i = 0; i < matchedElements.count(); i++ ) {
+                                match = matchedElements.getItem( i );
+                                closestWrapper = match.getAscendant( Widget.isDomWidgetWrapper );
+
+                                // The closest ascendant-wrapper of this match defines to which widget
+                                // this match belongs. If the ascendant is this widget's wrapper
+                                // it means that the match is not nested in other widget.
+                                if ( this.wrapper.equals( closestWrapper ) ) {
+                                        return match;
+                                }
+                        }
+
+                        return null;
+                },
+
+                /**
+                 * Checks if a widget has already been initialized and has not been destroyed yet.
+                 *
+                 * See {@link #inited} for more details.
+                 *
+                 * @returns {Boolean}
+                 */
+                isInited: function() {
+                        return !!( this.wrapper && this.inited );
+                },
+
+                /**
+                 * Checks if a widget is ready and has not been destroyed yet.
+                 *
+                 * See {@link #property-ready} for more details.
+                 *
+                 * @returns {Boolean}
+                 */
+                isReady: function() {
+                        return this.isInited() && this.ready;
+                },
+
+                /**
+                 * Focuses a widget by selecting it.
+                 */
+                focus: function() {
+                        var sel = this.editor.getSelection();
+
+                        // Fake the selection before focusing editor, to avoid unpreventable viewports scrolling
+                        // on Webkit/Blink/IE which is done because there's no selection or selection was somewhere else than widget.
+                        if ( sel ) {
+                                var isDirty = this.editor.checkDirty();
+
+                                sel.fake( this.wrapper );
+
+                                !isDirty && this.editor.resetDirty();
+                        }
+
+                        // Always focus editor (not only when focusManger.hasFocus is false) (because of http://dev.ckeditor.com/ticket/10483).
+                        this.editor.focus();
+                },
+
+                /**
+                 * Removes a class from the widget element. This method is used by
+                 * the {@link #removeStyle} method and should be overriden by widgets
+                 * which should handle classes differently (e.g. on other elements).
+                 *
+                 * **Note**: This method should not be used directly. Use the {@link #setData} method to
+                 * set the `classes` property. Read more in the {@link #setData} documentation.
+                 *
+                 * See also: {@link #hasClass}, {@link #addClass}.
+                 *
+                 * @since 4.4
+                 * @param {String} className The class to be removed.
+                 */
+                removeClass: function( className ) {
+                        this.element.removeClass( className );
+                        this.wrapper.removeClass( Widget.WRAPPER_CLASS_PREFIX + className );
+                },
+
+                /**
+                 * Removes the specified style from the widget. It is highly recommended to use the
+                 * {@link CKEDITOR.editor#removeStyle} or {@link CKEDITOR.style#remove} methods instead of
+                 * using this method directly, because unlike editor's and style's methods, this one
+                 * does not perform any checks.
+                 *
+                 * Read more about how applying/removing styles works in the {@link #applyStyle} method documentation.
+                 *
+                 * See also {@link #checkStyleActive}, {@link #applyStyle}, {@link #getClasses}.
+                 *
+                 * @since 4.4
+                 * @param {CKEDITOR.style} style The custom widget style to be removed.
+                 */
+                removeStyle: function( style ) {
+                        applyRemoveStyle( this, style, 0 );
+                },
+
+                /**
+                 * Sets widget value(s) in the {@link #property-data} object.
+                 * If the given value(s) modifies current ones, the {@link #event-data} event is fired.
+                 *
+                 *              this.setData( 'align', 'left' );
+                 *              this.data.align; // -> 'left'
+                 *
+                 *              this.setData( { align: 'right', opened: false } );
+                 *              this.data.align; // -> 'right'
+                 *              this.data.opened; // -> false
+                 *
+                 * Set values are stored in {@link #element}'s attribute (`data-cke-widget-data`),
+                 * in a JSON string, therefore {@link #property-data} should contain
+                 * only serializable data.
+                 *
+                 * **Note:** A special data property, `classes`, exists. It contains an object with
+                 * classes which were returned by the {@link #getClasses} method during the widget initialization.
+                 * This property is then used by the {@link #applyStyle} and {@link #removeStyle} methods.
+                 * When it is changed (the reference to object must be changed!), the widget updates its classes by
+                 * using the {@link #addClass} and {@link #removeClass} methods.
+                 *
+                 *              // Adding a new class.
+                 *              var classes = CKEDITOR.tools.clone( widget.data.classes );
+                 *              classes.newClass = 1;
+                 *              widget.setData( 'classes', classes );
+                 *
+                 *              // Removing a class.
+                 *              var classes = CKEDITOR.tools.clone( widget.data.classes );
+                 *              delete classes.newClass;
+                 *              widget.setData( 'classes', classes );
+                 *
+                 * @param {String/Object} keyOrData
+                 * @param {Object} value
+                 * @chainable
+                 */
+                setData: function( key, value ) {
+                        var data = this.data,
+                                modified = 0;
+
+                        if ( typeof key == 'string' ) {
+                                if ( data[ key ] !== value ) {
+                                        data[ key ] = value;
+                                        modified = 1;
+                                }
+                        }
+                        else {
+                                var newData = key;
+
+                                for ( key in newData ) {
+                                        if ( data[ key ] !== newData[ key ] ) {
+                                                modified = 1;
+                                                data[ key ] = newData[ key ];
+                                        }
+                                }
+                        }
+
+                        // Block firing data event and overwriting data element before setupWidgetData is executed.
+                        if ( modified && this.dataReady ) {
+                                writeDataToElement( this );
+                                this.fire( 'data', data );
+                        }
+
+                        return this;
+                },
+
+                /**
+                 * Changes the widget's focus state. This method is executed automatically after
+                 * a widget was focused by the {@link #method-focus} method or the selection was moved
+                 * out of the widget.
+                 *
+                 * This is a low-level method which is not integrated with e.g. the undo manager.
+                 * Use the {@link #method-focus} method instead.
+                 *
+                 * @param {Boolean} selected Whether to select or deselect this widget.
+                 * @chainable
+                 */
+                setFocused: function( focused ) {
+                        this.wrapper[ focused ? 'addClass' : 'removeClass' ]( 'cke_widget_focused' );
+                        this.fire( focused ? 'focus' : 'blur' );
+                        return this;
+                },
+
+                /**
+                 * Changes the widget's select state. This method is executed automatically after
+                 * a widget was selected by the {@link #method-focus} method or the selection
+                 * was moved out of the widget.
+                 *
+                 * This is a low-level method which is not integrated with e.g. the undo manager.
+                 * Use the {@link #method-focus} method instead or simply change the selection.
+                 *
+                 * @param {Boolean} selected Whether to select or deselect this widget.
+                 * @chainable
+                 */
+                setSelected: function( selected ) {
+                        this.wrapper[ selected ? 'addClass' : 'removeClass' ]( 'cke_widget_selected' );
+                        this.fire(  selected ? 'select' : 'deselect' );
+                        return this;
+                },
+
+                /**
+                 * Repositions drag handler according to the widget's element position. Should be called from events, like mouseover.
+                 */
+                updateDragHandlerPosition: function() {
+                        var editor = this.editor,
+                                domElement = this.element.$,
+                                oldPos = this._.dragHandlerOffset,
+                                newPos = {
+                                        x: domElement.offsetLeft,
+                                        y: domElement.offsetTop - DRAG_HANDLER_SIZE
+                                };
+
+                        if ( oldPos && newPos.x == oldPos.x && newPos.y == oldPos.y )
+                                return;
+
+                        // We need to make sure that dirty state is not changed (http://dev.ckeditor.com/ticket/11487).
+                        var initialDirty = editor.checkDirty();
+
+                        editor.fire( 'lockSnapshot' );
+                        this.dragHandlerContainer.setStyles( {
+                                top: newPos.y + 'px',
+                                left: newPos.x + 'px',
+                                display: 'block'
+                        } );
+                        editor.fire( 'unlockSnapshot' );
+                        !initialDirty && editor.resetDirty();
+
+                        this._.dragHandlerOffset = newPos;
+                }
+        };
+
+        CKEDITOR.event.implementOn( Widget.prototype );
+
+        /**
+         * Gets the {@link #isDomNestedEditable nested editable}
+         * (returned as a {@link CKEDITOR.dom.element}, not as a {@link CKEDITOR.plugins.widget.nestedEditable})
+         * closest to the `node` or the `node` if it is a nested editable itself.
+         *
+         * @since 4.5
+         * @static
+         * @param {CKEDITOR.dom.element} guard Stop ancestor search on this node (usually editor's editable).
+         * @param {CKEDITOR.dom.node} node Start the search from this node.
+         * @returns {CKEDITOR.dom.element/null} Element or `null` if not found.
+         */
+        Widget.getNestedEditable = function( guard, node ) {
+                if ( !node || node.equals( guard ) )
+                        return null;
+
+                if ( Widget.isDomNestedEditable( node ) )
+                        return node;
+
+                return Widget.getNestedEditable( guard, node.getParent() );
+        };
+
+        /**
+         * Checks whether the `node` is a widget's drag handle element.
+         *
+         * @since 4.5
+         * @static
+         * @param {CKEDITOR.dom.node} node
+         * @returns {Boolean}
+         */
+        Widget.isDomDragHandler = function( node ) {
+                return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-cke-widget-drag-handler' );
+        };
+
+        /**
+         * Checks whether the `node` is a container of the widget's drag handle element.
+         *
+         * @since 4.5
+         * @static
+         * @param {CKEDITOR.dom.node} node
+         * @returns {Boolean}
+         */
+        Widget.isDomDragHandlerContainer = function( node ) {
+                return node.type == CKEDITOR.NODE_ELEMENT && node.hasClass( 'cke_widget_drag_handler_container' );
+        };
+
+        /**
+         * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#editables nested editable}.
+         * Note that this function only checks whether it is the right element, not whether
+         * the passed `node` is an instance of {@link CKEDITOR.plugins.widget.nestedEditable}.
+         *
+         * @since 4.5
+         * @static
+         * @param {CKEDITOR.dom.node} node
+         * @returns {Boolean}
+         */
+        Widget.isDomNestedEditable = function( node ) {
+                return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-cke-widget-editable' );
+        };
+
+        /**
+         * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#element widget element}.
+         *
+         * @since 4.5
+         * @static
+         * @param {CKEDITOR.dom.node} node
+         * @returns {Boolean}
+         */
+        Widget.isDomWidgetElement = function( node ) {
+                return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-widget' );
+        };
+
+        /**
+         * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#wrapper widget wrapper}.
+         *
+         * @since 4.5
+         * @static
+         * @param {CKEDITOR.dom.element} node
+         * @returns {Boolean}
+         */
+        Widget.isDomWidgetWrapper = function( node ) {
+                return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-cke-widget-wrapper' );
+        };
+
+        /**
+         * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#element widget element}.
+         *
+         * @since 4.5
+         * @static
+         * @param {CKEDITOR.htmlParser.node} node
+         * @returns {Boolean}
+         */
+        Widget.isParserWidgetElement = function( node ) {
+                return node.type == CKEDITOR.NODE_ELEMENT && !!node.attributes[ 'data-widget' ];
+        };
+
+        /**
+         * Checks whether the `node` is a {@link CKEDITOR.plugins.widget#wrapper widget wrapper}.
+         *
+         * @since 4.5
+         * @static
+         * @param {CKEDITOR.htmlParser.element} node
+         * @returns {Boolean}
+         */
+        Widget.isParserWidgetWrapper = function( node ) {
+                return node.type == CKEDITOR.NODE_ELEMENT && !!node.attributes[ 'data-cke-widget-wrapper' ];
+        };
+
+        /**
+         * Prefix added to wrapper classes. Each class added to the widget element by the {@link #addClass}
+         * method will also be added to the wrapper prefixed with it.
+         *
+         * @since 4.6.0
+         * @static
+         * @readonly
+         * @property {String} [='cke_widget_wrapper_']
+         */
+        Widget.WRAPPER_CLASS_PREFIX = 'cke_widget_wrapper_';
+
+        /**
+         * An event fired when a widget is ready (fully initialized). This event is fired after:
+         *
+         * * {@link #init} is called,
+         * * The first {@link #event-data} event is fired,
+         * * A widget is attached to the document.
+         *
+         * Therefore, in case of widget creation with a command which opens a dialog window, this event
+         * will be delayed after the dialog window is closed and the widget is finally inserted into the document.
+         *
+         * **Note**: If your widget does not use automatic dialog window binding (i.e. you open the dialog window manually)
+         * or another situation in which the widget wrapper is not attached to document at the time when it is
+         * initialized occurs, you need to take care of firing {@link #event-ready} yourself.
+         *
+         * See also {@link #property-ready} and {@link #property-inited} properties, and
+         * {@link #isReady} and {@link #isInited} methods.
+         *
+         * @event ready
+         */
+
+        /**
+         * An event fired when a widget is about to be destroyed, but before it is
+         * fully torn down.
+         *
+         * @event destroy
+         */
+
+        /**
+         * An event fired when a widget is focused.
+         *
+         * Widget can be focused by executing {@link #method-focus}.
+         *
+         * @event focus
+         */
+
+        /**
+         * An event fired when a widget is blurred.
+         *
+         * @event blur
+         */
+
+        /**
+         * An event fired when a widget is selected.
+         *
+         * @event select
+         */
+
+        /**
+         * An event fired when a widget is deselected.
+         *
+         * @event deselect
+         */
+
+        /**
+         * An event fired by the {@link #method-edit} method. It can be canceled
+         * in order to stop the default action (opening a dialog window and/or
+         * {@link CKEDITOR.plugins.widget.repository#finalizeCreation finalizing widget creation}).
+         *
+         * @event edit
+         * @param data
+         * @param {String} data.dialog Defaults to {@link CKEDITOR.plugins.widget.definition#dialog}
+         * and can be changed or set by the listener.
+         */
+
+        /**
+         * An event fired when a dialog window for widget editing is opened.
+         * This event can be canceled in order to handle the editing dialog in a custom manner.
+         *
+         * @event dialog
+         * @param {CKEDITOR.dialog} data The opened dialog window instance.
+         */
+
+        /**
+         * An event fired when a key is pressed on a focused widget.
+         * This event is forwarded from the {@link CKEDITOR.editor#key} event and
+         * has the ability to block editor keystrokes if it is canceled.
+         *
+         * @event key
+         * @param data
+         * @param {Number} data.keyCode A number representing the key code (or combination).
+         */
+
+        /**
+         * An event fired when a widget is double clicked.
+         *
+         * **Note:** If a default editing action is executed on double click (i.e. a widget has a
+         * {@link CKEDITOR.plugins.widget.definition#dialog dialog} defined and the {@link #event-doubleclick} event was not
+         * canceled), this event will be automatically canceled, so a listener added with the default priority (10)
+         * will not be executed. Use a listener with low priority (e.g. 5) to be sure that it will be executed.
+         *
+         *              widget.on( 'doubleclick', function( evt ) {
+         *                      console.log( 'widget#doubleclick' );
+         *              }, null, null, 5 );
+         *
+         * If your widget handles double click in a special way (so the default editing action is not executed),
+         * make sure you cancel this event, because otherwise it will be propagated to {@link CKEDITOR.editor#doubleclick}
+         * and another feature may step in (e.g. a Link dialog window may be opened if your widget was inside a link).
+         *
+         * @event doubleclick
+         * @param data
+         * @param {CKEDITOR.dom.element} data.element The double-clicked element.
+         */
+
+        /**
+         * An event fired when the context menu is opened for a widget.
+         *
+         * @event contextMenu
+         * @param data The object containing context menu options to be added
+         * for this widget. See {@link CKEDITOR.plugins.contextMenu#addListener}.
+         */
+
+        /**
+         * An event fired when the widget data changed. See the {@link #setData} method and the {@link #property-data} property.
+         *
+         * @event data
+         */
+
+
+
+        /**
+         * The wrapper class for editable elements inside widgets.
+         *
+         * Do not use directly. Use {@link CKEDITOR.plugins.widget.definition#editables} or
+         * {@link CKEDITOR.plugins.widget#initEditable}.
+         *
+         * @class CKEDITOR.plugins.widget.nestedEditable
+         * @extends CKEDITOR.dom.element
+         * @constructor
+         * @param {CKEDITOR.editor} editor
+         * @param {CKEDITOR.dom.element} element
+         * @param config
+         * @param {CKEDITOR.filter} [config.filter]
+         */
+        function NestedEditable( editor, element, config ) {
+                // Call the base constructor.
+                CKEDITOR.dom.element.call( this, element.$ );
+                this.editor = editor;
+                this._ = {};
+                var filter = this.filter = config.filter;
+
+                // If blockless editable - always use BR mode.
+                if ( !CKEDITOR.dtd[ this.getName() ].p )
+                        this.enterMode = this.shiftEnterMode = CKEDITOR.ENTER_BR;
+                else {
+                        this.enterMode = filter ? filter.getAllowedEnterMode( editor.enterMode ) : editor.enterMode;
+                        this.shiftEnterMode = filter ? filter.getAllowedEnterMode( editor.shiftEnterMode, true ) : editor.shiftEnterMode;
+                }
+        }
+
+        NestedEditable.prototype = CKEDITOR.tools.extend( CKEDITOR.tools.prototypedCopy( CKEDITOR.dom.element.prototype ), {
+                /**
+                 * Sets the editable data. The data will be passed through the {@link CKEDITOR.editor#dataProcessor}
+                 * and the {@link CKEDITOR.editor#filter}. This ensures that the data was filtered and prepared to be
+                 * edited like the {@link CKEDITOR.editor#method-setData editor data}.
+                 *
+                 * Before content is changed, all nested widgets are destroyed. Afterwards, after new content is loaded,
+                 * all nested widgets are initialized.
+                 *
+                 * @param {String} data
+                 */
+                setData: function( data ) {
+                        // For performance reasons don't call destroyAll when initializing a nested editable,
+                        // because there are no widgets inside.
+                        if ( !this._.initialSetData ) {
+                                // Destroy all nested widgets before setting data.
+                                this.editor.widgets.destroyAll( false, this );
+                        }
+                        this._.initialSetData = false;
+
+                        data = this.editor.dataProcessor.toHtml( data, {
+                                context: this.getName(),
+                                filter: this.filter,
+                                enterMode: this.enterMode
+                        } );
+                        this.setHtml( data );
+
+                        this.editor.widgets.initOnAll( this );
+                },
+
+                /**
+                 * Gets the editable data. Like {@link #setData}, this method will process and filter the data.
+                 *
+                 * @returns {String}
+                 */
+                getData: function() {
+                        return this.editor.dataProcessor.toDataFormat( this.getHtml(), {
+                                context: this.getName(),
+                                filter: this.filter,
+                                enterMode: this.enterMode
+                        } );
+                }
+        } );
+
+        /**
+         * The editor instance.
+         *
+         * @readonly
+         * @property {CKEDITOR.editor} editor
+         */
+
+        /**
+         * The filter instance if allowed content rules were defined.
+         *
+         * @readonly
+         * @property {CKEDITOR.filter} filter
+         */
+
+        /**
+         * The enter mode active in this editable.
+         * It is determined from editable's name (whether it is a blockless editable),
+         * its allowed content rules (if defined) and the default editor's mode.
+         *
+         * @readonly
+         * @property {Number} enterMode
+         */
+
+        /**
+         * The shift enter move active in this editable.
+         *
+         * @readonly
+         * @property {Number} shiftEnterMode
+         */
+
+
+        //
+        // REPOSITORY helpers -----------------------------------------------------
+        //
+
+        function addWidgetButtons( editor ) {
+                var widgets = editor.widgets.registered,
+                        widget,
+                        widgetName,
+                        widgetButton;
+
+                for ( widgetName in widgets ) {
+                        widget = widgets[ widgetName ];
+
+                        // Create button if defined.
+                        widgetButton = widget.button;
+                        if ( widgetButton && editor.ui.addButton ) {
+                                editor.ui.addButton( CKEDITOR.tools.capitalize( widget.name, true ), {
+                                        label: widgetButton,
+                                        command: widget.name,
+                                        toolbar: 'insert,10'
+                                } );
+                        }
+                }
+        }
+
+        // Create a command creating and editing widget.
+        //
+        // @param editor
+        // @param {CKEDITOR.plugins.widget.definition} widgetDef
+        function addWidgetCommand( editor, widgetDef ) {
+                editor.addCommand( widgetDef.name, {
+                        exec: function( editor, commandData ) {
+                                var focused = editor.widgets.focused;
+                                // If a widget of the same type is focused, start editing.
+                                if ( focused && focused.name == widgetDef.name )
+                                        focused.edit();
+                                // Otherwise...
+                                // ... use insert method is was defined.
+                                else if ( widgetDef.insert )
+                                        widgetDef.insert();
+                                // ... or create a brand-new widget from template.
+                                else if ( widgetDef.template ) {
+                                        var defaults = typeof widgetDef.defaults == 'function' ? widgetDef.defaults() : widgetDef.defaults,
+                                                element = CKEDITOR.dom.element.createFromHtml( widgetDef.template.output( defaults ) ),
+                                                instance,
+                                                wrapper = editor.widgets.wrapElement( element, widgetDef.name ),
+                                                temp = new CKEDITOR.dom.documentFragment( wrapper.getDocument() );
+
+                                        // Append wrapper to a temporary document. This will unify the environment
+                                        // in which #data listeners work when creating and editing widget.
+                                        temp.append( wrapper );
+                                        instance = editor.widgets.initOn( element, widgetDef, commandData && commandData.startupData );
+
+                                        // Instance could be destroyed during initialization.
+                                        // In this case finalize creation if some new widget
+                                        // was left in temporary document fragment.
+                                        if ( !instance ) {
+                                                finalizeCreation();
+                                                return;
+                                        }
+
+                                        // Listen on edit to finalize widget insertion.
+                                        //
+                                        // * If dialog was set, then insert widget after dialog was successfully saved or destroy this
+                                        // temporary instance.
+                                        // * If dialog wasn't set and edit wasn't canceled, insert widget.
+                                        var editListener = instance.once( 'edit', function( evt ) {
+                                                if ( evt.data.dialog ) {
+                                                        instance.once( 'dialog', function( evt ) {
+                                                                var dialog = evt.data,
+                                                                        okListener,
+                                                                        cancelListener;
+
+                                                                // Finalize creation AFTER (20) new data was set.
+                                                                okListener = dialog.once( 'ok', finalizeCreation, null, null, 20 );
+
+                                                                cancelListener = dialog.once( 'cancel', function( evt ) {
+                                                                        if ( !( evt.data && evt.data.hide === false ) ) {
+                                                                                editor.widgets.destroy( instance, true );
+                                                                        }
+                                                                } );
+
+                                                                dialog.once( 'hide', function() {
+                                                                        okListener.removeListener();
+                                                                        cancelListener.removeListener();
+                                                                } );
+                                                        } );
+                                                } else {
+                                                        // Dialog hasn't been set, so insert widget now.
+                                                        finalizeCreation();
+                                                }
+                                        }, null, null, 999 );
+
+                                        instance.edit();
+
+                                        // Remove listener in case someone canceled it before this
+                                        // listener was executed.
+                                        editListener.removeListener();
+                                }
+
+                                function finalizeCreation() {
+                                        editor.widgets.finalizeCreation( temp );
+                                }
+                        },
+
+                        allowedContent: widgetDef.allowedContent,
+                        requiredContent: widgetDef.requiredContent,
+                        contentForms: widgetDef.contentForms,
+                        contentTransformations: widgetDef.contentTransformations
+                } );
+        }
+
+        function addWidgetProcessors( widgetsRepo, widgetDef ) {
+                var upcast = widgetDef.upcast,
+                        upcasts,
+                        priority = widgetDef.upcastPriority || 10;
+
+                if ( !upcast )
+                        return;
+
+                // Multiple upcasts defined in string.
+                if ( typeof upcast == 'string' ) {
+                        upcasts = upcast.split( ',' );
+                        while ( upcasts.length ) {
+                                addUpcast( widgetDef.upcasts[ upcasts.pop() ], widgetDef.name, priority );
+                        }
+                }
+                // Single rule which is automatically activated.
+                else {
+                        addUpcast( upcast, widgetDef.name, priority );
+                }
+
+                function addUpcast( upcast, name, priority ) {
+                        // Find index of the first higher (in terms of value) priority upcast.
+                        var index = CKEDITOR.tools.getIndex( widgetsRepo._.upcasts, function( element ) {
+                                return element[ 2 ] > priority;
+                        } );
+                        // Add at the end if it is the highest priority so far.
+                        if ( index < 0 ) {
+                                index = widgetsRepo._.upcasts.length;
+                        }
+
+                        widgetsRepo._.upcasts.splice( index, 0, [ upcast, name, priority ] );
+                }
+        }
+
+        function blurWidget( widgetsRepo, widget ) {
+                widgetsRepo.focused = null;
+
+                if ( widget.isInited() ) {
+                        var isDirty = widget.editor.checkDirty();
+
+                        // Widget could be destroyed in the meantime - e.g. data could be set.
+                        widgetsRepo.fire( 'widgetBlurred', { widget: widget } );
+                        widget.setFocused( false );
+
+                        !isDirty && widget.editor.resetDirty();
+                }
+        }
+
+        function checkWidgets( evt ) {
+                var options = evt.data;
+
+                if ( this.editor.mode != 'wysiwyg' )
+                        return;
+
+                var editable = this.editor.editable(),
+                        instances = this.instances,
+                        newInstances, i, count, wrapper, notYetInitialized;
+
+                if ( !editable )
+                        return;
+
+                // Remove widgets which have no corresponding elements in DOM.
+                for ( i in instances ) {
+                        // http://dev.ckeditor.com/ticket/13410 Remove widgets that are ready. This prevents from destroying widgets that are during loading process.
+                        if ( instances[ i ].isReady() && !editable.contains( instances[ i ].wrapper ) )
+                                this.destroy( instances[ i ], true );
+                }
+
+                // Init on all (new) if initOnlyNew option was passed.
+                if ( options && options.initOnlyNew )
+                        newInstances = this.initOnAll();
+                else {
+                        var wrappers = editable.find( '.cke_widget_wrapper' );
+                        newInstances = [];
+
+                        // Create widgets on existing wrappers if they do not exists.
+                        for ( i = 0, count = wrappers.count(); i < count; i++ ) {
+                                wrapper = wrappers.getItem( i );
+                                notYetInitialized = !this.getByElement( wrapper, true );
+
+                                // Check if:
+                                // * there's no instance for this widget
+                                // * wrapper is not inside some temporary element like copybin (http://dev.ckeditor.com/ticket/11088)
+                                // * it was a nested widget's wrapper which has been detached from DOM,
+                                // when nested editable has been initialized (it overwrites its innerHTML
+                                // and initializes nested widgets).
+                                if ( notYetInitialized && !findParent( wrapper, isDomTemp ) && editable.contains( wrapper ) ) {
+                                        // Add cke_widget_new class because otherwise
+                                        // widget will not be created on such wrapper.
+                                        wrapper.addClass( 'cke_widget_new' );
+                                        newInstances.push( this.initOn( wrapper.getFirst( Widget.isDomWidgetElement ) ) );
+                                }
+                        }
+                }
+
+                // If only single widget was initialized and focusInited was passed, focus it.
+                if ( options && options.focusInited && newInstances.length == 1 )
+                        newInstances[ 0 ].focus();
+        }
+
+        // Unwraps widget element and clean up element.
+        //
+        // This function is used to clean up pasted widgets.
+        // It should have similar result to widget#destroy plus
+        // some additional adjustments, specific for pasting.
+        //
+        // @param {CKEDITOR.htmlParser.element} el
+        function cleanUpWidgetElement( el ) {
+                var parent = el.parent;
+                if ( parent.type == CKEDITOR.NODE_ELEMENT && parent.attributes[ 'data-cke-widget-wrapper' ] )
+                        parent.replaceWith( el );
+        }
+
+        // Similar to cleanUpWidgetElement, but works on DOM and finds
+        // widget elements by its own.
+        //
+        // Unlike cleanUpWidgetElement it will wrap element back.
+        //
+        // @param {CKEDITOR.dom.element} container
+        function cleanUpAllWidgetElements( widgetsRepo, container ) {
+                var wrappers = container.find( '.cke_widget_wrapper' ),
+                        wrapper, element,
+                        i = 0,
+                        l = wrappers.count();
+
+                for ( ; i < l; ++i ) {
+                        wrapper = wrappers.getItem( i );
+                        element = wrapper.getFirst( Widget.isDomWidgetElement );
+                        // If wrapper contains widget element - unwrap it and wrap again.
+                        if ( element.type == CKEDITOR.NODE_ELEMENT && element.data( 'widget' ) ) {
+                                element.replace( wrapper );
+                                widgetsRepo.wrapElement( element );
+                        } else {
+                                // Otherwise - something is wrong... clean this up.
+                                wrapper.remove();
+                        }
+                }
+        }
+
+        // Creates {@link CKEDITOR.filter} instance for given widget, editable and rules.
+        //
+        // Once filter for widget-editable pair is created it is cached, so the same instance
+        // will be returned when method is executed again.
+        //
+        // @param {String} widgetName
+        // @param {String} editableName
+        // @param {CKEDITOR.plugins.widget.nestedEditableDefinition} editableDefinition The nested editable definition.
+        // @returns {CKEDITOR.filter} Filter instance or `null` if rules are not defined.
+        // @context CKEDITOR.plugins.widget.repository
+        function createEditableFilter( widgetName, editableName, editableDefinition ) {
+                if ( !editableDefinition.allowedContent )
+                        return null;
+
+                var editables = this._.filters[ widgetName ];
+
+                if ( !editables )
+                        this._.filters[ widgetName ] = editables = {};
+
+                var filter = editables[ editableName ];
+
+                if ( !filter )
+                        editables[ editableName ] = filter = new CKEDITOR.filter( editableDefinition.allowedContent );
+
+                return filter;
+        }
+
+        // Creates an iterator function which when executed on all
+        // elements in DOM tree will gather elements that should be wrapped
+        // and initialized as widgets.
+        function createUpcastIterator( widgetsRepo ) {
+                var toBeWrapped = [],
+                        upcasts = widgetsRepo._.upcasts,
+                        upcastCallbacks = widgetsRepo._.upcastCallbacks;
+
+                return {
+                        toBeWrapped: toBeWrapped,
+
+                        iterator: function( element ) {
+                                var upcast, upcasted,
+                                        data,
+                                        i,
+                                        upcastsLength,
+                                        upcastCallbacksLength;
+
+                                // Wrapper found - find widget element, add it to be
+                                // cleaned up (unwrapped) and wrapped and stop iterating in this branch.
+                                if ( 'data-cke-widget-wrapper' in element.attributes ) {
+                                        element = element.getFirst( Widget.isParserWidgetElement );
+
+                                        if ( element )
+                                                toBeWrapped.push( [ element ] );
+
+                                        // Do not iterate over descendants.
+                                        return false;
+                                }
+                                // Widget element found - add it to be cleaned up (just in case)
+                                // and wrapped and stop iterating in this branch.
+                                else if ( 'data-widget' in element.attributes ) {
+                                        toBeWrapped.push( [ element ] );
+
+                                        // Do not iterate over descendants.
+                                        return false;
+                                }
+                                else if ( ( upcastsLength = upcasts.length ) ) {
+                                        // Ignore elements with data-cke-widget-upcasted to avoid multiple upcasts (http://dev.ckeditor.com/ticket/11533).
+                                        // Do not iterate over descendants.
+                                        if ( element.attributes[ 'data-cke-widget-upcasted' ] )
+                                                return false;
+
+                                        // Check element with upcast callbacks first.
+                                        // If any of them return false abort upcasting.
+                                        for ( i = 0, upcastCallbacksLength = upcastCallbacks.length; i < upcastCallbacksLength; ++i ) {
+                                                if ( upcastCallbacks[ i ]( element ) === false )
+                                                        return;
+                                                // Return nothing in order to continue iterating over ascendants.
+                                                // See http://dev.ckeditor.com/ticket/11186#comment:6
+                                        }
+
+                                        for ( i = 0; i < upcastsLength; ++i ) {
+                                                upcast = upcasts[ i ];
+                                                data = {};
+
+                                                if ( ( upcasted = upcast[ 0 ]( element, data ) ) ) {
+                                                        // If upcast function returned element, upcast this one.
+                                                        // It can be e.g. a new element wrapping the original one.
+                                                        if ( upcasted instanceof CKEDITOR.htmlParser.element )
+                                                                element = upcasted;
+
+                                                        // Set initial data attr with data from upcast method.
+                                                        element.attributes[ 'data-cke-widget-data' ] = encodeURIComponent( JSON.stringify( data ) );
+                                                        element.attributes[ 'data-cke-widget-upcasted' ] = 1;
+
+                                                        toBeWrapped.push( [ element, upcast[ 1 ] ] );
+
+                                                        // Do not iterate over descendants.
+                                                        return false;
+                                                }
+                                        }
+                                }
+                        }
+                };
+        }
+
+        // Finds a first parent that matches query.
+        //
+        // @param {CKEDITOR.dom.element} element
+        // @param {Function} query
+        function findParent( element, query ) {
+                var parent = element;
+
+                while ( ( parent = parent.getParent() ) ) {
+                        if ( query( parent ) )
+                                return true;
+                }
+                return false;
+        }
+
+        function getWrapperAttributes( inlineWidget, name ) {
+                return {
+                        // tabindex="-1" means that it can receive focus by code.
+                        tabindex: -1,
+                        contenteditable: 'false',
+                        'data-cke-widget-wrapper': 1,
+                        'data-cke-filter': 'off',
+                        // Class cke_widget_new marks widgets which haven't been initialized yet.
+                        'class': 'cke_widget_wrapper cke_widget_new cke_widget_' +
+                                ( inlineWidget ? 'inline' : 'block' ) +
+                                ( name ? ' cke_widget_' + name : '' )
+                };
+        }
+
+        // Inserts element at given index.
+        // It will check DTD and split ancestor elements up to the first
+        // that can contain this element.
+        //
+        // @param {CKEDITOR.htmlParser.element} parent
+        // @param {Number} index
+        // @param {CKEDITOR.htmlParser.element} element
+        function insertElement( parent, index, element ) {
+                // Do not split doc fragment...
+                if ( parent.type == CKEDITOR.NODE_ELEMENT ) {
+                        var parentAllows = CKEDITOR.dtd[ parent.name ];
+                        // Parent element is known (included in DTD) and cannot contain
+                        // this element.
+                        if ( parentAllows && !parentAllows[ element.name ] ) {
+                                var parent2 = parent.split( index ),
+                                        parentParent = parent.parent;
+
+                                // Element will now be inserted at right parent's index.
+                                index = parent2.getIndex();
+
+                                // If left part of split is empty - remove it.
+                                if ( !parent.children.length ) {
+                                        index -= 1;
+                                        parent.remove();
+                                }
+
+                                // If right part of split is empty - remove it.
+                                if ( !parent2.children.length )
+                                        parent2.remove();
+
+                                // Try inserting as grandpas' children.
+                                return insertElement( parentParent, index, element );
+                        }
+                }
+
+                // Finally we can add this element.
+                parent.add( element, index );
+        }
+
+        // Checks whether for the given widget definition and element widget should be created in inline or block mode.
+        //
+        // See also: {@link CKEDITOR.plugins.widget.definition#inline} and {@link CKEDITOR.plugins.widget#element}.
+        //
+        // @param {CKEDITOR.plugins.widget.definition} widgetDef The widget definition.
+        // @param {String} elementName The name of the widget element.
+        // @returns {Boolean}
+        function isWidgetInline( widgetDef, elementName ) {
+                return typeof widgetDef.inline == 'boolean' ? widgetDef.inline : !!CKEDITOR.dtd.$inline[ elementName ];
+        }
+
+        // @param {CKEDITOR.dom.element}
+        // @returns {Boolean}
+        function isDomTemp( element ) {
+                return element.hasAttribute( 'data-cke-temp' );
+        }
+
+        function onEditableKey( widget, keyCode ) {
+                var focusedEditable = widget.focusedEditable,
+                        range;
+
+                // CTRL+A.
+                if ( keyCode == CKEDITOR.CTRL + 65 ) {
+                        var bogus = focusedEditable.getBogus();
+
+                        range = widget.editor.createRange();
+                        range.selectNodeContents( focusedEditable );
+                        // Exclude bogus if exists.
+                        if ( bogus )
+                                range.setEndAt( bogus, CKEDITOR.POSITION_BEFORE_START );
+
+                        range.select();
+                        // Cancel event - block default.
+                        return false;
+                }
+                // DEL or BACKSPACE.
+                else if ( keyCode == 8 || keyCode == 46 ) {
+                        var ranges = widget.editor.getSelection().getRanges();
+
+                        range = ranges[ 0 ];
+
+                        // Block del or backspace if at editable's boundary.
+                        return !( ranges.length == 1 && range.collapsed &&
+                                range.checkBoundaryOfElement( focusedEditable, CKEDITOR[ keyCode == 8 ? 'START' : 'END' ] ) );
+                }
+        }
+
+        function setFocusedEditable( widgetsRepo, widget, editableElement, offline ) {
+                var editor = widgetsRepo.editor;
+
+                editor.fire( 'lockSnapshot' );
+
+                if ( editableElement ) {
+                        var editableName = editableElement.data( 'cke-widget-editable' ),
+                                editableInstance = widget.editables[ editableName ];
+
+                        widgetsRepo.widgetHoldingFocusedEditable = widget;
+                        widget.focusedEditable = editableInstance;
+                        editableElement.addClass( 'cke_widget_editable_focused' );
+
+                        if ( editableInstance.filter )
+                                editor.setActiveFilter( editableInstance.filter );
+                        editor.setActiveEnterMode( editableInstance.enterMode, editableInstance.shiftEnterMode );
+                } else {
+                        if ( !offline )
+                                widget.focusedEditable.removeClass( 'cke_widget_editable_focused' );
+
+                        widget.focusedEditable = null;
+                        widgetsRepo.widgetHoldingFocusedEditable = null;
+                        editor.setActiveFilter( null );
+                        editor.setActiveEnterMode( null, null );
+                }
+
+                editor.fire( 'unlockSnapshot' );
+        }
+
+        function setupContextMenu( editor ) {
+                if ( !editor.contextMenu )
+                        return;
+
+                editor.contextMenu.addListener( function( element ) {
+                        var widget = editor.widgets.getByElement( element, true );
+
+                        if ( widget )
+                                return widget.fire( 'contextMenu', {} );
+                } );
+        }
+
+        // And now we've got two problems - original problem and RegExp.
+        // Some softeners:
+        // * FF tends to copy all blocks up to the copybin container.
+        // * IE tends to copy only the copybin, without its container.
+        // * We use spans on IE and blockless editors, but divs in other cases.
+        var pasteReplaceRegex = new RegExp(
+                '^' +
+                '(?:<(?:div|span)(?: data-cke-temp="1")?(?: id="cke_copybin")?(?: data-cke-temp="1")?>)?' +
+                        '(?:<(?:div|span)(?: style="[^"]+")?>)?' +
+                                '<span [^>]*data-cke-copybin-start="1"[^>]*>.?</span>([\\s\\S]+)<span [^>]*data-cke-copybin-end="1"[^>]*>.?</span>' +
+                        '(?:</(?:div|span)>)?' +
+                '(?:</(?:div|span)>)?' +
+                '$',
+                // IE8 prefers uppercase when browsers stick to lowercase HTML (http://dev.ckeditor.com/ticket/13460).
+                'i'
+        );
+
+        function pasteReplaceFn( match, wrapperHtml ) {
+                // Avoid polluting pasted data with any whitspaces,
+                // what's going to break check whether only one widget was pasted.
+                return CKEDITOR.tools.trim( wrapperHtml );
+        }
+
+        function setupDragAndDrop( widgetsRepo ) {
+                var editor = widgetsRepo.editor,
+                        lineutils = CKEDITOR.plugins.lineutils;
+
+                // These listeners handle inline and block widgets drag and drop.
+                // The only thing we need to do to make block widgets custom drag and drop functionality
+                // is to fire those events with the right properties (like the target which must be the drag handle).
+                editor.on( 'dragstart', function( evt ) {
+                        var target = evt.data.target;
+
+                        if ( Widget.isDomDragHandler( target ) ) {
+                                var widget = widgetsRepo.getByElement( target );
+
+                                evt.data.dataTransfer.setData( 'cke/widget-id', widget.id );
+
+                                // IE needs focus.
+                                editor.focus();
+
+                                // and widget need to be focused on drag start (http://dev.ckeditor.com/ticket/12172#comment:10).
+                                widget.focus();
+                        }
+                } );
+
+                editor.on( 'drop', function( evt ) {
+                        var dataTransfer = evt.data.dataTransfer,
+                                id = dataTransfer.getData( 'cke/widget-id' ),
+                                transferType = dataTransfer.getTransferType( editor ),
+                                dragRange = editor.createRange(),
+                                sourceWidget;
+
+                        // Disable cross-editor drag & drop for widgets - http://dev.ckeditor.com/ticket/13599.
+                        if ( id !== '' && transferType === CKEDITOR.DATA_TRANSFER_CROSS_EDITORS ) {
+                                evt.cancel();
+                                return;
+                        }
+
+                        if ( id === '' || transferType != CKEDITOR.DATA_TRANSFER_INTERNAL ) {
+                                return;
+                        }
+
+                        sourceWidget = widgetsRepo.instances[ id ];
+                        if ( !sourceWidget ) {
+                                return;
+                        }
+
+                        dragRange.setStartBefore( sourceWidget.wrapper );
+                        dragRange.setEndAfter( sourceWidget.wrapper );
+                        evt.data.dragRange = dragRange;
+
+                        // [IE8-9] Reset state of the clipboard#fixSplitNodesAfterDrop fix because by setting evt.data.dragRange
+                        // (see above) after drop happened we do not need it. That fix is needed only if dragRange was created
+                        // before drop (before text node was split).
+                        delete CKEDITOR.plugins.clipboard.dragStartContainerChildCount;
+                        delete CKEDITOR.plugins.clipboard.dragEndContainerChildCount;
+
+                        evt.data.dataTransfer.setData( 'text/html', editor.editable().getHtmlFromRange( dragRange ).getHtml() );
+                        editor.widgets.destroy( sourceWidget, true );
+                } );
+
+                editor.on( 'contentDom', function() {
+                        var editable = editor.editable();
+
+                        // Register Lineutils's utilities as properties of repo.
+                        CKEDITOR.tools.extend( widgetsRepo, {
+                                finder: new lineutils.finder( editor, {
+                                        lookups: {
+                                                // Element is block but not list item and not in nested editable.
+                                                'default': function( el ) {
+                                                        if ( el.is( CKEDITOR.dtd.$listItem ) )
+                                                                return;
+
+                                                        if ( !el.is( CKEDITOR.dtd.$block ) )
+                                                                return;
+
+                                                        // Allow drop line inside, but never before or after nested editable (http://dev.ckeditor.com/ticket/12006).
+                                                        if ( Widget.isDomNestedEditable( el ) )
+                                                                return;
+
+                                                        // Do not allow droping inside the widget being dragged (http://dev.ckeditor.com/ticket/13397).
+                                                        if ( widgetsRepo._.draggedWidget.wrapper.contains( el ) ) {
+                                                                return;
+                                                        }
+
+                                                        // If element is nested editable, make sure widget can be dropped there (http://dev.ckeditor.com/ticket/12006).
+                                                        var nestedEditable = Widget.getNestedEditable( editable, el );
+                                                        if ( nestedEditable ) {
+                                                                var draggedWidget = widgetsRepo._.draggedWidget;
+
+                                                                // Don't let the widget to be dropped into its own nested editable.
+                                                                if ( widgetsRepo.getByElement( nestedEditable ) == draggedWidget )
+                                                                        return;
+
+                                                                var filter = CKEDITOR.filter.instances[ nestedEditable.data( 'cke-filter' ) ],
+                                                                        draggedRequiredContent = draggedWidget.requiredContent;
+
+                                                                // There will be no relation if the filter of nested editable does not allow
+                                                                // requiredContent of dragged widget.
+                                                                if ( filter && draggedRequiredContent && !filter.check( draggedRequiredContent ) )
+                                                                        return;
+                                                        }
+
+                                                        return CKEDITOR.LINEUTILS_BEFORE | CKEDITOR.LINEUTILS_AFTER;
+                                                }
+                                        }
+                                } ),
+                                locator: new lineutils.locator( editor ),
+                                liner: new lineutils.liner( editor, {
+                                        lineStyle: {
+                                                cursor: 'move !important',
+                                                'border-top-color': '#666'
+                                        },
+                                        tipLeftStyle: {
+                                                'border-left-color': '#666'
+                                        },
+                                        tipRightStyle: {
+                                                'border-right-color': '#666'
+                                        }
+                                } )
+                        }, true );
+                } );
+        }
+
+        // Setup mouse observer which will trigger:
+        // * widget focus on widget click,
+        // * widget#doubleclick forwarded from editor#doubleclick.
+        function setupMouseObserver( widgetsRepo ) {
+                var editor = widgetsRepo.editor;
+
+                editor.on( 'contentDom', function() {
+                        var editable = editor.editable(),
+                                evtRoot = editable.isInline() ? editable : editor.document,
+                                widget,
+                                mouseDownOnDragHandler;
+
+                        editable.attachListener( evtRoot, 'mousedown', function( evt ) {
+                                var target = evt.data.getTarget();
+
+                                // http://dev.ckeditor.com/ticket/10887 Clicking scrollbar in IE8 will invoke event with empty target object.
+                                if ( !target.type )
+                                        return false;
+
+                                widget = widgetsRepo.getByElement( target );
+                                mouseDownOnDragHandler = 0; // Reset.
+
+                                // Widget was clicked, but not editable nested in it.
+                                if ( widget ) {
+                                        // Ignore mousedown on drag and drop handler if the widget is inline.
+                                        // Block widgets are handled by Lineutils.
+                                        if ( widget.inline && target.type == CKEDITOR.NODE_ELEMENT && target.hasAttribute( 'data-cke-widget-drag-handler' ) ) {
+                                                mouseDownOnDragHandler = 1;
+
+                                                // When drag handler is pressed we have to clear current selection if it wasn't already on this widget.
+                                                // Otherwise, the selection may be in a fillingChar, which prevents dragging a widget. (http://dev.ckeditor.com/ticket/13284, see comment 8 and 9.)
+                                                if ( widgetsRepo.focused != widget )
+                                                        editor.getSelection().removeAllRanges();
+
+                                                return;
+                                        }
+
+                                        if ( !Widget.getNestedEditable( widget.wrapper, target ) ) {
+                                                evt.data.preventDefault();
+                                                if ( !CKEDITOR.env.ie )
+                                                        widget.focus();
+                                        } else {
+                                                // Reset widget so mouseup listener is not confused.
+                                                widget = null;
+                                        }
+                                }
+                        } );
+
+                        // Focus widget on mouseup if mousedown was fired on drag handler.
+                        // Note: mouseup won't be fired at all if widget was dragged and dropped, so
+                        // this code will be executed only when drag handler was clicked.
+                        editable.attachListener( evtRoot, 'mouseup', function() {
+                                // Check if widget is not destroyed (if widget is destroyed the wrapper will be null).
+                                if ( mouseDownOnDragHandler && widget && widget.wrapper ) {
+                                        mouseDownOnDragHandler = 0;
+                                        widget.focus();
+                                }
+                        } );
+
+                        // On IE it is not enough to block mousedown. If widget wrapper (element with
+                        // contenteditable=false attribute) is clicked directly (it is a target),
+                        // then after mouseup/click IE will select that element.
+                        // It is not possible to prevent that default action,
+                        // so we force fake selection after everything happened.
+                        if ( CKEDITOR.env.ie ) {
+                                editable.attachListener( evtRoot, 'mouseup', function() {
+                                        setTimeout( function() {
+                                                // Check if widget is not destroyed (if widget is destroyed the wrapper will be null) and
+                                                // in editable contains widget (it could be dragged and removed).
+                                                if ( widget && widget.wrapper && editable.contains( widget.wrapper ) ) {
+                                                        widget.focus();
+                                                        widget = null;
+                                                }
+                                        } );
+                                } );
+                        }
+                } );
+
+                editor.on( 'doubleclick', function( evt ) {
+                        var widget = widgetsRepo.getByElement( evt.data.element );
+
+                        // Not in widget or in nested editable.
+                        if ( !widget || Widget.getNestedEditable( widget.wrapper, evt.data.element ) )
+                                return;
+
+                        return widget.fire( 'doubleclick', { element: evt.data.element } );
+                }, null, null, 1 );
+        }
+
+        // Setup editor#key observer which will forward it
+        // to focused widget.
+        function setupKeyboardObserver( widgetsRepo ) {
+                var editor = widgetsRepo.editor;
+
+                editor.on( 'key', function( evt ) {
+                        var focused = widgetsRepo.focused,
+                                widgetHoldingFocusedEditable = widgetsRepo.widgetHoldingFocusedEditable,
+                                ret;
+
+                        if ( focused )
+                                ret = focused.fire( 'key', { keyCode: evt.data.keyCode } );
+                        else if ( widgetHoldingFocusedEditable )
+                                ret = onEditableKey( widgetHoldingFocusedEditable, evt.data.keyCode );
+
+                        return ret;
+                }, null, null, 1 );
+        }
+
+        // Setup copybin on native copy and cut events in order to handle copy and cut commands
+        // if user accepted security alert on IEs.
+        // Note: when copying or cutting using keystroke, copySingleWidget will be first executed
+        // by the keydown listener. Conflict between two calls will be resolved by copy_bin existence check.
+        function setupNativeCutAndCopy( widgetsRepo ) {
+                var editor = widgetsRepo.editor;
+
+                editor.on( 'contentDom', function() {
+                        var editable = editor.editable();
+
+                        editable.attachListener( editable, 'copy', eventListener );
+                        editable.attachListener( editable, 'cut', eventListener );
+                } );
+
+                function eventListener( evt ) {
+                        if ( widgetsRepo.focused )
+                                copySingleWidget( widgetsRepo.focused, evt.name == 'cut' );
+                }
+        }
+
+        // Setup selection observer which will trigger:
+        // * widget select & focus on selection change,
+        // * nested editable focus (related properites and classes) on selection change,
+        // * deselecting and blurring all widgets on data,
+        // * blurring widget on editor blur.
+        function setupSelectionObserver( widgetsRepo ) {
+                var editor = widgetsRepo.editor;
+
+                editor.on( 'selectionCheck', function() {
+                        widgetsRepo.fire( 'checkSelection' );
+                } );
+
+                widgetsRepo.on( 'checkSelection', widgetsRepo.checkSelection, widgetsRepo );
+
+                editor.on( 'selectionChange', function( evt ) {
+                        var nestedEditable = Widget.getNestedEditable( editor.editable(), evt.data.selection.getStartElement() ),
+                                newWidget = nestedEditable && widgetsRepo.getByElement( nestedEditable ),
+                                oldWidget = widgetsRepo.widgetHoldingFocusedEditable;
+
+                        if ( oldWidget ) {
+                                if ( oldWidget !== newWidget || !oldWidget.focusedEditable.equals( nestedEditable ) ) {
+                                        setFocusedEditable( widgetsRepo, oldWidget, null );
+
+                                        if ( newWidget && nestedEditable )
+                                                setFocusedEditable( widgetsRepo, newWidget, nestedEditable );
+                                }
+                        }
+                        // It may happen that there's no widget even if editable was found -
+                        // e.g. if selection was automatically set in editable although widget wasn't initialized yet.
+                        else if ( newWidget && nestedEditable ) {
+                                setFocusedEditable( widgetsRepo, newWidget, nestedEditable );
+                        }
+                } );
+
+                // Invalidate old widgets early - immediately on dataReady.
+                editor.on( 'dataReady', function() {
+                        // Deselect and blur all widgets.
+                        stateUpdater( widgetsRepo ).commit();
+                } );
+
+                editor.on( 'blur', function() {
+                        var widget;
+
+                        if ( ( widget = widgetsRepo.focused ) )
+                                blurWidget( widgetsRepo, widget );
+
+                        if ( ( widget = widgetsRepo.widgetHoldingFocusedEditable ) )
+                                setFocusedEditable( widgetsRepo, widget, null );
+                } );
+        }
+
+        // Set up actions like:
+        // * processing in toHtml/toDataFormat,
+        // * pasting handling,
+        // * insertion handling,
+        // * editable reload handling (setData, mode switch, undo/redo),
+        // * DOM invalidation handling,
+        // * widgets checks.
+        function setupWidgetsLifecycle( widgetsRepo ) {
+                setupWidgetsLifecycleStart( widgetsRepo );
+                setupWidgetsLifecycleEnd( widgetsRepo );
+
+                widgetsRepo.on( 'checkWidgets', checkWidgets );
+                widgetsRepo.editor.on( 'contentDomInvalidated', widgetsRepo.checkWidgets, widgetsRepo );
+        }
+
+        function setupWidgetsLifecycleEnd( widgetsRepo ) {
+                var editor = widgetsRepo.editor,
+                        downcastingSessions = {};
+
+                // Listen before htmlDP#htmlFilter is applied to cache all widgets, because we'll
+                // loose data-cke-* attributes.
+                editor.on( 'toDataFormat', function( evt ) {
+                        // To avoid conflicts between htmlDP#toDF calls done at the same time
+                        // (e.g. nestedEditable#getData called during downcasting some widget)
+                        // mark every toDataFormat event chain with the downcasting session id.
+                        var id = CKEDITOR.tools.getNextNumber(),
+                                toBeDowncasted = [];
+                        evt.data.downcastingSessionId = id;
+                        downcastingSessions[ id ] = toBeDowncasted;
+
+                        evt.data.dataValue.forEach( function( element ) {
+                                var attrs = element.attributes,
+                                        widget, widgetElement;
+
+                                // Wrapper.
+                                // Perform first part of downcasting (cleanup) and cache widgets,
+                                // because after applying DP's filter all data-cke-* attributes will be gone.
+                                if ( 'data-cke-widget-id' in attrs ) {
+                                        widget = widgetsRepo.instances[ attrs[ 'data-cke-widget-id' ] ];
+                                        if ( widget ) {
+                                                widgetElement = element.getFirst( Widget.isParserWidgetElement );
+                                                toBeDowncasted.push( {
+                                                        wrapper: element,
+                                                        element: widgetElement,
+                                                        widget: widget,
+                                                        editables: {}
+                                                } );
+
+                                                // If widget did not have data-cke-widget attribute before upcasting remove it.
+                                                if ( widgetElement.attributes[ 'data-cke-widget-keep-attr' ] != '1' )
+                                                        delete widgetElement.attributes[ 'data-widget' ];
+                                        }
+                                }
+                                // Nested editable.
+                                else if ( 'data-cke-widget-editable' in attrs ) {
+                                        // Save the reference to this nested editable in the closest widget to be downcasted.
+                                        // Nested editables are downcasted in the successive toDataFormat to create an opportunity
+                                        // for dataFilter's "excludeNestedEditable" option to do its job (that option relies on
+                                        // contenteditable="true" attribute) (http://dev.ckeditor.com/ticket/11372).
+                                        toBeDowncasted[ toBeDowncasted.length - 1 ].editables[ attrs[ 'data-cke-widget-editable' ] ] = element;
+
+                                        // Don't check children - there won't be next wrapper or nested editable which we
+                                        // should process in this session.
+                                        return false;
+                                }
+                        }, CKEDITOR.NODE_ELEMENT, true );
+                }, null, null, 8 );
+
+                // Listen after dataProcessor.htmlFilter and ACF were applied
+                // so wrappers securing widgets' contents are removed after all filtering was done.
+                editor.on( 'toDataFormat', function( evt ) {
+                        // Ignore some unmarked sessions.
+                        if ( !evt.data.downcastingSessionId )
+                                return;
+
+                        var toBeDowncasted = downcastingSessions[ evt.data.downcastingSessionId ],
+                                toBe, widget, widgetElement, retElement, editableElement, e;
+
+                        while ( ( toBe = toBeDowncasted.shift() ) ) {
+                                widget = toBe.widget;
+                                widgetElement = toBe.element;
+                                retElement = widget._.downcastFn && widget._.downcastFn.call( widget, widgetElement );
+
+                                // Replace nested editables' content with their output data.
+                                for ( e in toBe.editables ) {
+                                        editableElement = toBe.editables[ e ];
+
+                                        delete editableElement.attributes.contenteditable;
+                                        editableElement.setHtml( widget.editables[ e ].getData() );
+                                }
+
+                                // Returned element always defaults to widgetElement.
+                                if ( !retElement )
+                                        retElement = widgetElement;
+
+                                toBe.wrapper.replaceWith( retElement );
+                        }
+                }, null, null, 13 );
+
+
+                editor.on( 'contentDomUnload', function() {
+                        widgetsRepo.destroyAll( true );
+                } );
+        }
+
+        function setupWidgetsLifecycleStart( widgetsRepo ) {
+                var editor = widgetsRepo.editor,
+                        processedWidgetOnly,
+                        snapshotLoaded;
+
+                // Listen after ACF (so data are filtered),
+                // but before dataProcessor.dataFilter was applied (so we can secure widgets' internals).
+                editor.on( 'toHtml', function( evt ) {
+                        var upcastIterator = createUpcastIterator( widgetsRepo ),
+                                toBeWrapped;
+
+                        evt.data.dataValue.forEach( upcastIterator.iterator, CKEDITOR.NODE_ELEMENT, true );
+
+                        // Clean up and wrap all queued elements.
+                        while ( ( toBeWrapped = upcastIterator.toBeWrapped.pop() ) ) {
+                                cleanUpWidgetElement( toBeWrapped[ 0 ] );
+                                widgetsRepo.wrapElement( toBeWrapped[ 0 ], toBeWrapped[ 1 ] );
+                        }
+
+                        // Used to determine whether only widget was pasted.
+                        if ( evt.data.protectedWhitespaces ) {
+                                // Whitespaces are protected by wrapping content with spans. Take the middle node only.
+                                processedWidgetOnly = evt.data.dataValue.children.length == 3 &&
+                                        Widget.isParserWidgetWrapper( evt.data.dataValue.children[ 1 ] );
+                        } else {
+                                processedWidgetOnly = evt.data.dataValue.children.length == 1 &&
+                                        Widget.isParserWidgetWrapper( evt.data.dataValue.children[ 0 ] );
+                        }
+                }, null, null, 8 );
+
+                editor.on( 'dataReady', function() {
+                        // Clean up all widgets loaded from snapshot.
+                        if ( snapshotLoaded )
+                                cleanUpAllWidgetElements( widgetsRepo, editor.editable() );
+                        snapshotLoaded = 0;
+
+                        // Some widgets were destroyed on contentDomUnload,
+                        // some on loadSnapshot, but that does not include
+                        // e.g. setHtml on inline editor or widgets removed just
+                        // before setting data.
+                        widgetsRepo.destroyAll( true );
+                        widgetsRepo.initOnAll();
+                } );
+
+                // Set flag so dataReady will know that additional
+                // cleanup is needed, because snapshot containing widgets was loaded.
+                editor.on( 'loadSnapshot', function( evt ) {
+                        // Primitive but sufficient check which will prevent from executing
+                        // heavier cleanUpAllWidgetElements if not needed.
+                        if ( ( /data-cke-widget/ ).test( evt.data ) )
+                                snapshotLoaded = 1;
+
+                        widgetsRepo.destroyAll( true );
+                }, null, null, 9 );
+
+                // Handle pasted single widget.
+                editor.on( 'paste', function( evt ) {
+                        var data = evt.data;
+
+                        data.dataValue = data.dataValue.replace( pasteReplaceRegex, pasteReplaceFn );
+
+                        // If drag'n'drop kind of paste into nested editable (data.range), selection is set AFTER
+                        // data is pasted, which means editor has no chance to change activeFilter's context.
+                        // As a result, pasted data is filtered with default editor's filter instead of NE's and
+                        // funny things get inserted. Changing the filter by analysis of the paste range below (http://dev.ckeditor.com/ticket/13186).
+                        if ( data.range ) {
+                                // Check if pasting into nested editable.
+                                var nestedEditable = Widget.getNestedEditable( editor.editable(), data.range.startContainer );
+
+                                if ( nestedEditable ) {
+                                        // Retrieve the filter from NE's data and set it active before editor.insertHtml is done
+                                        // in clipboard plugin.
+                                        var filter = CKEDITOR.filter.instances[ nestedEditable.data( 'cke-filter' ) ];
+
+                                        if ( filter ) {
+                                                editor.setActiveFilter( filter );
+                                        }
+                                }
+                        }
+                } );
+
+                // Listen with high priority to check widgets after data was inserted.
+                editor.on( 'afterInsertHtml', function( evt ) {
+                        if ( evt.data.intoRange ) {
+                                widgetsRepo.checkWidgets( { initOnlyNew: true } );
+                        } else {
+                                editor.fire( 'lockSnapshot' );
+                                // Init only new for performance reason.
+                                // Focus inited if only widget was processed.
+                                widgetsRepo.checkWidgets( { initOnlyNew: true, focusInited: processedWidgetOnly } );
+
+                                editor.fire( 'unlockSnapshot' );
+                        }
+                } );
+        }
+
+        // Helper for coordinating which widgets should be
+        // selected/deselected and which one should be focused/blurred.
+        function stateUpdater( widgetsRepo ) {
+                var currentlySelected = widgetsRepo.selected,
+                        toBeSelected = [],
+                        toBeDeselected = currentlySelected.slice( 0 ),
+                        focused = null;
+
+                return {
+                        select: function( widget ) {
+                                if ( CKEDITOR.tools.indexOf( currentlySelected, widget ) < 0 )
+                                        toBeSelected.push( widget );
+
+                                var index = CKEDITOR.tools.indexOf( toBeDeselected, widget );
+                                if ( index >= 0 )
+                                        toBeDeselected.splice( index, 1 );
+
+                                return this;
+                        },
+
+                        focus: function( widget ) {
+                                focused = widget;
+                                return this;
+                        },
+
+                        commit: function() {
+                                var focusedChanged = widgetsRepo.focused !== focused,
+                                        widget, isDirty;
+
+                                widgetsRepo.editor.fire( 'lockSnapshot' );
+
+                                if ( focusedChanged && ( widget = widgetsRepo.focused ) )
+                                        blurWidget( widgetsRepo, widget );
+
+                                while ( ( widget = toBeDeselected.pop() ) ) {
+                                        currentlySelected.splice( CKEDITOR.tools.indexOf( currentlySelected, widget ), 1 );
+                                        // Widget could be destroyed in the meantime - e.g. data could be set.
+                                        if ( widget.isInited() ) {
+                                                isDirty = widget.editor.checkDirty();
+
+                                                widget.setSelected( false );
+
+                                                !isDirty && widget.editor.resetDirty();
+                                        }
+                                }
+
+                                if ( focusedChanged && focused ) {
+                                        isDirty = widgetsRepo.editor.checkDirty();
+
+                                        widgetsRepo.focused = focused;
+                                        widgetsRepo.fire( 'widgetFocused', { widget: focused } );
+                                        focused.setFocused( true );
+
+                                        !isDirty && widgetsRepo.editor.resetDirty();
+                                }
+
+                                while ( ( widget = toBeSelected.pop() ) ) {
+                                        currentlySelected.push( widget );
+                                        widget.setSelected( true );
+                                }
+
+                                widgetsRepo.editor.fire( 'unlockSnapshot' );
+                        }
+                };
+        }
+
+
+        //
+        // WIDGET helpers ---------------------------------------------------------
+        //
+
+        // LEFT, RIGHT, UP, DOWN, DEL, BACKSPACE - unblock default fake sel handlers.
+        var keystrokesNotBlockedByWidget = { 37: 1, 38: 1, 39: 1, 40: 1, 8: 1, 46: 1 };
+
+        // Applies or removes style's classes from widget.
+        // @param {CKEDITOR.style} style Custom widget style.
+        // @param {Boolean} apply Whether to apply or remove style.
+        function applyRemoveStyle( widget, style, apply ) {
+                var changed = 0,
+                        classes = getStyleClasses( style ),
+                        updatedClasses = widget.data.classes || {},
+                        cl;
+
+                // Ee... Something is wrong with this style.
+                if ( !classes )
+                        return;
+
+                // Clone, because we need to break reference.
+                updatedClasses = CKEDITOR.tools.clone( updatedClasses );
+
+                while ( ( cl = classes.pop() ) ) {
+                        if ( apply ) {
+                                if ( !updatedClasses[ cl ] )
+                                        changed = updatedClasses[ cl ] = 1;
+                        } else {
+                                if ( updatedClasses[ cl ] ) {
+                                        delete updatedClasses[ cl ];
+                                        changed = 1;
+                                }
+                        }
+                }
+                if ( changed )
+                        widget.setData( 'classes', updatedClasses );
+        }
+
+        function cancel( evt ) {
+                evt.cancel();
+        }
+
+        function copySingleWidget( widget, isCut ) {
+                var editor = widget.editor,
+                        doc = editor.document;
+
+                // We're still handling previous copy/cut.
+                // When keystroke is used to copy/cut this will also prevent
+                // conflict with copySingleWidget called again for native copy/cut event.
+                if ( doc.getById( 'cke_copybin' ) )
+                        return;
+
+                        // [IE] Use span for copybin and its container to avoid bug with expanding editable height by
+                        // absolutely positioned element.
+                var copybinName = ( editor.blockless || CKEDITOR.env.ie ) ? 'span' : 'div',
+                        copybin = doc.createElement( copybinName ),
+                        copybinContainer = doc.createElement( copybinName ),
+                        // IE8 always jumps to the end of document.
+                        needsScrollHack = CKEDITOR.env.ie && CKEDITOR.env.version < 9;
+
+                copybinContainer.setAttributes( {
+                        id: 'cke_copybin',
+                        'data-cke-temp': '1'
+                } );
+
+                // Position copybin element outside current viewport.
+                copybin.setStyles( {
+                        position: 'absolute',
+                        width: '1px',
+                        height: '1px',
+                        overflow: 'hidden'
+                } );
+
+                copybin.setStyle( editor.config.contentsLangDirection == 'ltr' ? 'left' : 'right', '-5000px' );
+
+                var range = editor.createRange();
+                range.setStartBefore( widget.wrapper );
+                range.setEndAfter( widget.wrapper );
+
+                copybin.setHtml(
+                        '<span data-cke-copybin-start="1">\u200b</span>' +
+                        editor.editable().getHtmlFromRange( range ).getHtml() +
+                        '<span data-cke-copybin-end="1">\u200b</span>' );
+
+                // Save snapshot with the current state.
+                editor.fire( 'saveSnapshot' );
+
+                // Ignore copybin.
+                editor.fire( 'lockSnapshot' );
+
+                copybinContainer.append( copybin );
+                editor.editable().append( copybinContainer );
+
+                var listener1 = editor.on( 'selectionChange', cancel, null, null, 0 ),
+                        listener2 = widget.repository.on( 'checkSelection', cancel, null, null, 0 );
+
+                if ( needsScrollHack ) {
+                        var docElement = doc.getDocumentElement().$,
+                                scrollTop = docElement.scrollTop;
+                }
+
+                // Once the clone of the widget is inside of copybin, select
+                // the entire contents. This selection will be copied by the
+                // native browser's clipboard system.
+                range = editor.createRange();
+                range.selectNodeContents( copybin );
+                range.select();
+
+                if ( needsScrollHack )
+                        docElement.scrollTop = scrollTop;
+
+                setTimeout( function() {
+                        // [IE] Focus widget before removing copybin to avoid scroll jump.
+                        if ( !isCut )
+                                widget.focus();
+
+                        copybinContainer.remove();
+
+                        listener1.removeListener();
+                        listener2.removeListener();
+
+                        editor.fire( 'unlockSnapshot' );
+
+                        if ( isCut ) {
+                                widget.repository.del( widget );
+                                editor.fire( 'saveSnapshot' );
+                        }
+                }, 100 ); // Use 100ms, so Chrome (@Mac) will be able to grab the content.
+        }
+
+        // Extracts classes array from style instance.
+        function getStyleClasses( style ) {
+                var attrs = style.getDefinition().attributes,
+                        classes = attrs && attrs[ 'class' ];
+
+                return classes ? classes.split( /\s+/ ) : null;
+        }
+
+        // [IE] Force keeping focus because IE sometimes forgets to fire focus on main editable
+        // when blurring nested editable.
+        // @context widget
+        function onEditableBlur() {
+                var active = CKEDITOR.document.getActive(),
+                        editor = this.editor,
+                        editable = editor.editable();
+
+                // If focus stays within editor override blur and set currentActive because it should be
+                // automatically changed to editable on editable#focus but it is not fired.
+                if ( ( editable.isInline() ? editable : editor.document.getWindow().getFrame() ).equals( active ) )
+                        editor.focusManager.focus( editable );
+        }
+
+        // Force selectionChange when editable was focused.
+        // Similar to hack in selection.js#~620.
+        // @context widget
+        function onEditableFocus() {
+                // Gecko does not support 'DOMFocusIn' event on which we unlock selection
+                // in selection.js to prevent selection locking when entering nested editables.
+                if ( CKEDITOR.env.gecko )
+                        this.editor.unlockSelection();
+
+                // We don't need to force selectionCheck on Webkit, because on Webkit
+                // we do that on DOMFocusIn in selection.js.
+                if ( !CKEDITOR.env.webkit ) {
+                        this.editor.forceNextSelectionCheck();
+                        this.editor.selectionChange( 1 );
+                }
+        }
+
+        // Setup listener on widget#data which will update (remove/add) classes
+        // by comparing newly set classes with the old ones.
+        function setupDataClassesListener( widget ) {
+                // Note: previousClasses and newClasses may be null!
+                // Tip: for ( cl in null ) is correct.
+                var previousClasses = null;
+
+                widget.on( 'data', function() {
+                        var newClasses = this.data.classes,
+                                cl;
+
+                        // When setting new classes one need to remember
+                        // that he must break reference.
+                        if ( previousClasses == newClasses )
+                                return;
+
+                        for ( cl in previousClasses ) {
+                                // Avoid removing and adding classes again.
+                                if ( !( newClasses && newClasses[ cl ] ) )
+                                        this.removeClass( cl );
+                        }
+                        for ( cl in newClasses )
+                                this.addClass( cl );
+
+                        previousClasses = newClasses;
+                } );
+        }
+
+        // Add a listener to data event that will set/change widget's label (http://dev.ckeditor.com/ticket/14539).
+        function setupA11yListener( widget ) {
+                // Note, the function gets executed in a context of widget instance.
+                function getLabelDefault() {
+                        return this.editor.lang.widget.label.replace( /%1/, this.pathName || this.element.getName() );
+                }
+
+                // Setting a listener on data is enough, there's no need to perform it on widget initialization, as
+                // setupWidgetData fires this event anyway.
+                widget.on( 'data', function() {
+                        // In some cases widget might get destroyed in an earlier data listener. For instance, image2 plugin, does
+                        // so when changing its internal state.
+                        if ( !widget.wrapper ) {
+                                return;
+                        }
+
+                        var label = this.getLabel ? this.getLabel() : getLabelDefault.call( this );
+
+                        widget.wrapper.setAttribute( 'role', 'region' );
+                        widget.wrapper.setAttribute( 'aria-label', label );
+                }, null, null, 9999 );
+        }
+
+        function setupDragHandler( widget ) {
+                if ( !widget.draggable )
+                        return;
+
+                var editor = widget.editor,
+                        // Use getLast to find wrapper's direct descendant (http://dev.ckeditor.com/ticket/12022).
+                        container = widget.wrapper.getLast( Widget.isDomDragHandlerContainer ),
+                        img;
+
+                // Reuse drag handler if already exists (http://dev.ckeditor.com/ticket/11281).
+                if ( container )
+                        img = container.findOne( 'img' );
+                else {
+                        container = new CKEDITOR.dom.element( 'span', editor.document );
+                        container.setAttributes( {
+                                'class': 'cke_reset cke_widget_drag_handler_container',
+                                // Split background and background-image for IE8 which will break on rgba().
+                                style: 'background:rgba(220,220,220,0.5);background-image:url(' + editor.plugins.widget.path + 'images/handle.png)'
+                        } );
+
+                        img = new CKEDITOR.dom.element( 'img', editor.document );
+                        img.setAttributes( {
+                                'class': 'cke_reset cke_widget_drag_handler',
+                                'data-cke-widget-drag-handler': '1',
+                                src: CKEDITOR.tools.transparentImageData,
+                                width: DRAG_HANDLER_SIZE,
+                                title: editor.lang.widget.move,
+                                height: DRAG_HANDLER_SIZE,
+                                role: 'presentation'
+                        } );
+                        widget.inline && img.setAttribute( 'draggable', 'true' );
+
+                        container.append( img );
+                        widget.wrapper.append( container );
+                }
+
+                // Preventing page reload when dropped content on widget wrapper (http://dev.ckeditor.com/ticket/13015).
+                // Widget is not editable so by default drop on it isn't allowed what means that
+                // browser handles it (there's no editable#drop event). If there's no drop event we cannot block
+                // the drop, so page is reloaded. This listener enables drop on widget wrappers.
+                widget.wrapper.on( 'dragover', function( evt ) {
+                        evt.data.preventDefault();
+                } );
+
+                widget.wrapper.on( 'mouseenter', widget.updateDragHandlerPosition, widget );
+                setTimeout( function() {
+                        widget.on( 'data', widget.updateDragHandlerPosition, widget );
+                }, 50 );
+
+                if ( !widget.inline ) {
+                        img.on( 'mousedown', onBlockWidgetDrag, widget );
+
+                        // On IE8 'dragstart' is propagated to editable, so editor#dragstart is fired twice on block widgets.
+                        if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) {
+                                img.on( 'dragstart', function( evt ) {
+                                        evt.data.preventDefault( true );
+                                } );
+                        }
+                }
+
+                widget.dragHandlerContainer = container;
+        }
+
+        function onBlockWidgetDrag( evt ) {
+                var finder = this.repository.finder,
+                        locator = this.repository.locator,
+                        liner = this.repository.liner,
+                        editor = this.editor,
+                        editable = editor.editable(),
+                        listeners = [],
+                        sorted = [],
+                        locations,
+                        y;
+
+                // Mark dragged widget for repository#finder.
+                this.repository._.draggedWidget = this;
+
+                // Harvest all possible relations and display some closest.
+                var relations = finder.greedySearch(),
+
+                        buffer = CKEDITOR.tools.eventsBuffer( 50, function() {
+                                locations = locator.locate( relations );
+
+                                // There's only a single line displayed for D&D.
+                                sorted = locator.sort( y, 1 );
+
+                                if ( sorted.length ) {
+                                        liner.prepare( relations, locations );
+                                        liner.placeLine( sorted[ 0 ] );
+                                        liner.cleanup();
+                                }
+                        } );
+
+                // Let's have the "dragging cursor" over entire editable.
+                editable.addClass( 'cke_widget_dragging' );
+
+                // Cache mouse position so it is re-used in events buffer.
+                listeners.push( editable.on( 'mousemove', function( evt ) {
+                        y = evt.data.$.clientY;
+                        buffer.input();
+                } ) );
+
+                // Fire drag start as it happens during the native D&D.
+                editor.fire( 'dragstart', { target: evt.sender } );
+
+                function onMouseUp() {
+                        var l;
+
+                        buffer.reset();
+
+                        // Stop observing events.
+                        while ( ( l = listeners.pop() ) )
+                                l.removeListener();
+
+                        onBlockWidgetDrop.call( this, sorted, evt.sender );
+                }
+
+                // Mouseup means "drop". This is when the widget is being detached
+                // from DOM and placed at range determined by the line (location).
+                listeners.push( editor.document.once( 'mouseup', onMouseUp, this ) );
+
+                // Prevent calling 'onBlockWidgetDrop' twice in the inline editor.
+                // `removeListener` does not work if it is called at the same time event is fired.
+                if ( !editable.isInline() ) {
+                        // Mouseup may occur when user hovers the line, which belongs to
+                        // the outer document. This is, of course, a valid listener too.
+                        listeners.push( CKEDITOR.document.once( 'mouseup', onMouseUp, this ) );
+                }
+        }
+
+        function onBlockWidgetDrop( sorted, dragTarget ) {
+                var finder = this.repository.finder,
+                        liner = this.repository.liner,
+                        editor = this.editor,
+                        editable = this.editor.editable();
+
+                if ( !CKEDITOR.tools.isEmpty( liner.visible ) ) {
+                        // Retrieve range for the closest location.
+                        var dropRange = finder.getRange( sorted[ 0 ] );
+
+                        // Focus widget (it could lost focus after mousedown+mouseup)
+                        // and save this state as the one where we want to be taken back when undoing.
+                        this.focus();
+
+                        // Drag range will be set in the drop listener.
+                        editor.fire( 'drop', {
+                                dropRange: dropRange,
+                                target: dropRange.startContainer
+                        } );
+                }
+
+                // Clean-up custom cursor for editable.
+                editable.removeClass( 'cke_widget_dragging' );
+
+                // Clean-up all remaining lines.
+                liner.hideVisible();
+
+                // Clean-up drag & drop.
+                editor.fire( 'dragend', { target: dragTarget } );
+        }
+
+        function setupEditables( widget ) {
+                var editableName,
+                        editableDef,
+                        definedEditables = widget.editables;
+
+                widget.editables = {};
+
+                if ( !widget.editables )
+                        return;
+
+                for ( editableName in definedEditables ) {
+                        editableDef = definedEditables[ editableName ];
+                        widget.initEditable( editableName, typeof editableDef == 'string' ? { selector: editableDef } : editableDef );
+                }
+        }
+
+        function setupMask( widget ) {
+                if ( !widget.mask )
+                        return;
+
+                // Reuse mask if already exists (http://dev.ckeditor.com/ticket/11281).
+                var img = widget.wrapper.findOne( '.cke_widget_mask' );
+
+                if ( !img ) {
+                        img = new CKEDITOR.dom.element( 'img', widget.editor.document );
+                        img.setAttributes( {
+                                src: CKEDITOR.tools.transparentImageData,
+                                'class': 'cke_reset cke_widget_mask'
+                        } );
+                        widget.wrapper.append( img );
+                }
+
+                widget.mask = img;
+        }
+
+        // Replace parts object containing:
+        // partName => selector pairs
+        // with:
+        // partName => element pairs
+        function setupParts( widget ) {
+                if ( widget.parts ) {
+                        var parts = {},
+                                el, partName;
+
+                        for ( partName in widget.parts ) {
+                                el = widget.wrapper.findOne( widget.parts[ partName ] );
+                                parts[ partName ] = el;
+                        }
+                        widget.parts = parts;
+                }
+        }
+
+        function setupWidget( widget, widgetDef ) {
+                setupWrapper( widget );
+                setupParts( widget );
+                setupEditables( widget );
+                setupMask( widget );
+                setupDragHandler( widget );
+                setupDataClassesListener( widget );
+                setupA11yListener( widget );
+
+                // http://dev.ckeditor.com/ticket/11145: [IE8] Non-editable content of widget is draggable.
+                if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) {
+                        widget.wrapper.on( 'dragstart', function( evt ) {
+                                var target = evt.data.getTarget();
+
+                                // Allow text dragging inside nested editables or dragging inline widget's drag handler.
+                                if ( !Widget.getNestedEditable( widget, target ) && !( widget.inline && Widget.isDomDragHandler( target ) ) )
+                                        evt.data.preventDefault();
+                        } );
+                }
+
+                widget.wrapper.removeClass( 'cke_widget_new' );
+                widget.element.addClass( 'cke_widget_element' );
+
+                widget.on( 'key', function( evt ) {
+                        var keyCode = evt.data.keyCode;
+
+                        // ENTER.
+                        if ( keyCode == 13 ) {
+                                widget.edit();
+                                // CTRL+C or CTRL+X.
+                        } else if ( keyCode == CKEDITOR.CTRL + 67 || keyCode == CKEDITOR.CTRL + 88 ) {
+                                copySingleWidget( widget, keyCode == CKEDITOR.CTRL + 88 );
+                                return; // Do not preventDefault.
+                        } else if ( keyCode in keystrokesNotBlockedByWidget || ( CKEDITOR.CTRL & keyCode ) || ( CKEDITOR.ALT & keyCode ) ) {
+                                // Pass chosen keystrokes to other plugins or default fake sel handlers.
+                                // Pass all CTRL/ALT keystrokes.
+                                return;
+                        }
+
+                        return false;
+                }, null, null, 999 );
+                // Listen with high priority so it's possible
+                // to overwrite this callback.
+
+                widget.on( 'doubleclick', function( evt ) {
+                        if ( widget.edit() ) {
+                                // We have to cancel event if edit method opens a dialog, otherwise
+                                // link plugin may open extra dialog (http://dev.ckeditor.com/ticket/12140).
+                                evt.cancel();
+                        }
+                } );
+
+                if ( widgetDef.data )
+                        widget.on( 'data', widgetDef.data );
+
+                if ( widgetDef.edit )
+                        widget.on( 'edit', widgetDef.edit );
+        }
+
+        function setupWidgetData( widget, startupData ) {
+                var widgetDataAttr = widget.element.data( 'cke-widget-data' );
+
+                if ( widgetDataAttr )
+                        widget.setData( JSON.parse( decodeURIComponent( widgetDataAttr ) ) );
+                if ( startupData )
+                        widget.setData( startupData );
+
+                // Populate classes if they are not preset.
+                if ( !widget.data.classes )
+                        widget.setData( 'classes', widget.getClasses() );
+
+                // Unblock data and...
+                widget.dataReady = true;
+
+                // Write data to element because this was blocked when data wasn't ready.
+                writeDataToElement( widget );
+
+                // Fire data event first time, because this was blocked when data wasn't ready.
+                widget.fire( 'data', widget.data );
+        }
+
+        function setupWrapper( widget ) {
+                // Retrieve widget wrapper. Assign an id to it.
+                var wrapper = widget.wrapper = widget.element.getParent();
+                wrapper.setAttribute( 'data-cke-widget-id', widget.id );
+        }
+
+        function writeDataToElement( widget ) {
+                widget.element.data( 'cke-widget-data', encodeURIComponent( JSON.stringify( widget.data ) ) );
+        }
+
+        //
+        // WIDGET STYLE HANDLER ---------------------------------------------------
+        //
+
+        ( function() {
+                // Styles categorized by group. It is used to prevent applying styles for the same group being used together.
+                var styleGroups = {};
+
+                /**
+                 * The class representing a widget style. It is an {@link CKEDITOR#STYLE_OBJECT object} like
+                 * the styles handler for widgets.
+                 *
+                 * **Note:** This custom style handler does not support all methods of the {@link CKEDITOR.style} class.
+                 * Not supported methods: {@link #applyToRange}, {@link #removeFromRange}, {@link #applyToObject}.
+                 *
+                 * @since 4.4
+                 * @class CKEDITOR.style.customHandlers.widget
+                 * @extends CKEDITOR.style
+                 */
+                CKEDITOR.style.addCustomHandler( {
+                        type: 'widget',
+
+                        setup: function( styleDefinition ) {
+                                /**
+                                 * The name of widget to which this style can be applied.
+                                 * It is extracted from style definition's `widget` property.
+                                 *
+                                 * @property {String} widget
+                                 */
+                                this.widget = styleDefinition.widget;
+
+                                /**
+                                 * An array of groups that this style belongs to.
+                                 * Styles assigned to the same group cannot be combined.
+                                 *
+                                 * @since 4.6.2
+                                 * @property {Array} group
+                                 */
+                                this.group = typeof styleDefinition.group == 'string' ? [ styleDefinition.group ] : styleDefinition.group;
+
+                                // Store style categorized by its group.
+                                // It is used to prevent enabling two styles from same group.
+                                if ( this.group ) {
+                                        saveStyleGroup( this );
+                                }
+                        },
+
+                        apply: function( editor ) {
+                                var widget;
+
+                                // Before CKEditor 4.4 wasn't a required argument, so we need to
+                                // handle a case when it wasn't provided.
+                                if ( !( editor instanceof CKEDITOR.editor ) )
+                                        return;
+
+                                // Theoretically we could bypass checkApplicable, get widget from
+                                // widgets.focused and check its name, what would be faster, but then
+                                // this custom style would work differently than the default style
+                                // which checks if it's applicable before applying or removing itself.
+                                if ( this.checkApplicable( editor.elementPath(), editor ) ) {
+                                        widget = editor.widgets.focused;
+
+                                        // Remove other styles from the same group.
+                                        if ( this.group ) {
+                                                this.removeStylesFromSameGroup( editor );
+                                        }
+
+                                        widget.applyStyle( this );
+                                }
+                        },
+
+                        remove: function( editor ) {
+                                // Before CKEditor 4.4 wasn't a required argument, so we need to
+                                // handle a case when it wasn't provided.
+                                if ( !( editor instanceof CKEDITOR.editor ) )
+                                        return;
+
+                                if ( this.checkApplicable( editor.elementPath(), editor ) )
+                                        editor.widgets.focused.removeStyle( this );
+                        },
+
+                        /**
+                         * Removes all styles that belong to the same group as this style. This method will neither add nor remove
+                         * the current style.
+                         * Returns `true` if any style was removed, otherwise returns `false`.
+                         *
+                         * @since 4.6.2
+                         * @param {CKEDITOR.editor} editor
+                         * @returns {Boolean}
+                         */
+                        removeStylesFromSameGroup: function( editor ) {
+                                var stylesFromSameGroup,
+                                        path,
+                                        removed = false;
+
+                                // Before CKEditor 4.4 wasn't a required argument, so we need to
+                                // handle a case when it wasn't provided.
+                                if ( !( editor instanceof CKEDITOR.editor ) )
+                                        return false;
+
+                                path = editor.elementPath();
+                                if ( this.checkApplicable( path, editor ) ) {
+                                        // Iterate over each group.
+                                        for ( var i = 0, l = this.group.length; i < l; i++ ) {
+                                                stylesFromSameGroup = styleGroups[ this.widget ][ this.group[ i ] ];
+                                                // Iterate over each style from group.
+                                                for ( var j = 0; j < stylesFromSameGroup.length; j++ ) {
+                                                        if ( stylesFromSameGroup[ j ] !== this && stylesFromSameGroup[ j ].checkActive( path, editor ) ) {
+                                                                editor.widgets.focused.removeStyle( stylesFromSameGroup[ j ] );
+                                                                removed = true;
+                                                        }
+                                                }
+                                        }
+                                }
+
+                                return removed;
+                        },
+
+                        checkActive: function( elementPath, editor ) {
+                                return this.checkElementMatch( elementPath.lastElement, 0, editor );
+                        },
+
+                        checkApplicable: function( elementPath, editor ) {
+                                // Before CKEditor 4.4 wasn't a required argument, so we need to
+                                // handle a case when it wasn't provided.
+                                if ( !( editor instanceof CKEDITOR.editor ) )
+                                        return false;
+
+                                return this.checkElement( elementPath.lastElement );
+                        },
+
+                        checkElementMatch: checkElementMatch,
+
+                        checkElementRemovable: checkElementMatch,
+
+                        /**
+                         * Checks if an element is a {@link CKEDITOR.plugins.widget#wrapper wrapper} of a
+                         * widget whose name matches the {@link #widget widget name} specified in the style definition.
+                         *
+                         * @param {CKEDITOR.dom.element} element
+                         * @returns {Boolean}
+                         */
+                        checkElement: function( element ) {
+                                if ( !Widget.isDomWidgetWrapper( element ) )
+                                        return false;
+
+                                var widgetElement = element.getFirst( Widget.isDomWidgetElement );
+                                return widgetElement && widgetElement.data( 'widget' ) == this.widget;
+                        },
+
+                        buildPreview: function( label ) {
+                                return label || this._.definition.name;
+                        },
+
+                        /**
+                         * Returns allowed content rules which should be registered for this style.
+                         * Uses widget's {@link CKEDITOR.plugins.widget.definition#styleableElements} to make a rule
+                         * allowing classes on specified elements or use widget's
+                         * {@link CKEDITOR.plugins.widget.definition#styleToAllowedContentRules} method to transform a style
+                         * into allowed content rules.
+                         *
+                         * @param {CKEDITOR.editor} The editor instance.
+                         * @returns {CKEDITOR.filter.allowedContentRules}
+                         */
+                        toAllowedContentRules: function( editor ) {
+                                if ( !editor )
+                                        return null;
+
+                                var widgetDef = editor.widgets.registered[ this.widget ],
+                                        classes,
+                                        rule = {};
+
+                                if ( !widgetDef )
+                                        return null;
+
+                                if ( widgetDef.styleableElements ) {
+                                        classes = this.getClassesArray();
+                                        if ( !classes )
+                                                return null;
+
+                                        rule[ widgetDef.styleableElements ] = {
+                                                classes: classes,
+                                                propertiesOnly: true
+                                        };
+                                        return rule;
+                                }
+                                if ( widgetDef.styleToAllowedContentRules )
+                                        return widgetDef.styleToAllowedContentRules( this );
+                                return null;
+                        },
+
+                        /**
+                         * Returns classes defined in the style in form of an array.
+                         *
+                         * @returns {String[]}
+                         */
+                        getClassesArray: function() {
+                                var classes = this._.definition.attributes && this._.definition.attributes[ 'class' ];
+
+                                return classes ? CKEDITOR.tools.trim( classes ).split( /\s+/ ) : null;
+                        },
+
+                        /**
+                         * Not implemented.
+                         *
+                         * @method applyToRange
+                         */
+                        applyToRange: notImplemented,
+
+                        /**
+                         * Not implemented.
+                         *
+                         * @method removeFromRange
+                         */
+                        removeFromRange: notImplemented,
+
+                        /**
+                         * Not implemented.
+                         *
+                         * @method applyToObject
+                         */
+                        applyToObject: notImplemented
+                } );
+
+                function notImplemented() {}
+
+                // @context style
+                function checkElementMatch( element, fullMatch, editor ) {
+                        // Before CKEditor 4.4 wasn't a required argument, so we need to
+                        // handle a case when it wasn't provided.
+                        if ( !editor )
+                                return false;
+
+                        if ( !this.checkElement( element ) )
+                                return false;
+
+                        var widget = editor.widgets.getByElement( element, true );
+                        return widget && widget.checkStyleActive( this );
+                }
+
+                // Save and categorize style by its group.
+                function saveStyleGroup( style ) {
+                        var widgetName = style.widget,
+                                group;
+
+                        if ( !styleGroups[ widgetName ] ) {
+                                styleGroups[ widgetName ] = {};
+                        }
+
+                        for ( var i = 0, l = style.group.length; i < l; i++ ) {
+                                group = style.group[ i ];
+                                if ( !styleGroups[ widgetName ][ group ] ) {
+                                        styleGroups[ widgetName ][ group ] = [];
+                                }
+
+                                styleGroups[ widgetName ][ group ].push( style );
+                        }
+                }
+
+        } )();
+
+        //
+        // EXPOSE PUBLIC API ------------------------------------------------------
+        //
+
+        CKEDITOR.plugins.widget = Widget;
+        Widget.repository = Repository;
+        Widget.nestedEditable = NestedEditable;
+} )();
+
+/**
+ * An event fired when a widget definition is registered by the {@link CKEDITOR.plugins.widget.repository#add} method.
+ * It is possible to modify the definition being registered.
+ *
+ * @event widgetDefinition
+ * @member CKEDITOR.editor
+ * @param {CKEDITOR.plugins.widget.definition} data Widget definition.
+ */
+
+/**
+ * This is an abstract class that describes the definition of a widget.
+ * It is a type of {@link CKEDITOR.plugins.widget.repository#add} method's second argument.
+ *
+ * Widget instances inherit from registered widget definitions, although not in a prototypal way.
+ * They are simply extended with corresponding widget definitions. Note that not all properties of
+ * the widget definition become properties of a widget. Some, like {@link #data} or {@link #edit}, become
+ * widget's events listeners.
+ *
+ * @class CKEDITOR.plugins.widget.definition
+ * @abstract
+ * @mixins CKEDITOR.feature
+ */
+
+/**
+ * Widget definition name. It is automatically set when the definition is
+ * {@link CKEDITOR.plugins.widget.repository#add registered}.
+ *
+ * @property {String} name
+ */
+
+/**
+ * The method executed while initializing a widget, after a widget instance
+ * is created, but before it is ready. It is executed before the first
+ * {@link CKEDITOR.plugins.widget#event-data} is fired so it is common to
+ * use the `init` method to populate widget data with information loaded from
+ * the DOM, like for exmaple:
+ *
+ *              init: function() {
+ *                      this.setData( 'width', this.element.getStyle( 'width' ) );
+ *
+ *                      if ( this.parts.caption.getStyle( 'display' ) != 'none' )
+ *                              this.setData( 'showCaption', true );
+ *              }
+ *
+ * @property {Function} init
+ */
+
+/**
+ * The function to be used to upcast an element to this widget or a
+ * comma-separated list of upcast methods from the {@link #upcasts} object.
+ *
+ * The upcast function **is not** executed in the widget context (because the widget
+ * does not exist yet) and two arguments are passed:
+ *
+ * * `element` ({@link CKEDITOR.htmlParser.element}) &ndash; The element to be checked.
+ * * `data` (`Object`) &ndash; The object which can be extended with data which will then be passed to the widget.
+ *
+ * An element will be upcasted if a function returned `true` or an instance of
+ * a {@link CKEDITOR.htmlParser.element} if upcasting meant DOM structure changes
+ * (in this case the widget will be initialized on the returned element).
+ *
+ * @property {String/Function} upcast
+ */
+
+/**
+ * The object containing functions which can be used to upcast this widget.
+ * Only those pointed by the {@link #upcast} property will be used.
+ *
+ * In most cases it is appropriate to use {@link #upcast} directly,
+ * because majority of widgets need just one method.
+ * However, in some cases the widget author may want to expose more than one variant
+ * and then this property may be used.
+ *
+ *              upcasts: {
+ *                      // This function may upcast only figure elements.
+ *                      figure: function() {
+ *                              // ...
+ *                      },
+ *                      // This function may upcast only image elements.
+ *                      image: function() {
+ *                              // ...
+ *                      },
+ *                      // More variants...
+ *              }
+ *
+ *              // Then, widget user may choose which upcast methods will be enabled.
+ *              editor.on( 'widgetDefinition', function( evt ) {
+ *                      if ( evt.data.name == 'image' )
+ *                              evt.data.upcast = 'figure,image'; // Use both methods.
+ *              } );
+ *
+ * @property {Object} upcasts
+ */
+
+/**
+ * The {@link #upcast} method(s) priority. The upcast with a lower priority number will be called before
+ * the one with a higher number. The default priority is `10`.
+ *
+ * @since 4.5
+ * @property {Number} [upcastPriority=10]
+ */
+
+/**
+ * The function to be used to downcast this widget or
+ * a name of the downcast option from the {@link #downcasts} object.
+ *
+ * The downcast funciton will be executed in the {@link CKEDITOR.plugins.widget} context
+ * and with `widgetElement` ({@link CKEDITOR.htmlParser.element}) argument which is
+ * the widget's main element.
+ *
+ * The function may return an instance of the {@link CKEDITOR.htmlParser.node} class if the widget
+ * needs to be downcasted to a different node than the widget's main element.
+ *
+ * @property {String/Function} downcast
+ */
+
+/**
+ * The object containing functions which can be used to downcast this widget.
+ * Only the one pointed by the {@link #downcast} property will be used.
+ *
+ * In most cases it is appropriate to use {@link #downcast} directly,
+ * because majority of widgets have just one variant of downcasting (or none at all).
+ * However, in some cases the widget author may want to expose more than one variant
+ * and then this property may be used.
+ *
+ *              downcasts: {
+ *                      // This downcast may transform the widget into the figure element.
+ *                      figure: function() {
+ *                              // ...
+ *                      },
+ *                      // This downcast may transform the widget into the image element with data-* attributes.
+ *                      image: function() {
+ *                              // ...
+ *                      }
+ *              }
+ *
+ *              // Then, the widget user may choose one of the downcast options when setting up his editor.
+ *              editor.on( 'widgetDefinition', function( evt ) {
+ *                      if ( evt.data.name == 'image' )
+ *                              evt.data.downcast = 'figure';
+ *              } );
+ *
+ * @property downcasts
+ */
+
+/**
+ * If set, it will be added as the {@link CKEDITOR.plugins.widget#event-edit} event listener.
+ * This means that it will be executed when a widget is being edited.
+ * See the {@link CKEDITOR.plugins.widget#method-edit} method.
+ *
+ * @property {Function} edit
+ */
+
+/**
+ * If set, it will be added as the {@link CKEDITOR.plugins.widget#event-data} event listener.
+ * This means that it will be executed every time the {@link CKEDITOR.plugins.widget#property-data widget data} changes.
+ *
+ * @property {Function} data
+ */
+
+/**
+ * The method to be executed when the widget's command is executed in order to insert a new widget
+ * (widget of this type is not focused). If not defined, then the default action will be
+ * performed which means that:
+ *
+ * * An instance of the widget will be created in a detached {@link CKEDITOR.dom.documentFragment document fragment},
+ * * The {@link CKEDITOR.plugins.widget#method-edit} method will be called to trigger widget editing,
+ * * The widget element will be inserted into DOM.
+ *
+ * @property {Function} insert
+ */
+
+/**
+ * The name of a dialog window which will be opened on {@link CKEDITOR.plugins.widget#method-edit}.
+ * If not defined, then the {@link CKEDITOR.plugins.widget#method-edit} method will not perform any action and
+ * widget's command will insert a new widget without opening a dialog window first.
+ *
+ * @property {String} dialog
+ */
+
+/**
+ * The template which will be used to create a new widget element (when the widget's command is executed).
+ * This string is populated with {@link #defaults default values} by using the {@link CKEDITOR.template} format.
+ * Therefore it has to be a valid {@link CKEDITOR.template} argument.
+ *
+ * @property {String} template
+ */
+
+/**
+ * The data object which will be used to populate the data of a newly created widget.
+ * See {@link CKEDITOR.plugins.widget#property-data}.
+ *
+ *              defaults: {
+ *                      showCaption: true,
+ *                      align: 'none'
+ *              }
+ *
+ * @property defaults
+ */
+
+/**
+ * An object containing definitions of widget components (part name => CSS selector).
+ *
+ *              parts: {
+ *                      image: 'img',
+ *                      caption: 'div.caption'
+ *              }
+ *
+ * @property parts
+ */
+
+/**
+ * An object containing definitions of nested editables (editable name => {@link CKEDITOR.plugins.widget.nestedEditable.definition}).
+ * Note that editables *have to* be defined in the same order as they are in DOM / {@link CKEDITOR.plugins.widget.definition#template template}.
+ * Otherwise errors will occur when nesting widgets inside each other.
+ *
+ *              editables: {
+ *                      header: 'h1',
+ *                      content: {
+ *                              selector: 'div.content',
+ *                              allowedContent: 'p strong em; a[!href]'
+ *                      }
+ *              }
+ *
+ * @property editables
+ */
+
+/**
+ * The function used to obtain an accessibility label for the widget. It might be used to make
+ * the widget labels as precise as possible, since it has access to the widget instance.
+ *
+ * If not specified, the default implementation will use the {@link #pathName} or the main
+ * {@link CKEDITOR.plugins.widget#element element} tag name.
+ *
+ * @property {Function} getLabel
+ */
+
+/**
+ * The widget name displayed in the elements path.
+ *
+ * @property {String} pathName
+ */
+
+/**
+ * If set to `true`, the widget's element will be covered with a transparent mask.
+ * This will prevent its content from being clickable, which matters in case
+ * of special elements like embedded Flash or iframes that generate a separate "context".
+ *
+ * @property {Boolean} mask
+ */
+
+/**
+ * If set to `true/false`, it will force the widget to be either an inline or a block widget.
+ * If not set, the widget type will be determined from the widget element.
+ *
+ * Widget type influences whether a block (`div`) or an inline (`span`) element is used
+ * for the wrapper.
+ *
+ * @property {Boolean} inline
+ */
+
+/**
+ * The label for the widget toolbar button.
+ *
+ *              editor.widgets.add( 'simplebox', {
+ *                      button: 'Create a simple box'
+ *              } );
+ *
+ *              editor.widgets.add( 'simplebox', {
+ *                      button: editor.lang.simplebox.title
+ *              } );
+ *
+ * @property {String} button
+ */
+
+/**
+ * Whether widget should be draggable. Defaults to `true`.
+ * If set to `false` drag handler will not be displayed when hovering widget.
+ *
+ * @property {Boolean} draggable
+ */
+
+/**
+ * Names of element(s) (separated by spaces) for which the {@link CKEDITOR.filter} should allow classes
+ * defined in the widget styles. For example if your widget is upcasted from a simple `<div>`
+ * element, then in order to make it styleable you can set:
+ *
+ *              editor.widgets.add( 'customWidget', {
+ *                      upcast: function( element ) {
+ *                              return element.name == 'div';
+ *                      },
+ *
+ *                      // ...
+ *
+ *                      styleableElements: 'div'
+ *              } );
+ *
+ * Then, when the following style is defined:
+ *
+ *              {
+ *                      name: 'Thick border', type: 'widget', widget: 'customWidget',
+ *                      attributes: { 'class': 'thickBorder' }
+ *              }
+ *
+ * a rule allowing the `thickBorder` class for `div` elements will be registered in the {@link CKEDITOR.filter}.
+ *
+ * If you need to have more freedom when transforming widget style to allowed content rules,
+ * you can use the {@link #styleToAllowedContentRules} callback.
+ *
+ * @since 4.4
+ * @property {String} styleableElements
+ */
+
+/**
+ * Function transforming custom widget's {@link CKEDITOR.style} instance into
+ * {@link CKEDITOR.filter.allowedContentRules}. It may be used when a static
+ * {@link #styleableElements} property is not enough to inform the {@link CKEDITOR.filter}
+ * what HTML features should be enabled when allowing the given style.
+ *
+ * In most cases, when style's classes just have to be added to element name(s) used by
+ * the widget element, it is recommended to use simpler {@link #styleableElements} property.
+ *
+ * In order to get parsed classes from the style definition you can use
+ * {@link CKEDITOR.style.customHandlers.widget#getClassesArray}.
+ *
+ * For example, if you want to use the [object format of allowed content rules](#!/guide/dev_allowed_content_rules-section-object-format),
+ * to specify `match` validator, your implementation could look like this:
+ *
+ *              editor.widgets.add( 'customWidget', {
+ *                      // ...
+ *
+ *                      styleToAllowedContentRules: funciton( style ) {
+ *                              // Retrieve classes defined in the style.
+ *                              var classes = style.getClassesArray();
+ *
+ *                              // Do something crazy - for example return allowed content rules in object format,
+ *                              // with custom match property and propertiesOnly flag.
+ *                              return {
+ *                                      h1: {
+ *                                              match: isWidgetElement,
+ *                                              propertiesOnly: true,
+ *                                              classes: classes
+ *                                      }
+ *                              };
+ *                      }
+ *              } );
+ *
+ * @since 4.4
+ * @property {Function} styleToAllowedContentRules
+ * @param {CKEDITOR.style.customHandlers.widget} style The style to be transformed.
+ * @returns {CKEDITOR.filter.allowedContentRules}
+ */
+
+/**
+ * This is an abstract class that describes the definition of a widget's nested editable.
+ * It is a type of values in the {@link CKEDITOR.plugins.widget.definition#editables} object.
+ *
+ * In the simplest case the definition is a string which is a CSS selector used to
+ * find an element that will become a nested editable inside the widget. Note that
+ * the widget element can be a nested editable, too.
+ *
+ * In the more advanced case a definition is an object with a required `selector` property.
+ *
+ *              editables: {
+ *                      header: 'h1',
+ *                      content: {
+ *                              selector: 'div.content',
+ *                              allowedContent: 'p strong em; a[!href]'
+ *                      }
+ *              }
+ *
+ * @class CKEDITOR.plugins.widget.nestedEditable.definition
+ * @abstract
+ */
+
+/**
+ * The CSS selector used to find an element which will become a nested editable.
+ *
+ * @property {String} selector
+ */
+
+/**
+ * The [Advanced Content Filter](#!/guide/dev_advanced_content_filter) rules
+ * which will be used to limit the content allowed in this nested editable.
+ * This option is similar to {@link CKEDITOR.config#allowedContent} and one can
+ * use it to limit the editor features available in the nested editable.
+ *
+ * @property {CKEDITOR.filter.allowedContentRules} allowedContent
+ */
+
+/**
+ * Nested editable name displayed in elements path.
+ *
+ * @property {String} pathName
+ */
@@ -0,0 +1,366 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+/**
+ * @fileOverview A plugin created to handle ticket http://dev.ckeditor.com/ticket/11064. While the issue is caused by native WebKit/Blink behaviour,
+ * this plugin can be easily detached or modified when the issue is fixed in the browsers without changing the core.
+ * When Ctrl/Cmd + A is pressed to select all content it does not work due to a bug in
+ * Webkit/Blink if a non-editable element is at the beginning or the end of the content.
+ */
+
+( function() {
+        'use strict';
+
+        CKEDITOR.plugins.add( 'widgetselection', {
+
+                init: function( editor ) {
+                        if ( CKEDITOR.env.webkit ) {
+                                var widgetselection = CKEDITOR.plugins.widgetselection;
+
+                                editor.on( 'contentDom', function( evt ) {
+
+                                        var editor = evt.editor,
+                                                doc = editor.document,
+                                                editable = editor.editable();
+
+                                        editable.attachListener( doc, 'keydown', function( evt ) {
+                                                var data = evt.data.$;
+
+                                                // Ctrl/Cmd + A
+                                                if ( evt.data.getKey() == 65 && ( CKEDITOR.env.mac && data.metaKey || !CKEDITOR.env.mac && data.ctrlKey ) ) {
+
+                                                        // Defer the call so the selection is already changed by the pressed keys.
+                                                        CKEDITOR.tools.setTimeout( function() {
+
+                                                                // Manage filler elements on keydown. If there is no need
+                                                                // to add fillers, we need to check and clean previously used once.
+                                                                if ( !widgetselection.addFillers( editable ) ) {
+                                                                        widgetselection.removeFillers( editable );
+                                                                }
+                                                        }, 0 );
+                                                }
+                                        }, null, null, -1 );
+
+                                        // Check and clean previously used fillers.
+                                        editor.on( 'selectionCheck', function( evt ) {
+                                                widgetselection.removeFillers( evt.editor.editable() );
+                                        } );
+
+                                        // Remove fillers on paste before data gets inserted into editor.
+                                        editor.on( 'paste', function( evt ) {
+                                                evt.data.dataValue = widgetselection.cleanPasteData( evt.data.dataValue );
+                                        } );
+
+                                        if ( 'selectall' in editor.plugins ) {
+                                                widgetselection.addSelectAllIntegration( editor );
+                                        }
+                                } );
+                        }
+                }
+        } );
+
+        /**
+         * A set of helper methods for the Widget Selection plugin.
+         *
+         * @property widgetselection
+         * @member CKEDITOR.plugins
+         * @since 4.6.1
+         */
+        CKEDITOR.plugins.widgetselection = {
+
+                /**
+                 * The start filler element reference.
+                 *
+                 * @property {CKEDITOR.dom.element}
+                 * @member CKEDITOR.plugins.widgetselection
+                 * @private
+                 */
+                startFiller: null,
+
+                /**
+                 * The end filler element reference.
+                 *
+                 * @property {CKEDITOR.dom.element}
+                 * @member CKEDITOR.plugins.widgetselection
+                 * @private
+                 */
+                endFiller: null,
+
+                /**
+                 * An attribute which identifies the filler element.
+                 *
+                 * @property {String}
+                 * @member CKEDITOR.plugins.widgetselection
+                 * @private
+                 */
+                fillerAttribute: 'data-cke-filler-webkit',
+
+                /**
+                 * The default content of the filler element. Note: The filler needs to have `visible` content.
+                 * Unprintable elements or empty content do not help as a workaround.
+                 *
+                 * @property {String}
+                 * @member CKEDITOR.plugins.widgetselection
+                 * @private
+                 */
+                fillerContent: '&nbsp;',
+
+                /**
+                 * Tag name which is used to create fillers.
+                 *
+                 * @property {String}
+                 * @member CKEDITOR.plugins.widgetselection
+                 * @private
+                 */
+                fillerTagName: 'div',
+
+                /**
+                 * Adds a filler before or after a non-editable element at the beginning or the end of the `editable`.
+                 *
+                 * @param {CKEDITOR.editable} editable
+                 * @returns {Boolean}
+                 * @member CKEDITOR.plugins.widgetselection
+                 */
+                addFillers: function( editable ) {
+                        var editor = editable.editor;
+
+                        // Whole content should be selected, if not fix the selection manually.
+                        if ( !this.isWholeContentSelected( editable ) && editable.getChildCount() > 0 ) {
+
+                                var firstChild = editable.getFirst( filterTempElements ),
+                                        lastChild = editable.getLast( filterTempElements );
+
+                                // Check if first element is editable. If not prepend with filler.
+                                if ( firstChild && firstChild.type == CKEDITOR.NODE_ELEMENT && !firstChild.isEditable() ) {
+                                        this.startFiller = this.createFiller();
+                                        editable.append( this.startFiller, 1 );
+                                }
+
+                                // Check if last element is editable. If not append filler.
+                                if ( lastChild && lastChild.type == CKEDITOR.NODE_ELEMENT && !lastChild.isEditable() ) {
+                                        this.endFiller = this.createFiller( true );
+                                        editable.append( this.endFiller, 0 );
+                                }
+
+                                // Reselect whole content after any filler was added.
+                                if ( this.hasFiller( editable ) ) {
+                                        var rangeAll = editor.createRange();
+                                        rangeAll.selectNodeContents( editable );
+                                        rangeAll.select();
+                                        return true;
+                                }
+                        }
+                        return false;
+                },
+
+                /**
+                 * Removes filler elements or updates their references.
+                 *
+                 * It will **not remove** filler elements if the whole content is selected, as it would break the
+                 * selection.
+                 *
+                 * @param {CKEDITOR.editable} editable
+                 * @member CKEDITOR.plugins.widgetselection
+                 */
+                removeFillers: function( editable ) {
+                        // If startFiller or endFiller exists and not entire content is selected it means the selection
+                        // just changed from selected all. We need to remove fillers and set proper selection/content.
+                        if ( this.hasFiller( editable ) && !this.isWholeContentSelected( editable ) ) {
+
+                                var startFillerContent = editable.findOne( this.fillerTagName + '[' + this.fillerAttribute + '=start]' ),
+                                        endFillerContent = editable.findOne( this.fillerTagName + '[' + this.fillerAttribute + '=end]' );
+
+                                if ( this.startFiller && startFillerContent && this.startFiller.equals( startFillerContent ) ) {
+                                        this.removeFiller( this.startFiller, editable );
+                                } else {
+                                        // The start filler is still present but it is a different element than previous one. It means the
+                                        // undo recreating entirely selected content was performed. We need to update filler reference.
+                                        this.startFiller = startFillerContent;
+                                }
+
+                                if ( this.endFiller && endFillerContent && this.endFiller.equals( endFillerContent ) ) {
+                                        this.removeFiller( this.endFiller, editable );
+                                } else {
+                                        // Same as with start filler.
+                                        this.endFiller = endFillerContent;
+                                }
+                        }
+                },
+
+                /**
+                 * Removes fillers from the paste data.
+                 *
+                 * @param {String} data
+                 * @returns {String}
+                 * @member CKEDITOR.plugins.widgetselection
+                 * @private
+                 */
+                cleanPasteData: function( data ) {
+                        if ( data && data.length ) {
+                                data = data
+                                        .replace( this.createFillerRegex(), '' )
+                                        .replace( this.createFillerRegex( true ), '' );
+                        }
+                        return data;
+                },
+
+                /**
+                 * Checks if the entire content of the given editable is selected.
+                 *
+                 * @param {CKEDITOR.editable} editable
+                 * @returns {Boolean}
+                 * @member CKEDITOR.plugins.widgetselection
+                 * @private
+                 */
+                isWholeContentSelected: function( editable ) {
+
+                        var range = editable.editor.getSelection().getRanges()[ 0 ];
+                        if ( range ) {
+
+                                if ( range && range.collapsed ) {
+                                        return false;
+
+                                } else {
+                                        var rangeClone = range.clone();
+                                        rangeClone.enlarge( CKEDITOR.ENLARGE_ELEMENT );
+
+                                        return !!( rangeClone && editable && rangeClone.startContainer && rangeClone.endContainer &&
+                                                rangeClone.startOffset === 0 && rangeClone.endOffset === editable.getChildCount() &&
+                                                rangeClone.startContainer.equals( editable ) && rangeClone.endContainer.equals( editable ) );
+                                }
+                        }
+                        return false;
+                },
+
+                /**
+                 *      Checks if there is any filler element in the given editable.
+                 *
+                 * @param {CKEDITOR.editable} editable
+                 * @returns {Boolean}
+                 * @member CKEDITOR.plugins.widgetselection
+                 * @private
+                 */
+                hasFiller: function( editable ) {
+                        return editable.find( this.fillerTagName + '[' + this.fillerAttribute + ']' ).count() > 0;
+                },
+
+                /**
+                 * Creates a filler element.
+                 *
+                 * @param {Boolean} [onEnd] If filler will be placed on end or beginning of the content.
+                 * @returns {CKEDITOR.dom.element}
+                 * @member CKEDITOR.plugins.widgetselection
+                 * @private
+                 */
+                createFiller: function( onEnd ) {
+                        var filler = new CKEDITOR.dom.element( this.fillerTagName );
+                        filler.setHtml( this.fillerContent );
+                        filler.setAttribute( this.fillerAttribute, onEnd ? 'end' : 'start' );
+                        filler.setAttribute( 'data-cke-temp', 1 );
+                        filler.setStyles( {
+                                display: 'block',
+                                width: 0,
+                                height: 0,
+                                padding: 0,
+                                border: 0,
+                                margin: 0,
+                                position: 'absolute',
+                                top: 0,
+                                left: '-9999px',
+                                opacity: 0,
+                                overflow: 'hidden'
+                        } );
+
+                        return filler;
+                },
+
+                /**
+                 * Removes the specific filler element from the given editable. If the filler contains any content (typed or pasted),
+                 * it replaces the current editable content. If not, the caret is placed before the first or after the last editable
+                 * element (depends if the filler was at the beginning or the end).
+                 *
+                 * @param {CKEDITOR.dom.element} filler
+                 * @param {CKEDITOR.editable} editable
+                 * @member CKEDITOR.plugins.widgetselection
+                 * @private
+                 */
+                removeFiller: function( filler, editable ) {
+                        if ( filler ) {
+                                var editor = editable.editor,
+                                        currentRange = editable.editor.getSelection().getRanges()[ 0 ],
+                                        currentPath = currentRange.startPath(),
+                                        range = editor.createRange(),
+                                        insertedHtml,
+                                        fillerOnStart,
+                                        manuallyHandleCaret;
+
+                                if ( currentPath.contains( filler ) ) {
+                                        insertedHtml = filler.getHtml();
+                                        manuallyHandleCaret = true;
+                                }
+
+                                fillerOnStart = filler.getAttribute( this.fillerAttribute ) == 'start';
+                                filler.remove();
+                                filler = null;
+
+                                if ( insertedHtml && insertedHtml.length > 0 && insertedHtml != this.fillerContent ) {
+                                        editable.insertHtmlIntoRange( insertedHtml, editor.getSelection().getRanges()[ 0 ] );
+                                        range.setStartAt( editable.getChild( editable.getChildCount() - 1 ), CKEDITOR.POSITION_BEFORE_END );
+                                        editor.getSelection().selectRanges( [ range ] );
+
+                                } else if ( manuallyHandleCaret ) {
+                                        if ( fillerOnStart ) {
+                                                range.setStartAt( editable.getFirst().getNext(), CKEDITOR.POSITION_AFTER_START );
+                                        } else {
+                                                range.setEndAt( editable.getLast().getPrevious(), CKEDITOR.POSITION_BEFORE_END );
+                                        }
+                                        editable.editor.getSelection().selectRanges( [ range ] );
+                                }
+                        }
+                },
+
+                /**
+                 * Creates a regular expression which will match the filler HTML in the text.
+                 *
+                 * @param {Boolean} [onEnd] Whether a regular expression should be created for the filler at the beginning or
+                 * the end of the content.
+                 * @returns {RegExp}
+                 * @member CKEDITOR.plugins.widgetselection
+                 * @private
+                 */
+                createFillerRegex: function( onEnd ) {
+                        var matcher = this.createFiller( onEnd ).getOuterHtml()
+                                .replace( /style="[^"]*"/gi, 'style="[^"]*"' )
+                                .replace( />[^<]*</gi, '>[^<]*<' );
+
+                        return new RegExp( ( !onEnd ? '^' : '' ) + matcher + ( onEnd ? '$' : '' ) );
+                },
+
+                /**
+                 * Adds an integration for the [Select All](http://ckeditor.com/addon/selectall) plugin to the given `editor`.
+                 *
+                 * @private
+                 * @param {CKEDITOR.editor} editor
+                 * @member CKEDITOR.plugins.widgetselection
+                 */
+                addSelectAllIntegration: function( editor ) {
+                        var widgetselection = this;
+
+                        editor.editable().attachListener( editor, 'beforeCommandExec', function( evt ) {
+                                var editable = editor.editable();
+
+                                if ( evt.data.name == 'selectAll' && editable ) {
+                                        widgetselection.addFillers( editable );
+                                }
+                        }, null, null, 9999 );
+                }
+        };
+
+
+        function filterTempElements( el ) {
+                return el.getName && !el.hasAttribute( 'data-cke-temp' );
+        }
+
+} )();
@@ -0,0 +1,6 @@
+ready = ->
+  $('.ckeditor').each ->
+    CKEDITOR.replace $(this).attr('id')
+
+$(document).ready(ready)
+$(document).on('page:load', ready)
@@ -1,3 +1,9 @@
 # Place all the behaviors and hooks related to the matching controller here.
 # All this logic will automatically be available in application.js.
 # You can use CoffeeScript in this file: http://coffeescript.org/
+$(document).on "turbolinks:load", ->
+  $(".should-create-record-field input[type=checkbox]").change ->
+    if $(".should-create-record-field input[type=checkbox]").prop("checked")
+      $(".record-description-field").show()
+    else
+      $(".record-description-field").hide()
@@ -0,0 +1,4 @@
+/*
+ *= require normalize-rails
+ *= require_tree ./admin
+ */
@@ -0,0 +1,3 @@
+// Place all the styles related to the Admin::Dashboard controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
@@ -0,0 +1,190 @@
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+#banner {
+  background-color: #7bf;
+
+  a {
+    display: block;
+    text-decoration: none;
+    font-size: 2em;
+    margin: .25em 1em;
+
+    &, &:visited {
+      color: black;
+    }
+  }
+}
+
+#container {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}
+
+#sidebar {
+  width: 12%;
+  background-color: #333;
+  margin: 0;
+  padding: 1em 0;
+
+  .major {
+    display: block;
+    color: white;
+
+    &.active {
+      background-color: #648;
+    }
+
+    &.inactive {
+      .minors {
+        display: none;
+      }
+    }
+
+    a {
+      display: block;
+      text-decoration: none;
+
+      &, &:visited {
+        color: #ddd;
+      }
+    }
+
+    .minors {
+      display: block;
+      background-color: #666;
+    }
+
+    .minor {
+      list-style-type: none;
+      font-size: small;
+    }
+
+    .major-link, .minors {
+      padding: .25em 1em;
+    }
+  }
+}
+
+#main {
+  width: 88%;
+  padding: 1em;
+  background-color: #eee;
+}
+
+#blog-form {
+  display: flex;
+
+  fieldset {
+    border: 0;
+  }
+
+  #content {
+    width: 77%;
+  }
+
+  #details {
+    width: 23%;
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .title-field {
+    label {
+      display: none;
+    }
+
+    input {
+      width: 100%;
+      font-size: 1.5em;
+      box-sizing: border-box;
+    }
+  }
+
+  .slug-field {
+    display: flex;
+    font-size: 0.75em;
+    margin-bottom: 1em;
+
+    input {
+      padding: 0;
+      border: 0;
+      color: #666;
+      width: 100%;
+      box-sizing: border-box;
+      background-color: #eee;
+      text-decoration: underline;
+
+      &:focus {
+        outline: 0;
+      }
+    }
+  }
+
+  .body-field {
+    label {
+      display: none;
+    }
+  }
+}
+
+#entries {
+  border-spacing: 0;
+  width: 100%;
+
+  th {
+    text-align: left;
+    padding: .25em;
+    font-weight: normal;
+    background-color: #35a;
+    color: #eee;
+  }
+
+  tr {
+    &.even {
+      background-color: #fff;
+    }
+
+    &.odd {
+      background-color: #edf;
+    }
+  }
+
+  td {
+    padding: .25em;
+  }
+}
+
+.details-module {
+  background-color: white;
+  border-radius: 5px;
+  padding: .5em;
+  margin-bottom: 1em;
+}
+
+.should-create-record-field {
+  label {
+    font-size: .75em;
+  }
+}
+
+.record-description-field {
+  display: none;
+  margin-top: 1em;
+
+  textarea {
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+  }
+}
@@ -49,7 +49,7 @@ body#main-body {
 
 #content {
   box-sizing: border-box;
-  padding-top: 1em;
+  padding: 1em 0;
 }
 
 #flash {
@@ -0,0 +1,5 @@
+class Admin::AdminController < ApplicationController
+  before_action :authenticate_user!
+
+  layout "admin"
+end
@@ -0,0 +1,52 @@
+class Admin::BlogsController < Admin::AdminController
+  before_action :set_section
+
+  def index
+    @blogs = Blog.order(created_at: :desc)
+  end
+
+  def new
+    @blog = Blog.new
+  end
+
+  def create
+    @blog = Blog.new(blog_params)
+
+    if @blog.save
+      flash.notice = "Blog created successfully!"
+
+      render :edit
+    else
+      flash.alert = "Error creating blog."
+
+      render :new
+    end
+  end
+
+  def edit
+    @blog = Blog.find(params[:id])
+  end
+
+  def update
+    @blog = Blog.find(params[:id])
+
+    if @blog.update_attributes(blog_params)
+      flash.notice = "Blog updated successfully!"
+    else
+      flash.alert = "Error updating blog."
+    end
+
+    render :edit
+  end
+
+  private
+
+    def blog_params
+      params.require(:blog).permit(:title, :body, :slug, records_attributes: [:description, :_destroy])
+    end
+
+    def set_section
+      @section = "blogs"
+    end
+
+end
@@ -0,0 +1,12 @@
+class Admin::DashboardController < Admin::AdminController
+  before_action :set_section
+
+  def index
+  end
+
+  private
+
+    def set_section
+      @section = "dashboard"
+    end
+end
@@ -1,26 +1,7 @@
 class EntriesController < ApplicationController
-  before_action :authenticate_user!, only: [:edit, :update]
 
   def show
-    @entry = Entry.where(slug: params[:slug]).first
+    @entry = Entry.find_by_slug(params[:slug])
   end
 
-  def edit
-    @entry = Entry.where(slug: params[:slug]).first
-  end
-
-  def update
-    @entry = Entry.where(slug: params[:slug]).first
-
-    if @entry.update_attributes(entry_params)
-      flash.notice = ""
-    end
-  end
-
-  private
-
-    def entry_params
-      params.require(:blog).permit(:title, :body, :slug)
-    end
-
 end
@@ -0,0 +1,11 @@
+module Admin::AdminHelper
+
+  def major_sidebar_attrs(section)
+    if section == @section
+      { class: "major active" }
+    else
+      { class: "major inactive" }
+    end
+  end
+
+end
@@ -0,0 +1,2 @@
+module Admin::BlogsHelper
+end
@@ -0,0 +1,2 @@
+module Admin::DashboardHelper
+end
@@ -0,0 +1,4 @@
+class Ckeditor::Asset < ActiveRecord::Base
+  include Ckeditor::Orm::ActiveRecord::AssetBase
+  include Ckeditor::Backend::Paperclip
+end
@@ -0,0 +1,13 @@
+class Ckeditor::AttachmentFile < Ckeditor::Asset
+  has_attached_file :data,
+                    url: '/uploads/attachments/:id/:filename',
+                    path: ':rails_root/public/uploads/attachments/:id/:filename'
+
+  validates_attachment_presence :data
+  validates_attachment_size :data, less_than: 100.megabytes
+  do_not_validate_attachment_file_type :data
+
+  def url_thumb
+    @url_thumb ||= Ckeditor::Utils.filethumb(filename)
+  end
+end
@@ -0,0 +1,14 @@
+class Ckeditor::Picture < Ckeditor::Asset
+  has_attached_file :data,
+                    url: '/uploads/pictures/:id/:style_:basename.:extension',
+                    path: ':rails_root/public/uploads/pictures/:id/:style_:basename.:extension',
+                    styles: { content: '800>', thumb: '118x100#' }
+
+  validates_attachment_presence :data
+  validates_attachment_size :data, less_than: 2.megabytes
+  validates_attachment_content_type :data, content_type: /\Aimage/
+
+  def url_content
+    url(:content)
+  end
+end
@@ -1,8 +1,10 @@
 class Entry < ApplicationRecord
-  has_many :records, as: :recordable
+  has_many :records, as: :recordable, inverse_of: :recordable
 
   validates :slug, presence: true, format: /\A[-a-z0-9]+\z/
 
+  accepts_nested_attributes_for :records, allow_destroy: true
+
   def path
     "/says/#{slug}"
   end
@@ -0,0 +1,23 @@
+- if f.object.errors.any?
+  %ul#errors
+    - f.object.errors.full_messages.each do |error|
+      %li= error
+%fieldset#content
+  .title-field
+    = f.label :title
+    = f.text_field :title, placeholder: "Title"
+  .slug-field
+    = f.label :slug, "https://feffernoo.se/says/"
+    = f.text_field :slug, placeholder: "insert-slug-here"
+  .body-field
+    = f.label :body
+    = f.cktext_area :body
+%fieldset#details
+  .details-module
+    = f.fields_for :records, Record.new do |builder|
+      .should-create-record-field
+        = builder.check_box :_destroy, {checked: false}, "0", "1"
+        = builder.label :_destroy, "Create record?"
+      .record-description-field
+        = builder.text_area :description, placeholder: "record text"
+  .details-module= f.submit
@@ -0,0 +1,2 @@
+= form_for @blog, url: admin_blog_url(@blog), html: { id: "blog-form" } do |f|
+  = render partial: "form", locals: { f: f }
@@ -0,0 +1,10 @@
+%table#entries
+  %tr
+    %th Title
+    %th Date created
+    %th
+  - @blogs.each do |blog|
+    %tr{ class: cycle("even", "odd") }
+      %td= blog.title
+      %td= blog.created_at.strftime("%B %d, %Y, %l:%M%P")
+      %td= link_to "Edit", edit_admin_blog_url(blog)
@@ -0,0 +1,2 @@
+= form_for @blog, url: admin_blogs_url, html: { id: "blog-form" } do |f|
+  = render partial: "form", locals: { f: f }
@@ -0,0 +1 @@
+Welcome to the the ubiquitous administration panel!
@@ -1,11 +0,0 @@
-= form_for @entry, url: @entry.path do |f|
-  .field
-    = f.label :title
-    = f.text_field :title
-  .field
-    = f.label :body
-    = f.text_area :body
-  .field
-    = f.label :slug
-    = f.text_field :slug
-  = f.submit
@@ -0,0 +1,27 @@
+!!! 5
+%html
+  %head
+    %title Thoughts - Admin
+    = csrf_meta_tags
+    = stylesheet_link_tag    'admin', media: 'all', 'data-turbolinks-track': 'reload'
+    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
+  %body
+    #banner= link_to "Thoughts", root_url
+    #container
+      %ul#sidebar
+        %li{major_sidebar_attrs("dashboard")}
+          = link_to "Dashboard", admin_url, class: "major-link"
+        %li{major_sidebar_attrs("blogs")}
+          = link_to "Blogs", admin_blogs_url, class: "major-link"
+          %ul.minors
+            %li.minor= link_to "New blog", new_admin_blog_url
+      #main
+        - if flash[:alert]
+          #flash.flash-alert
+            %span.flash-tag ERROR:
+            = flash.alert
+        - if flash[:notice]
+          #flash.flash-notice
+            %span.flash-tag NOTICE:
+            = flash.notice
+        = yield
@@ -21,6 +21,7 @@
             - if not user_signed_in?
               %li= link_to "Log in", new_user_session_path
             - if user_signed_in?
+              %li= link_to "Admin", admin_url
               %li= link_to "Log out", destroy_user_session_path, method: :delete
       #main
         %header#banner= link_to "feffernoo.se", root_url
@@ -12,4 +12,5 @@ Rails.application.config.assets.paths << Rails.root.join('node_modules')
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
 # Rails.application.config.assets.precompile += %w( admin.js admin.css )
-Rails.application.config.assets.precompile += %w( main userdata )
+Rails.application.config.assets.precompile += %w( ckeditor/* )
+Rails.application.config.assets.precompile += %w( main userdata admin )
@@ -0,0 +1,58 @@
+# Use this hook to configure ckeditor
+Ckeditor.setup do |config|
+  # ==> ORM configuration
+  # Load and configure the ORM. Supports :active_record (default), :mongo_mapper and
+  # :mongoid (bson_ext recommended) by default. Other ORMs may be
+  # available as additional gems.
+  require 'ckeditor/orm/active_record'
+
+  # Allowed image file types for upload.
+  # Set to nil or [] (empty array) for all file types
+  # By default: %w(jpg jpeg png gif tiff)
+  # config.image_file_types = %w(jpg jpeg png gif tiff)
+
+  # Allowed flash file types for upload.
+  # Set to nil or [] (empty array) for all file types
+  # By default: %w(jpg jpeg png gif tiff)
+  # config.flash_file_types = %w(swf)
+
+  # Allowed attachment file types for upload.
+  # Set to nil or [] (empty array) for all file types
+  # By default: %w(doc docx xls odt ods pdf rar zip tar tar.gz swf)
+  # config.attachment_file_types = %w(doc docx xls odt ods pdf rar zip tar tar.gz swf)
+
+  # Setup authorization to be run as a before filter
+  # By default: there is no authorization.
+  # config.authorize_with :cancan
+
+  # Override parent controller CKEditor inherits from
+  # By default: 'ApplicationController'
+  # config.parent_controller = 'MyController'
+
+  # Asset model classes
+  # config.picture_model { Ckeditor::Picture }
+  # config.attachment_file_model { Ckeditor::AttachmentFile }
+
+  # Paginate assets
+  # By default: 24
+  # config.default_per_page = 24
+
+  # Customize ckeditor assets path
+  # By default: nil
+  # config.asset_path = 'http://www.example.com/assets/ckeditor/'
+
+  # To reduce the asset precompilation time, you can limit plugins and/or languages to those you need:
+  # By default: nil (no limit)
+  # config.assets_languages = ['en', 'uk']
+  # config.assets_plugins = ['image', 'smiley']
+
+  # CKEditor CDN
+  # More info here http://cdn.ckeditor.com/
+  # By default: nil (CDN disabled)
+  # config.cdn_url = '//cdn.ckeditor.com/4.7.1/standard/ckeditor.js'
+
+  # JS config url
+  # Used when CKEditor CDN enabled
+  # By default: "ckeditor/config.js"
+  # config.js_config_url = 'ckeditor/config.js'
+end
@@ -1,14 +1,14 @@
 Rails.application.routes.draw do
+  namespace :admin do
+    get '/', to: 'dashboard#index'
+
+    resources :blogs, except: [:show]
+  end
+
+  mount Ckeditor::Engine => '/ckeditor'
   devise_for :users, controllers: { sessions: 'users/sessions' }
 
   root "records#index"
 
   get 'says/:slug', to: 'entries#show'
-  get 'says/:slug/edit', to: 'entries#edit'
-  put 'says/:slug', to: 'entries#update'
-  patch 'says/:slug', to: 'entries#update'
-
-  # get ':directory/:slug', to: 'entries#show', constraints: lambda { |request|
-  #   Entry::DIRECTORIES.include? request.path_parameters['directory']
-  # }
 end
@@ -0,0 +1,23 @@
+class CreateCkeditorAssets < ActiveRecord::Migration[5.1]
+  def self.up
+    create_table :ckeditor_assets do |t|
+      t.string  :data_file_name, null: false
+      t.string  :data_content_type
+      t.integer :data_file_size
+      t.string  :data_fingerprint
+      t.string  :type, limit: 30
+
+      # Uncomment       it to save images dimensions, if your need it
+      t.integer :width
+      t.integer :height
+
+      t.timestamps null: false
+    end
+
+    add_index :ckeditor_assets, :type
+  end
+
+  def self.down
+    drop_table :ckeditor_assets
+  end
+end
@@ -10,7 +10,20 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20170625151955) do
+ActiveRecord::Schema.define(version: 20170629184901) do
+
+  create_table "ckeditor_assets", force: :cascade do |t|
+    t.string "data_file_name", null: false
+    t.string "data_content_type"
+    t.integer "data_file_size"
+    t.string "data_fingerprint"
+    t.string "type", limit: 30
+    t.integer "width"
+    t.integer "height"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["type"], name: "index_ckeditor_assets_on_type"
+  end
 
   create_table "entries", force: :cascade do |t|
     t.string "title"
@@ -0,0 +1,19 @@
+require 'test_helper'
+
+class Admin::BlogsControllerTest < ActionDispatch::IntegrationTest
+  test "should get index" do
+    get admin_blogs_index_url
+    assert_response :success
+  end
+
+  test "should get new" do
+    get admin_blogs_new_url
+    assert_response :success
+  end
+
+  test "should get edit" do
+    get admin_blogs_edit_url
+    assert_response :success
+  end
+
+end
@@ -0,0 +1,9 @@
+require 'test_helper'
+
+class Admin::DashboardControllerTest < ActionDispatch::IntegrationTest
+  test "should get index" do
+    get admin_dashboard_index_url
+    assert_response :success
+  end
+
+end