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