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

   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,dialog',
   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 } );