Using WikiEditor

The new Usability Initiative extension WikiEditor was provided on the TNG Wiki as part of the MediaWiki 1.16.5 upgrade on TNG Wiki and is now part of the MediaWiki software bundle. This is the editor used on Wikipedia which is being integrated into MediaWiki.

The Help link on the WikiEditor toolbar provides help on using the WikiEditor toolbar. TNG Wiki Buttons Added to WikiEditor provides the help for the additional buttons added for the TNG Wiki

The Advanced link is a toggle on and off display of a second toolbar line that contains other formatting options, such as

• headings
• lists (bulleted, numbered, indentation, definition)
• font increases, superscripts, and subscripts
• insert picture, table, redirect

The TNG Wiki Buttons Added to WikiEditor provides information on the buttons that were added to the WikiEditor for the TNG Wiki.

WikiEditor Toolbar The following shows the WikiEditor toolbar as implemented on the TNG Wiki. It is the same toolbar as used on Wikipedia with additional buttons to make it easier to add articles that include code snippets.

Advanced Toolbar

The Advanced link is a toggle on and off display of a second toolbar line that contains other formatting options.

Formatting Headings

The formatting headings option is on the Advanced toolbar and provides a pull down selection list of the formatting for Heading level 2 through 5

There are two easy ways to format headings using the new WikiEditor:

• select the text you want for the heading and then click the Heading pull down and select Level 2 for major section headings
• then click the Heading pull down and select Level 2 for major section headings, and enter the text you want for the heading.

Bullet List

When you click the Bullet List button it generates an asterisk in front of the bulleted list item

• Bullet list item

you should over type the Bullet list item with the appropriate item list.

If you select the text of a list of items

 * first bulleted item
 second bulleted item
 third bulleted item

only the first item in the list is marked, so you need to select each item individually or just enter the asterisk in front of each of the bulleted list items

Table Formatting

The new WikiEditor table button displays a dialog that allow you to select among several options to create a table. Note though that the class="wikitable" now includes a border. If you do not want to display a border, you may need to remove the class statement after creating the table, if you forgot to uncheck the Style with borders box, or you created the table in the TNG Wiki prior to the upgrade to MediaWiki 1.16.2, such as tables created to provide text and image display sections of a page. For example, I removed the class="wikitable" in the Appearance section above. Impact: You may need to update pages created previously to remove the class="wikitable" if you do not want a border, such as where a table is used to define text with an image to illustrate.

TNG WikiEditor Additions

The following additions were made to the WikiEditor Toolbar for the TNG Wiki.

Syntax Highlighting

The TNG WikiEditor highlight syntax button can be used to highlight the syntax of various source snippets, like PHP, javascript, css, etc. The Highlight Syntax button generates the following <syntaxhighlight lang="html" line start="100" highlight="5" ></syntaxhighlight> where you should specify lang= for the programming language, such as lang="css", lang="html4strict" lang="javascript", lang="php" (default if lang= is not specified), or several other languages. line is optional if you want to assign line numbers start="line" specifies the starting line number, if you specify line highlight="5" indicates to highlighting line 5 enclose="div" provides a way to wrap long code lines Usage: You may may want to update pages created previously to replace the <code><nowiki></code> or <pre></pre> if you had snippets of code that were long lines with the new <syntaxhighlight> tag. The code snippet will then be highlighted as shown below: // New Account Request Form additions // Reason why you need a User ID on our site $text['userreason']= "Note that you must provide a direct connection to the<strong>person ID (Innnn) of your grandparent, great-grandparent,or great-great-grandparent</strong> who is in our database. A User ID is only needed to view information on <strong>Living Cousins</strong>, and will only be approved if you provide information that documents your relationship to a person already in our family tree. <strong>Relationships from the 1600-1700 are too far removed for me to grant access to Living people.</strong> Thanks.$dbowner"; If you do not specify the enclose="div" parameter then long lines will exceed the page with as shown below // New Account Request Form additions // Reason why you need a User ID on our site $text['userreason']= "Note that you must provide a direct connection to the<strong>person ID (Innnn) of your grandparent, great-grandparent,or great-great-grandparent</strong> who is in our database. A User ID is only needed to view information on <strong>Living Cousins</strong>, and will only be approved if you provide information that documents your relationship to a person already in our family tree. <strong>Relationships from the 1600-1700 are too far removed for me to grant access to Living people.</strong> Thanks.$dbowner"; Note that the Highlight Syntax button with the enclose="div" parameter is a way to get long text to be wrapped for display that was previously coded within <pre> </pre> tags.