Page 1 of 1

Rich Text Editor (Tabbed) Rate Topic: ***** 1 Votes

#1 DimitriV  Icon User is offline

  • vexing conundrum
  • member icon

Reputation: 587
  • View blog
  • Posts: 2,746
  • Joined: 24-July 11

Posted 15 September 2011 - 03:49 PM

Hey people!!
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
Attached File  empty window.bmp (1.24MB)
Number of downloads: 1802
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.
Attached File  openedfile.bmp (1.25MB)
Number of downloads: 1794

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


Is This A Good Question/Topic? 1
  • +

Replies To: Rich Text Editor (Tabbed)

#2 JMW.62  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 06-March 17

Posted 06 March 2017 - 12:56 PM

Hi DimitriV,

I'm getting some experience on Editors and going through several tutorials. I like your ideas in this tutorial! However, I've tried in vain to get the program to work?! After a lot of trying to work through the problems/errors, I'm handing back over to you because I just don't know how to solve the problems I'm having using this code? I share below what I've tried so far:

Changes made to code:

1. Missing objects and dialogs:

- OpenFileDialog.
- SaveFileDialog.
- Tab Control - I'm presuming that a tab control is added at runtime through code? But, the tab control was not accepted in the code (red underline) causing an error?! Added tab control to resolve error, but when program started a tab control was generated. So, removed it and tried altering code TabControl1 = TabControl wasn't accepted. So, tried using Quick Actions and used first option = Generate property which was accepted. Running program to see if it works? Nope, that produced a NullReferenceException as follows:

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
'Handles Form Load Event.
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)

End Sub

2. Main problem in code is Open button:

- [LoadFileDialog = OpenFileDialog] so changed this and it was accepted.

- [If CType(TabControl1.SelectedTab.Controls.Item(0), RichTextBox).Modified = True Then]
According to VS, This statement requires an End If so changed end statement to End If, End If, End Sub, which resolves this problem.

- Starting at the Open button code: [Windows.forms] = 'forms' is not a member of 'Windows' (9x)?

Tried quick actions and refactorings, but this option is not available?! So, stuck on this one? What to do? Noticed capitalization and wondered if changing forms to Forms would help. Changed one occurence so [Windows.forms = Windows.Forms] and this brought up Quick Actions. Followed first action - add to forms in separate file. This caused 'Windows.Forms.dialogresult' to be underlined so repeated the same fix on this. This action was accepted. Running program to check if it works? I guess it didn't like the fixes! Program opened, but when I tried changing font size and exception was generated as follows:

Namespace Windows
Friend Class Forms
Friend Shared Function dialogresult() As Object
Throw New NotImplementedException()
End Function
End Class
End Namespace

3. Cut, Copy, Paste code absent so added:

Private Sub ToolStripButton4_Click(sender As Object, e As EventArgs) Handles ToolStripButton4.Click

CType(TabControl1.SelectedTab.controls.item(0), RichTextBox).Cut()

End Sub

Private Sub ToolStripButton5_Click(sender As Object, e As EventArgs) Handles ToolStripButton5.Click

CType(TabControl1.SelectedTab.controls.item(0), RichTextBox).Copy()

End Sub

Private Sub ToolStripButton6_Click(sender As Object, e As EventArgs) Handles ToolStripButton6.Click

CType(TabControl1.SelectedTab.controls.item(0), RichTextBox).Paste()

End Sub

I really would like to learn more, but I'm afraid I've spent a long time on this and couldn't resolve things for it to work. Let me know if you resolve it so maybe I can learn what the problems are! Thank you for sharing this tutorial!

This post has been edited by andrewsw: 06 March 2017 - 03:11 PM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Build your own boat!
  • member icon

Reputation: 6204
  • View blog
  • Posts: 24,735
  • Joined: 12-December 12

Posted 06 March 2017 - 03:12 PM

There is no need to quote the entire tutorial, use the Reply button.

Also wrap your code in code tags.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1