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.
Create a Table
In order to create a new table, click the icon, then following dialog appears.
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.
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 icon. Then following dialog appears.
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 icon. Then following dialog appears.
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 icon. Then following dialog appears.
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.
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.
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.
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.