New Features:

• Clipboard (copy&paste, drag&drop) and file uploading features and improvements (#11437).

  • Major features:

    • Support for dropping and pasting files into the editor was introduced. Through a set of new facades for native APIs it is now possible to easily intercept and process inserted files.
    • File upload tools were introduced in order to simplify controlling the loading, uploading and handling server response, properly handle new upload configuration options, etc.
    • Image upload widget was introduced to upload dropped images. A base class for the upload widget was exposed, too, to make it simple to create new types of upload widgets which can handle any type of dropped file, show the upload progress and update the content when the process is done. It also handles editing and undo/redo operations when a file is being uploaded and integrates with the notification aggregator to show progress and success or error.
    • All drag and drop operations were integrated with the editor. All dropped content is passed through the editor#paste event and a set of new editor events was introduced — dragstart, drop, dragend.
    • The Data Transfer facade was introduced to unify access to data in various types and files. Data Transfer is now always available in the editor#paste event.
    • Switched from the pastebin to using the native clipboard access whenever possible. This solved many issues related to pastebin such as unnecessary scrolling or data loss. Additionally, on copy and cut from the editor the clipboard data is set. Therefore, on paste the editor has access to clean data, undisturbed by the browsers.
    • Drag and drop of inline and block widgets was integrated with the standard clipboard APIs. By listening to drag events you will thus be notified about widgets, too. This opens a possibility to filter pasted and dropped widgets.
    • The editor#paste event can have the range parameter so it is possible to change the paste position in the listener or paste in the not selectable position. Also the editor.insertHtml() method now accepts range as an additional parameter.
    • #11621: A configurable paste filter was introduced. The filter is by default turned to 'semantic-content' on Webkit and Blink for all pasted content coming from external sources because of the low quality of HTML that these engines put into the clipboard. Internal and cross-editor paste is safe due to the change explained in the previous point.

  • Other changes and related fixes:

    • #12095: On drag and copy of widgets the same method is used to get selected HTML as in the normal case. Thanks to that styles applied to inline widgets are not lost.
    • #11219: Fixed: Dragging a captioned image does not fire the editor#paste event.
    • #9554: [Webkit Mac] Fixed: Editor scrolls on paste.
    • #9898: [Webkit&Divarea] Fixed: Pasting causes undesirable scrolling.
    • #11993: [Chrome] Fixed: Pasting content scrolls the document.
    • #12613: Show the user that they can not drop on editor UI (toolbar, bottom bar).
    • #12851: [Blink/Webkit] Fixed: Formatting disappears when pasting content into cells.
    • #12914: Fixed: Copy/Paste of table broken in div-based editor.

  • Browser support.
    Browser support for related features varies significantly (see http://caniuse.com/clipboard).

    • File APIs needed to operate and file upload is not supported in Internet Explorer 9 and below.
    • Only Chrome and Safari on Mac OS support setting custom data items in the clipboard, so currently it is possible to recognize the origin of the copied content in these browsers only. All drag and drop operations can be identified thanks to the new Data Transfer facade.
    • No Internet Explorer browser supports the standard clipboard API which results in small glitches like where only plain text can be dropped from outside the editor. Thanks to the new Data Transfer facade, internal and cross-editor drag and drop supports the full range of data.
    • Direct access to clipboard could only be implemented in Chrome, Safari on Mac OS, Opera and Firefox. In other browsers the pastebin must still be used.

• #12875: Samples and toolbar configuration tools.

  • The old set of samples shipped with every CKEditor package was replaced with a shiny new single-page sample. This change concluded a long term plan which started from introducing the CKEditor SDK and CKEditor Functionality Overview section in the documentation which essentially redefined the old samples.
  • Toolbar configurators with live previews were introduced. They will be shipped with every CKEditor package and are meant to help in configuring toolbar layouts.

• #10925: The Media Embed and Semantic Media Embed plugins were introduced. Read more about the new features in the Embedding Content article.

• #10931: Added support for nesting widgets. It is now possible to insert one widget into another widget's nested editable. Note that unless nested editable's allowed content is defined precisely, starting from CKEditor 4.5 some widget buttons may become enabled. This feature is not supported in IE8. Included issues:

  • #12018: Fixed and reviewed: Nested widgets garbage collection.
  • #12024: [Firefox] Fixed: Outline is extended to the left by unpositioned drag handlers.
  • #12006: Fixed: Drag and drop of nested block widgets.
  • #12008: Fixed various cases of inserting a single non-editable element using the editor.insertHtml() method. Fixes pasting a widget with a nested editable inside another widget's nested editable.

• Notification system:

  • #11580: Introduced the notification system.
  • #12810: Introduced a notification aggregator for the notification system which simplifies displaying progress of many concurrent tasks.
• #11636: Introduced new, UX-focused, methods for getting selected HTML and deleting it — editor.getSelectedHtml() and editor.deleteSelectedHtml().
• #12416: Added the widget.definition.upcastPriority property which gives more control over widget upcasting order to the widget author.
• #12036: Initialize the editor in read-only mode when the <textarea> element has a readonly attribute.
• #11905: The resize event passes the current dimensions in its data.
• #12126: Introduced config.image_prefillDimensions and config.image2_prefillDimensions to make pre-filling width and height configurable for the Enhanced Image.
• #12746: Added a new configuration option to hide the Enhanced Image resizer.
• #12150: Exposed the getNestedEditable() and is* widget helper functions (see the static methods).
• #12448: Introduced the editable.insertHtmlIntoRange method.
• #12143: Added the config.floatSpacePreferRight configuration option that switches the alignment of the floating toolbar. Thanks to InvisibleBacon!
• #10986: Added support for changing dialog input and textarea text directions by using the Shift+Alt+Home/End keystrokes. The direction is stored in the value of the input by prepending the \u202A or \u202B marker to it. Read more in the documentation. Thanks to edithkk!
• #12770: Added support for passing widget's startup data as a widget command's argument. Thanks to Rebrov Boris and Tieme van Veen!
• #11583: Added support for the HTML5 required attribute in various form elements. Thanks to Steven Busse!

Changes:

• #12858: Basic Spartan browser compatibility. Full compatibility will be introduced later, because at the moment Spartan is still too unstable to be used for tests and we see many changes from version to version.
• #12948: The config.mathJaxLibrary option does not default to the MathJax CDN any more. It needs to be configured to enable (http://ckeditor.com/cke4/addon/mathjax) plugin now.
• #13069: Fixed inconsistencies between editable.insertHtml() and editable.insertElement() when the range parameter is used. Now, the editor.insertElement() method works on a higher level, what means that it saves undo snapshots and sets selection after insertion. Use the editable.insertElementIntoRange() method directly for the pre 4.5.0 behavior of editable.insertElement().
• #12870: Use editor.showNotification() instead of alert() directly whenever possible. When the notification plugin is loaded the notifications system is used automatically. Otherwise, the native alert() is displayed.
• #8024: Swapped behavior of the Split Cell Vertically and Horizontally features to be more intuitive. Thanks to kevinisagit!
• #10903: Performance improvements for the dom.element.addClass(), dom.element.removeClass() and dom.element.hasClass() methods. Note: The previous implementation allowed passing multiple classes to addClass() although it was only a side effect of that implementation. The new implementation does not allow this.
• #11856: jQuery adapter throw a meaningful error if CKEditor or jQuery is not loaded.

Fixed issues:

• #11586: Fixed: range.cloneContents() should not change the DOM in order to not affect selection.
• #12148: Fixed: dom.element.getChild() should not modify a passed array.
• #12503: [Blink/Webkit] Fixed: Incorrect result of select all and Backspace or Delete.
• #13001: [Firefox] Fixed: The <br /> filler is placed in the wrong position by the range.fixBlock method due to Firefox quirky behavior.
• #13101: [IE8] Fixed: IE8 prepends colons to HTML5 element names when cloning them.