Ticket #11989: plugin.js

// Register the plugin within the editor.
CKEDITOR.plugins.add( 'contentTable', {
        // 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: 'contentTable',

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

                // Register the contentTable widget.
                editor.widgets.add( 'contentTable', {
                        // 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(!contentTable);table;tbody;tr;td;div(!ckw_Div_content)',

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

                        // Define two nested editable areas.
                        editables: {
                                content: {
                                        selector: '.ckw_Div_content',
                                        allowedContent: 'p br ul ol li strong em'
                                }
                        },

                        // 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="contentTable"></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.contentTable.* 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: 'contentTable',

                        // 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( 'contentTable' );
                        },

                        // 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 rows = this.element.getStyle( 'rows' );
                                var columns = this.element.getStyle( 'columns' );
                                alert(rows);
                                alert(columns);
                                
                        },

                        // 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() {
                                var tblStr='<table border="0" cellpadding="0" cellspacing="0" align="center" style="table-layout:fixed; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-collapse: collapse; border-left-style:solid; border-left-width: 0px; border-left-color: #ffffff; border-top-style:solid; border-top-width: 0px; border-top-color: #ffffff; border-right-style:solid; border-right-width: 0px; border-right-color: #ffffff; border-bottom-style:solid;  border-bottom-width: 0px; border-bottom-color: #ffffff;">';
                                
                                for(var i=0;i<this.data.rows;i++){
                                        tblStr += '<tr>';
                                        for(var j=0;j<this.data.columns;j++){
                                                tblStr += '<td valign="top" bgcolor="#FFFFFF" style="background-color:#ffffff; border-left-style:solid; border-left-width: 0px; border-left-color: #ffffff; border-top-style:solid; border-top-width: 0px; border-top-color: #ffffff; border-right-style:solid; border-right-width: 0px; border-right-color: #ffffff; border-bottom-style:solid;  border-bottom-width: 0px; border-bottom-color: #ffffff; padding-top:6px; padding-right:6px; padding-bottom:6px; padding-left:6px; border-collapse: collapse;"><div class="ckw_Div_content">text goes here...&nbsp<br>&nbsp;<br>&nbsp;</div></td>';
                                        }
                                        tblStr += '</tr>';
                                }
                                tblStr += '</table>';
                                this.element.setHtml(tblStr);
                        }
                } );
        }
} );