Skip to content

Commit cb280df

Browse files
ReinmarReinmar
committed
Merge branch 't/11983'
2 parents d8a9956 + ddb41f1 commit cb280df

File tree

9 files changed

+368
-13
lines changed

9 files changed

+368
-13
lines changed

‎CHANGES.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ CKEditor 4 Changelog
33

44
## CKEditor 4.4.2
55

6+
Fixed Issues:
7+
8+
* [#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.
69

710
## CKEditor 4.4.1
811

‎plugins/widget/dev/contents.css renamed to ‎plugins/widget/dev/assets/contents.css

File renamed without changes.

‎plugins/widget/dev/assets/simplebox/contents.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.simplebox {
2+
padding: 8px;
3+
margin: 10px;
4+
background: #eee;
5+
border-radius: 8px;
6+
border: 1px solid #ddd;
7+
box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset;
8+
}
9+
.simplebox-title, .simplebox-content {
10+
box-shadow: 0 1px 1px #ddd inset;
11+
border: 1px solid #cccccc;
12+
border-radius: 5px;
13+
background: #fff;
14+
}
15+
.simplebox-title {
16+
margin: 0 0 8px;
17+
padding: 5px 8px;
18+
}
19+
.simplebox-content {
20+
padding: 0 8px;
21+
}
22+
.simplebox-content::after {
23+
content: '';
24+
display: block;
25+
clear: both;
26+
}
27+
.simplebox.align-right {
28+
float: right;
29+
}
30+
.simplebox.align-left {
31+
float: left;
32+
}
33+
.simplebox.align-center {
34+
margin-left: auto;
35+
margin-right: auto;
36+
}

‎plugins/widget/dev/assets/simplebox/dialogs/simplebox.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Note: This automatic widget to dialog window binding (the fact that every field is set up from the widget
2+
// and is committed to the widget) is only possible when the dialog is opened by the Widgets System
3+
// (i.e. the widgetDef.dialog property is set).
4+
// When you are opening the dialog window by yourself, you need to take care of this by yourself too.
5+
6+
CKEDITOR.dialog.add( 'simplebox', function( editor ) {
7+
return {
8+
title: 'Edit Simple Box',
9+
minWidth: 200,
10+
minHeight: 100,
11+
contents: [
12+
{
13+
id: 'info',
14+
elements: [
15+
{
16+
id: 'align',
17+
type: 'select',
18+
label: 'Align',
19+
items: [
20+
[ editor.lang.common.notSet, '' ],
21+
[ editor.lang.common.alignLeft, 'left' ],
22+
[ editor.lang.common.alignRight, 'right' ],
23+
[ editor.lang.common.alignCenter, 'center' ]
24+
],
25+
// When setting up this field, set its value to the "align" value from widget data.
26+
// Note: Align values used in the widget need to be the same as those defined in the "items" array above.
27+
setup: function( widget ) {
28+
this.setValue( widget.data.align );
29+
},
30+
// When committing (saving) this field, set its value to the widget data.
31+
commit: function( widget ) {
32+
widget.setData( 'align', this.getValue() );
33+
}
34+
},
35+
{
36+
id: 'width',
37+
type: 'text',
38+
label: 'Width',
39+
width: '50px',
40+
setup: function( widget ) {
41+
this.setValue( widget.data.width );
42+
},
43+
commit: function( widget ) {
44+
widget.setData( 'width', this.getValue() );
45+
}
46+
}
47+
]
48+
}
49+
]
50+
};
51+
} );

‎plugins/widget/dev/assets/simplebox/icons/simplebox.png

286 Bytes
Loading

‎plugins/widget/dev/assets/simplebox/plugin.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
'use strict';
2+
3+
// Register the plugin within the editor.
4+
CKEDITOR.plugins.add( 'simplebox', {
5+
// This plugin requires the Widgets System defined in the 'widget' plugin.
6+
requires: 'widget',
7+
8+
// Register the icon used for the toolbar button. It must be the same
9+
// as the name of the widget.
10+
icons: 'simplebox',
11+
12+
// The plugin initialization logic goes inside this method.
13+
init: function( editor ) {
14+
// Register the editing dialog.
15+
CKEDITOR.dialog.add( 'simplebox', this.path + 'dialogs/simplebox.js' );
16+
17+
// Register the simplebox widget.
18+
editor.widgets.add( 'simplebox', {
19+
// Allow all HTML elements, classes, and styles that this widget requires.
20+
// Read more about the Advanced Content Filter here:
21+
// * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
22+
// * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf
23+
allowedContent:
24+
'div(!simplebox,align-left,align-right,align-center){width};' +
25+
'div(!simplebox-content); h2(!simplebox-title)',
26+
27+
// Minimum HTML which is required by this widget to work.
28+
requiredContent: 'div(simplebox)',
29+
30+
// Define two nested editable areas.
31+
editables: {
32+
title: {
33+
// Define CSS selector used for finding the element inside widget element.
34+
selector: '.simplebox-title',
35+
// Define content allowed in this nested editable. Its content will be
36+
// filtered accordingly and the toolbar will be adjusted when this editable
37+
// is focused.
38+
allowedContent: 'br strong em'
39+
},
40+
content: {
41+
selector: '.simplebox-content'
42+
}
43+
},
44+
45+
// Define the template of a new Simple Box widget.
46+
// The template will be used when creating new instances of the Simple Box widget.
47+
template:
48+
'<div class="simplebox">' +
49+
'<h2 class="simplebox-title">Title</h2>' +
50+
'<div class="simplebox-content"><p>Content...</p></div>' +
51+
'</div>',
52+
53+
// Define the label for a widget toolbar button which will be automatically
54+
// created by the Widgets System. This button will insert a new widget instance
55+
// created from the template defined above, or will edit selected widget
56+
// (see second part of this tutorial to learn about editing widgets).
57+
//
58+
// Note: In order to be able to translate your widget you should use the
59+
// editor.lang.simplebox.* property. A string was used directly here to simplify this tutorial.
60+
button: 'Create a simple box',
61+
62+
// Set the widget dialog window name. This enables the automatic widget-dialog binding.
63+
// This dialog window will be opened when creating a new widget or editing an existing one.
64+
dialog: 'simplebox',
65+
66+
// Check the elements that need to be converted to widgets.
67+
//
68+
// Note: The "element" argument is an instance of http://docs.ckeditor.com/#!/api/CKEDITOR.htmlParser.element
69+
// so it is not a real DOM element yet. This is caused by the fact that upcasting is performed
70+
// during data processing which is done on DOM represented by JavaScript objects.
71+
upcast: function( element ) {
72+
// Return "true" (that element needs to converted to a Simple Box widget)
73+
// for all <div> elements with a "simplebox" class.
74+
return element.name == 'div' && element.hasClass( 'simplebox' );
75+
},
76+
77+
// When a widget is being initialized, we need to read the data ("align" and "width")
78+
// from DOM and set it by using the widget.setData() method.
79+
// More code which needs to be executed when DOM is available may go here.
80+
init: function() {
81+
var width = this.element.getStyle( 'width' );
82+
if ( width )
83+
this.setData( 'width', width );
84+
85+
if ( this.element.hasClass( 'align-left' ) )
86+
this.setData( 'align', 'left' );
87+
if ( this.element.hasClass( 'align-right' ) )
88+
this.setData( 'align', 'right' );
89+
if ( this.element.hasClass( 'align-center' ) )
90+
this.setData( 'align', 'center' );
91+
},
92+
93+
// Listen on the widget#data event which is fired every time the widget data changes
94+
// and updates the widget's view.
95+
// Data may be changed by using the widget.setData() method, which we use in the
96+
// Simple Box dialog window.
97+
data: function() {
98+
// Check whether "width" widget data is set and remove or set "width" CSS style.
99+
// The style is set on widget main element (div.simplebox).
100+
if ( this.data.width == '' )
101+
this.element.removeStyle( 'width' );
102+
else
103+
this.element.setStyle( 'width', this.data.width );
104+
105+
// Brutally remove all align classes and set a new one if "align" widget data is set.
106+
this.element.removeClass( 'align-left' );
107+
this.element.removeClass( 'align-right' );
108+
this.element.removeClass( 'align-center' );
109+
if ( this.data.align )
110+
this.element.addClass( 'align-' + this.data.align );
111+
}
112+
} );
113+
}
114+
} );

‎plugins/widget/dev/nestedwidgets.html

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
4+
For licensing, see LICENSE.md or http://ckeditor.com/license
5+
-->
6+
<html>
7+
<head>
8+
<meta charset="utf-8">
9+
<title>Nested widgets &mdash; CKEditor Sample</title>
10+
<script src="../../../ckeditor.js"></script>
11+
<script src="../../../samples/sample.js"></script>
12+
<link rel="stylesheet" href="../../../samples/sample.css">
13+
<link rel="stylesheet" href="../../../contents.css">
14+
<link rel="stylesheet" href="assets/simplebox/contents.css">
15+
</head>
16+
<body>
17+
<h1 class="samples">Nested widgets</h1>
18+
19+
<h2>Classic (iframe-based) Sample</h2>
20+
<textarea cols="80" id="editor1" name="editor1" rows="10">
21+
<h1>Simple Box Sample</h1>
22+
23+
<div class="simplebox align-right" style="width: 60%">
24+
<h2 class="simplebox-title">Title</h2>
25+
<div class="simplebox-content">
26+
<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>
27+
28+
<figure class="image" style="float: right">
29+
<img alt="The Eagle" src="../../../samples/assets/sample.jpg" width="150" />
30+
<figcaption>The Eagle in lunar orbit</figcaption>
31+
</figure>
32+
33+
<ul>
34+
<li>Foo!</li>
35+
<li>Bar!</li>
36+
</ul>
37+
38+
<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>
39+
</div>
40+
</div>
41+
42+
<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>
43+
44+
<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>
45+
46+
<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>
47+
48+
<div class="simplebox align-center" style="width: 750px">
49+
<h2 class="simplebox-title">Title</h2>
50+
<div class="simplebox-content">
51+
<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>
52+
53+
<ul>
54+
<li>Foo!</li>
55+
<li>Bar!</li>
56+
</ul>
57+
</div>
58+
</div>
59+
60+
<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>
61+
</textarea>
62+
63+
<h2>Inline Sample</h2>
64+
<div id="editor2" contenteditable="true">
65+
<h1>Simple Box Sample</h1>
66+
67+
<div class="simplebox align-right" style="width: 60%">
68+
<h2 class="simplebox-title">Title</h2>
69+
<div class="simplebox-content">
70+
<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>
71+
72+
<figure class="image" style="float: right">
73+
<img alt="The Eagle" src="../../../samples/assets/sample.jpg" width="150" />
74+
<figcaption>The Eagle in lunar orbit</figcaption>
75+
</figure>
76+
77+
<ul>
78+
<li>Foo!</li>
79+
<li>Bar!</li>
80+
</ul>
81+
82+
<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>
83+
</div>
84+
</div>
85+
86+
<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>
87+
88+
<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>
89+
90+
<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>
91+
92+
<div class="simplebox align-center" style="width: 750px">
93+
<h2 class="simplebox-title">Title</h2>
94+
<div class="simplebox-content">
95+
<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>
96+
97+
<ul>
98+
<li>Foo!</li>
99+
<li>Bar!</li>
100+
</ul>
101+
</div>
102+
</div>
103+
104+
<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>
105+
</div>
106+
107+
<script>
108+
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
109+
CKEDITOR.tools.enableHtml5Elements( document );
110+
111+
CKEDITOR.on( 'instanceCreated', function( evt ) {
112+
var editor = evt.editor;
113+
editor.on( 'pluginsLoaded', function() {
114+
editor.widgets.on( 'instanceCreated', function( evt ) {
115+
if ( evt.data.name == 'simplebox' ) {
116+
evt.data.on( 'ready', function() {
117+
editor.widgets.initOnAll( evt.data.editables.content );
118+
} );
119+
}
120+
} );
121+
} );
122+
} );
123+
124+
CKEDITOR.plugins.addExternal( 'simplebox', 'plugins/widget/dev/assets/simplebox/' );
125+
126+
CKEDITOR.replace( 'editor1', {
127+
extraPlugins: 'simplebox,placeholder,image2',
128+
removePlugins: 'forms,bidi',
129+
contentsCss: [ '../../../contents.css', 'assets/simplebox/contents.css' ],
130+
height: 500
131+
} );
132+
133+
CKEDITOR.inline( 'editor2', {
134+
extraPlugins: 'simplebox,placeholder,image2',
135+
removePlugins: 'forms,bidi'
136+
} );
137+
138+
</script>
139+
</body>
140+
</html>

‎plugins/widget/dev/widgetstyles.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<script src="../../../samples/sample.js"></script>
1212
<link rel="stylesheet" href="../../../samples/sample.css">
1313
<link rel="stylesheet" href="../../../contents.css">
14-
<link rel="stylesheet" href="contents.css">
14+
<link rel="stylesheet" href="assets/contents.css">
1515
</head>
1616
<body>
1717
<h1 class="samples">Applying styles to widgets</h1>
@@ -129,7 +129,7 @@ <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
129129

130130
CKEDITOR.replace( 'editor1', {
131131
extraPlugins: 'placeholder,image2,mathjax',
132-
contentsCss: [ '../../../contents.css', 'contents.css' ],
132+
contentsCss: [ '../../../contents.css', 'assets/contents.css' ],
133133
stylesSet: stylesSet,
134134
height: 300
135135
} );

0 commit comments

Comments
 (0)