Text Editor (Part Two)

This continues the Text Editor Tutorial, please follow all the Steps of Text Editor (Part One) before starting this Tutorial, or use the Source Code from that tutorial and start from there. In this second part you will add the Edit and Formatting features.

Printer Friendly Download Tutorial (123KB) Download Source Code (13.2KB)

Step 1

Start Microsoft Visual Basic 2008 Express Edition, then select File then Open Project... and select the Solution File for Part One (e.g. TextEditorPartOne.sln), the following should then appear:

Step 2

Click on or select the MenuStrip, this is the component with "File" on the top left of the Form, this will then show a "Type Here" option next to the File menu, type "Edit" without the quotes, see below:

Step 3

Type below the Edit menu the following MenuItems: "Cut", "Copy", "Paste", "Delete", "Select All" and "Time/Date" all of which without the quotes.
To do this just type the name into the "Type Here" box below "Edit", then type the next in the "Type Here" box under that and so on until all the MenuItems are present, see below:

Step 4

Click on or select the MenuStrip again, on this next to the Edit menu will be another "Type Here" option this this box type "Format" without the quotes, then in the "Type Here" box under that type "Font...", these are all the menu options needed for Part Two, see below:

Step 5

Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Cut" (CutToolStripMenuItem) and type the following in the CutToolStripMenuItem_Click() Sub:

txtEditor.Cut()

See Below:

Step 6

Click on the [Design] Tab to view the form again or double click on the Form's name in the Solution Explorer, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Copy" (CopyToolStripMenuItem) and type the following in the CopyToolStripMenuItem_Click() Sub:

txtEditor.Copy()

See Below:

Step 7

Click on the [Design] Tab to view the form again or double click on the Form's name in the Solution Explorer, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Paste" (PasteToolStripMenuItem) and type the following in the PasteToolStripMenuItem_Click() Sub:

txtEditor.Paste()

See Below:

Step 8

Click on the [Design] Tab to view the form again or double click on the Form's name in the Solution Explorer, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Delete" (DeleteToolStripMenuItem) and type the following in the DeleteToolStripMenuItem_Click() Sub:

txtEditor.SelectedText = ""

See Below:

Step 9

Click on the [Design] Tab to view the form again or double click on the Form's name in the Solution Explorer, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Select All" (SelectAllToolStripMenuItem) and type the following in the SelectAllToolStripMenuItem_Click() Sub:

txtEditor.SelectAll()

See Below:

Edit Menu Select All Menu Item Click Event

Step 10

Click on the [Design] Tab to view the form again or double click on the Form's name in the Solution Explorer, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Time/Date" (TimeDateToolStripMenuItem) and type the following, to complete the Edit menu item functions, in the TimeDateToolStripMenuItem_Click() Sub:

txtEditor.SelectedText = Format(Now, "HH:mm dd/mm/yyyy")

See Below:

Edit Menu Time/Date Menu Item Click Event

Step 11

Click on [Design] tab or double click on the Form's name in Solution Explorer then click on "Format" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Font..." (FontToolStripMenuItem) and type the following in the FontToolStripMenuItem_Click() Sub:

Dim Font As New FontDialog()
Save.ShowDialog(Me)
Try
  txtEditor.Font = Font.Font
Catch ex As Exception
  ' Do nothing on Exception
End Try

See Below:

Step 12

Steps 12-16 are optional and just add Keyboard Shortcuts to the MenuItems, you don't have to do these if you don't want to!
Return to the Design view of the Form by selecting the [Design] tab for the Form, or double click on the Form's name in Solution Explorer.
Click on "File" on the Menu Strip to select the Menu Strip and show the File Menu then mouse over the "Type Here" box.
Click on the Drop Down arrow inside the "Type Here" box to show the following options: MenuItem, ComboBox, Separator and TextBox, see below:

File Menu with Type Here options displayed at bottom of menu

Step 13

Click on the "Separator" option to place a Menu Separator in this menu, then click on it an move it so it goes above the "Exit" option in the file menu, do this by clicking on the separator (the horizontal line which has appeared) then whilst keeping clicked move it up, it should appear as below:

File Menu with Divider above Exit MenuItem

Step 14

With the "File" Menu still being displayed click on "New" then in the Properties box look for the "Shortcut Key" option and click on the Drop Down arrow where "None" appears. Check the "Ctrl" Checkbox in "Modifiers" and then in the "Key" dropdown list select "N", see below:

Step 15

Set the rest of the "File" MenuItem "Shortcut Key" Properties except the "Exit" Menu Item, "Open" should be set to "Ctrl" and "O", "Save" to "Ctrl" and "S", the File Menu should appear as below:

Step 16

Click on or select the "Edit" Menu and set the "Shortcut Keys" Properties, "Cut" should be set to "Ctrl" and "X", "Copy" to "Ctrl" and "C", "Paste" to "Ctrl" and "V", "Delete" should be just "Del" in the Keys drop-down list, "Select All" should be "Ctrl" and "A", "Time/Date" should be just "F5" from the Keys drop-down list. The Edit Menu should appear as below:

Step 17

Save the Project as you have now finished the application, then click on Start:

When you do the following will appear:

Step 18

Click on the File Menu and select Open...,this will show the Open File Dialog, then select a Text File on your Computer this should appear in the Textbox, see below:

Step 19

Click File then Exit or click on the Close button on the top right of the Text Editor to end the application.

This Text Editor has all the main Editing and Format features you would expect from a Plain Text Editor, plus has added some extra enhancements to existing features with the Shortcut Keys. Part Three will add one more feature to the Text Editor!