In this tutorial, I'd like to show you all how to make a Tabbed Rich Text Editor. It isn't really that complicated but it's just that there is so much of it.
This project can be used for typing up Rich Text Formatted documents with the simplicity of notepad but with the formatting capabilities of
WordPad and stylish interface without launching bloatware programs such as Microsoft Word.
In this tutorial, I'll cover:
•opening and saving
•undo and redo
•simple formatting
•cut copy and paste
•the TabControl
•the RichTextBox
I know it may be a bit much so I'll take it slowly.
Create a new Windows Forms Application and name it TabbedRTB.
The designer is where we will first work.
Add a ToolStrip to your form and a RichTextBox.
Dock the ToolStrip to top and the RichTextBox to Fill. Add these controls to the ToolStrip (in this order):
Button - text to New, Button - text to Open, Button - text to Save, Separator, Button - text to Cut, Button - text to Copy, Button - text to Paste, Separator, Button - text to Undo, Button - text to Redo, Separator, Button - text to Font, Button - text to Colour, Button - text to Highlight, Separator, Button- Tex to Insert Image, Button - text to Close document.
Also add a ColourDialog and a FontDialog.
Here is what it should look like
empty window.bmp (1.24MB)
Number of downloads: 758
Now we can move on to the code.
First things first, we need to handle the Load Event. Double-Click your form and type:
dim richtext as new RichTextBox Dim edittab as new tabpage Edittab.Controls.Add(richtext) Richtext.dock = dockstyle.fill TabControl1.tabpages.add(edittab) TabControl1.SelectTab(edittab)
Now we'll work through the ToolStrip buttons one by one.
For your New button, Double-Click it and type:
Dim richtext as new RichTextBox Dim edittav as new tabpage edittab.controls.add(richtext) Richtext.dock = dockstyle.fill TabControl1.tabpages.add(edittab) TabControl1.SelectTab(edittab)
For your open button:
If CType(TabControl1.SelectedTab.Controls.Item(0), RichTextBox).modified =true then
Dim ask as string
Ask = msgbox("You have not saved your document. Do you wish to Save?", msgboxstyle.YesNo)
If ask = vbYes then
savefiledialog1.showdialog()
If savefiledialog1.showdialog = windows.forms.dialogresult.OK then
CType(TabControl1.SelectedTab.Controls.Item(0), RichTextBox).savefile(savefiledialog1.filename, richtextboxstreamtype.richtext)
End If
LoadFileDialog1.ShowDialog()
If LoadFiledialog1.showdialog = windows.forms.dialogresult.OK then
CType(TabControl1.SelectedTab.controls.item(0), RichTextBox).LoadFile(LoadFiledialog1.filename, richtextboxstreamtype.richtext)
TabControl1.SelectedTab.text=LoadFileDialog1.filename
End If
Else
LoadFileDialog1.showdialog()
If LoadFileDialog1.showdialog = windows.forms.dialogresult.OK then
CType(TabControl1.SelectedTab.controls.item(0), RichTextBox).LoadFile(LoadFileDialog1.fileName, richtextboxstreamtype.richtext)
TabControl1.SelectedTab.text = LoadFileDialog1.filename
End If
End If
Else
LoadFileDialog1.showdialog()
If LoadFileDialog1.showdialog = windows.forms.dialogresult.OK then
CType(TabControl1.SelectedTab.controls.item(0), RichTextBox).LoadFile(LoadFileDialog1.fileName, richtextboxstreamtype.richtext)
TabControl1.SelectedTab.text = LoadFileDialog1.filename
End If
Wow! That last bit was quite long! Don't worry none of it is quite as big as that one.
Save Button:
SaveFileDialog1.showdialog() If SaveFileDialog1.showdialog = windows.forms.dialogresult.OK then CType(TabControl1.SelectedTab.Controls.item(0), RichTextBox).SaveFile(SaveFileDialog1.filename, richtextboxstreamtype.richtext) TabControl1.SelectedTab.text=SaveFileDialog1.filename End If
Undo Button:
CType(TabControl1.SelectedTab.controls.item(0), richtextbox).undo()
The code for undo and redo are really quite simple as the RichTextBox control has a built-in undo and redo method.
Redo:
CType(TabControl1.SelectedTab.controls.item(0), richtextbox).redo
Now were onto the formatting! It is really simple as I will demonstrate in the code below.
Font Button:
If FontDialog1.showdialog = windows.forms.dialogresult.OK then Ctype(TabControl1.SelectedTab.controls.item(0), RichTextBox).selectionfont = FontDialog1.Font End if
This basically tells it to launch the FontDialog and wait for a result. If the result us OK then it sets the richtextbox's selectedsuchandsuch to that value. This is how the font, colour and highlight work.
Colour:
If ColorDialog1.showdialog = windows.forms.dialogresult.OK then Ctype(TabControl1.SelectedTab.controls.item(0), RichTextBox).selectioncolor = ColourDialog1.color End if
Highlight:
If ColourDialog1.showdialog = windows.forms.dialogresult.OK then Ctype(TabControl1.SelectedTab.controls.item(0), RichTextBox).selectionbackcolor= colordialog1.color end if
Here we will add the code to open an image and add it to the RichTextBox that's selected.
Its quite simple.
Double-Click add Image and type:
dim imageopen as new OpenFileDialog With imageopen .filter="JPG Images (*.jpg)|*.jpg|BMP Images (*.bmp)|*.bmp" End With ImageOpen.ShowDialog() If imageopen.showdialog=windows.forms.dialogresult.OK then Clipboard.SetImage(New Bitmap(OpenFileDialog1.FileName)) CType(TabControl1.SelectedTab.Controls.Item(0), RichTextBox).Paste() End If
And finally for the close document:
TabControl1.tabpages.remove(TabControl1.SelectedTab)
Here is a picture of it functioning, with an empty tab and an opened tab with a rich text document loaded.
openedfile.bmp (1.25MB)
Number of downloads: 670
Now this is a lot to digest ( at least it looks like it ) and you should now have yourself a decent, if not very basic tabbed rich text editor. Enjoy!!!
Extras you could add:
• word count
• ask before document discard
• printing
• easy URL inputbox
And heaps more.
This post has been edited by JackOfAllTrades: 28 September 2012 - 03:39 AM





MultiQuote


|