Skip to content
Permalink
Browse files

Merge branch 't/11983'

  • Loading branch information...
Reinmar committed May 23, 2014
2 parents d8a9956 + ddb41f1 commit cb280df88f4b71ad507a8aecd5ddabb413a9d89d
@@ -3,6 +3,9 @@ CKEditor 4 Changelog

## CKEditor 4.4.2

Fixed Issues:

* [#11983](http://dev.ckeditor.com/ticket/11983): Fixed: Clicking nested widget does not focus it. Additionally, performance of [`widget.repository.getByElement`](http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.widget.repository-method-getByElement) method has been improved.

## CKEditor 4.4.1

@@ -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;
}
@@ -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() );
}
}
]
}
]
};
} );
Binary file not shown.
@@ -0,0 +1,114 @@
'use strict';

// Register the plugin within the editor.
CKEDITOR.plugins.add( 'simplebox', {
// This plugin requires the Widgets System defined in the 'widget' plugin.
requires: 'widget',

// Register the icon used for the toolbar button. It must be the same
// as the name of the widget.
icons: 'simplebox',

// The plugin initialization logic goes inside this method.
init: function( editor ) {
// Register the editing dialog.
CKEDITOR.dialog.add( 'simplebox', this.path + 'dialogs/simplebox.js' );

// Register the simplebox widget.
editor.widgets.add( 'simplebox', {
// Allow all HTML elements, classes, and styles that this widget requires.
// Read more about the Advanced Content Filter here:
// * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
// * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf
allowedContent:
'div(!simplebox,align-left,align-right,align-center){width};' +
'div(!simplebox-content); h2(!simplebox-title)',

// Minimum HTML which is required by this widget to work.
requiredContent: 'div(simplebox)',

// Define two nested editable areas.
editables: {
title: {
// Define CSS selector used for finding the element inside widget element.
selector: '.simplebox-title',
// Define content allowed in this nested editable. Its content will be
// filtered accordingly and the toolbar will be adjusted when this editable
// is focused.
allowedContent: 'br strong em'
},
content: {
selector: '.simplebox-content'
}
},

// Define the template of a new Simple Box widget.
// The template will be used when creating new instances of the Simple Box widget.
template:
'<div class="simplebox">' +
'<h2 class="simplebox-title">Title</h2>' +
'<div class="simplebox-content"><p>Content...</p></div>' +
'</div>',

// Define the label for a widget toolbar button which will be automatically
// created by the Widgets System. This button will insert a new widget instance
// created from the template defined above, or will edit selected widget
// (see second part of this tutorial to learn about editing widgets).
//
// Note: In order to be able to translate your widget you should use the
// editor.lang.simplebox.* property. A string was used directly here to simplify this tutorial.
button: 'Create a simple box',

// Set the widget dialog window name. This enables the automatic widget-dialog binding.
// This dialog window will be opened when creating a new widget or editing an existing one.
dialog: 'simplebox',

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

// When a widget is being initialized, we need to read the data ("align" and "width")
// from DOM and set it by using the widget.setData() method.
// More code which needs to be executed when DOM is available may go here.
init: function() {
var width = this.element.getStyle( 'width' );
if ( width )
this.setData( 'width', width );

if ( this.element.hasClass( 'align-left' ) )
this.setData( 'align', 'left' );
if ( this.element.hasClass( 'align-right' ) )
this.setData( 'align', 'right' );
if ( this.element.hasClass( 'align-center' ) )
this.setData( 'align', 'center' );
},

// Listen on the widget#data event which is fired every time the widget data changes
// and updates the widget's view.
// Data may be changed by using the widget.setData() method, which we use in the
// Simple Box dialog window.
data: function() {
// Check whether "width" widget data is set and remove or set "width" CSS style.
// The style is set on widget main element (div.simplebox).
if ( this.data.width == '' )
this.element.removeStyle( 'width' );
else
this.element.setStyle( 'width', this.data.width );

// Brutally remove all align classes and set a new one if "align" widget data is set.
this.element.removeClass( 'align-left' );
this.element.removeClass( 'align-right' );
this.element.removeClass( 'align-center' );
if ( this.data.align )
this.element.addClass( 'align-' + this.data.align );
}
} );
}
} );
@@ -0,0 +1,140 @@
<!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="../../../samples/sample.js"></script>
<link rel="stylesheet" href="../../../samples/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="../../../samples/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="../../../samples/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="../../../samples/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="../../../samples/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.on( 'instanceCreated', function( evt ) {
var editor = evt.editor;
editor.on( 'pluginsLoaded', function() {
editor.widgets.on( 'instanceCreated', function( evt ) {
if ( evt.data.name == 'simplebox' ) {
evt.data.on( 'ready', function() {
editor.widgets.initOnAll( evt.data.editables.content );
} );
}
} );
} );
} );
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'
} );
</script>
</body>
</html>
@@ -11,7 +11,7 @@
<script src="../../../samples/sample.js"></script>
<link rel="stylesheet" href="../../../samples/sample.css">
<link rel="stylesheet" href="../../../contents.css">
<link rel="stylesheet" href="contents.css">
<link rel="stylesheet" href="assets/contents.css">
</head>
<body>
<h1 class="samples">Applying styles to widgets</h1>
@@ -129,7 +129,7 @@ <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
CKEDITOR.replace( 'editor1', {
extraPlugins: 'placeholder,image2,mathjax',
contentsCss: [ '../../../contents.css', 'contents.css' ],
contentsCss: [ '../../../contents.css', 'assets/contents.css' ],
stylesSet: stylesSet,
height: 300
} );
Oops, something went wrong.

0 comments on commit cb280df

Please sign in to comment.
You can’t perform that action at this time.