Table Tag on WYSIWYG Editor

Table tag is one of the most used Html tag when you write technical document. This extension adds a new function to handle table tag into the WYSIWYG editor.

By using this extension on the CMS and other applications, you can make application which can handle technical document and sales page with comprehensive explanation.

Appearance

This exmaple supports following operations for The Table Tag.

Create a new Table
Manipulate Table and Style Sheet attributes
Delete row, column and table
Insert row, column

Those functions are supported by following table icons on the header of the WYSIWYG editor.

Html Table Tag manipulation menu

Create a Table

In order to create a new table, click the new html table tag icon, then following dialog appears.

Dialog to create a new Html Table Tag

On this dialog, choose whether the table has header or not, and number of columns and rows. Input those information and click the "Submit Query" button. then a new table is created in the content editor area of the WYSIWYG editor.

created html table tag

Manipulate Table Style

After making a table tag object in the content editor area of the WYSIWYG content editor. You can manipulate the style and attribute of the table, row, and column.

Click the call on the table you want to edit, and click the manipulate html table tag Manipulate html table object icon. Then following dialog appears.

Table attributes and style sheet setting

By this setting dialog, you can input attributes and Style Sheet data to the cell and parent table elements.

When you create a application, you have to prepare a function to edit the style sheet for the Html content. The example is Article Template part of the Alinous Document CMS. By defining the class in the Style Sheet, you can use the class in this input form.

Delete row, column and table

Select the cell of the table and click Delete table element icon. Then following dialog appears.

Delete table row, column, or table it self

In this dialog, you have to select how to delete it. Available way to delete is below.

Delete the row of the table including the selected cell
Delete the column of the table including the selected cell
Delete the entire table

After choosing it, click the "Submit Query" button, then the table element is deleted.

Insert row, column

Select the cell of the table and click Insert table element icon. Then following dialog appears.

Select insert type of the table element

At first, select the table element to insert. Basically you can insert a row or column. When you insert the low, select the row is header tag or table data tag.

Select the direction of the insert

After that, select the direction to insert the element. Finally, push the "Submit Query" button, then the new table element is inserted.

Source code location

The location of Table Tag extension is in the "ALINOUS_HOME/samples/nicedit/ext/" folder.

Anchor tag extention source code

The file named "nicetable.js" is the source code of this extension.

Extension's source code

This extension's code to register this plugin is below.


/* START CONFIG */
var nicInsertRowOptions = {
    buttons : {
        'InsertRow' : {name : __('Insert row into the Table'), type : 'nicEditorInsertRowButton'}
    }/* NICEDIT_REMOVE_START */,iconFiles : {'InsertRow' : '/samples/nicedit/ext/table_row_insert.png'}/* NICEDIT_REMOVE_END */
};
/* END CONFIG */
 
var nicEditorInsertRowButton = nicEditorButton.extend({

(.. skip body part ...)

});
nicEditors.registerPlugin(nicPlugin, nicInsertRowOptions);

/* START CONFIG */
var nicNewTableOptions = {
    buttons : {
        'NewTable' : {name : __('New Table'), type : 'nicEditorNewTableButton'}
    }/* NICEDIT_REMOVE_START */,iconFiles : {'NewTable' : '/samples/nicedit/ext/new.gif'}/* NICEDIT_REMOVE_END */
};
/* END CONFIG */

var nicEditorNewTableButton = nicEditorButton.extend({ 

(.. skip body part ...)

});
nicEditors.registerPlugin(nicPlugin, nicNewTableOptions);

/* START CONFIG */
var nicRemoveTableOptions = {
    buttons : {
        'RemoveTable' : {name : __('Remove Table, row or column'), type : 'nicEditorRemoveTableButton'}
    }/* NICEDIT_REMOVE_START */,iconFiles : {'RemoveTable' : '/samples/nicedit/ext/table_delete.gif'}/* NICEDIT_REMOVE_END */
};
/* END CONFIG */
 
var nicEditorRemoveTableButton = nicEditorButton.extend({ 

(.. skip body part ...)

});
nicEditors.registerPlugin(nicPlugin, nicRemoveTableOptions);

/* START CONFIG */
var nicTableOptions = {
    buttons : {
        'EdiTableTag' : {name : __('Edit table tag'), type : 'nicEditorTableButton'}
    }/* NICEDIT_REMOVE_START */,iconFiles : {'EdiTableTag' : '/samples/nicedit/ext/table.gif'}/* NICEDIT_REMOVE_END */
};
/* END CONFIG */
 
var nicEditorTableButton = nicEditorButton.extend({ 

(.. skip body part ...)

});
nicEditors.registerPlugin(nicPlugin,nicTableOptions);

This extension's source code registers 4 plugins. That is because there are 4 icon menus on the header of the WYSIWYG content editor. Each plugin instance corresponds with the icon.