X-Git-Url: https://git.immae.eu/?p=perso%2FImmae%2FProjets%2Fpackagist%2Fpiedsjaloux-ckeditor-component.git;a=blobdiff_plain;f=sources%2Fplugins%2Fwidget%2Fdev%2Fassets%2Fsimplebox%2Fplugin.js;fp=sources%2Fplugins%2Fwidget%2Fdev%2Fassets%2Fsimplebox%2Fplugin.js;h=4c22d0d06747cff828345de4707bc1c75cad3ca7;hp=0000000000000000000000000000000000000000;hb=317f8f8f0651488f226b5280a8f036c7c135c639;hpb=1096cdefb1c9a3f3c4ca6807e272da6c92e5ed9c
diff --git a/sources/plugins/widget/dev/assets/simplebox/plugin.js b/sources/plugins/widget/dev/assets/simplebox/plugin.js
new file mode 100644
index 0000000..4c22d0d
--- /dev/null
+++ b/sources/plugins/widget/dev/assets/simplebox/plugin.js
@@ -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:
+ '
' +
+ '
Title
' +
+ '
' +
+ '
',
+
+ // 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 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 );
+ }
+ } );
+ }
+} );