Adding Images to TinyMCE Rich Text Editor using ASP.Net FileUpload Control

n my previous article I explained Using Tiny MCE Rich TextBox in ASP.Net

which simply describes how to add Tiny MCE Rich Text Editor in your ASP.Net Web form

Here I’ll be explaining how to add or upload images in your Tiny MCE RichTextBox along with other HTML Content.

I have already added a TinyMCE Editor to my page along with it I added the following controls

If you want to know more about how to add Tiny MCE RichTextBox to the ASP.Net Web Page you need to refer my previous article.

<div>

<asp:Panel ID = "pnlEditor" runat = "server" >

<asp:TextBox ID="RichTextBox" runat="server" TextMode = "MultiLine" >asp:TextBox><br />

<asp:FileUpload ID="FileUpload1" runat="server" />

<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />

asp:Panel>

<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />

<asp:Button ID="btnCancel" runat="server" Text="Cancel" Visible = "false" OnClick="btnCancel_Click" />

<asp:Label ID="lblDisplay" runat="server" Text="" Visible = "false" >asp:Label>

div>

form>

I have added a Panel with three controls a TextBox which will be out RichTextEditor, a FileUpload control to upload pictures, images or graphics and an upload button to upload the pictures

Next I have Save and Cancel Buttons along with a Label which will display the Rich Text Content whenever the Save Button is clicked.

Once the controls are added your web page will look as below

Adding TinyMCE RichTextBox to ASP.Net Web Page

As you can see above there’s a FileUpload Control and an Upload Button so in order to insert picture or image in the Tiny MCE Rich text Box you’ll need to do the following on the Upload Button Click event. To store the images I have created a folder called images in the website root directory.

protected void btnUpload_Click(object sender, EventArgs e)

{

if (FileUpload1.HasFile)

{

string FileName = System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName);

string FilePath = "images/" + FileName;

FileUpload1.SaveAs(Server.MapPath(FilePath));

RichTextBox.Text += string.Format(" '{1}' ", FilePath, FileName);

}

VB.Net

Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As EventArgs)

If FileUpload1.HasFile Then

Dim FileName As String = System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName)

Dim FilePath As String = "images/" & FileName

FileUpload1.SaveAs(Server.MapPath(FilePath))

RichTextBox.Text += String.Format(" '{1}' ", FilePath, FileName)

End If

End Sub

In the above code snippet I am simply saving the uploaded image file in the images folder and then creating an HTML image (IMG) tag and setting its SRC property to the path where the uploaded image or picture is saved. Finally I am appending the image tag to the RichTextBox Content.

Thus the TinyMCE Editor will now display the image or picture we uploaded along with the other HTML content. The figure below displays a Tiny MCE RichTextEditor with the uploaded Image embedded in it.

TinyMCE Editor displaying the uploaded image / picture in ASP.Net

Similarly you can display the HTML Content using a Label on a web page by placing the following code in the click event of the Save button

protected void btnSave_Click(object sender, EventArgs e)

{

lblDisplay.Visible = true;

pnlEditor.Visible = false;

lblDisplay.Text = RichTextBox.Text;

btnSave.Visible = false;

btnCancel.Visible = true;

}

VB.Net

Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As EventArgs)

lblDisplay.Visible = True

pnlEditor.Visible = False

lblDisplay.Text = RichTextBox.Text

btnSave.Visible = False

btnCancel.Visible = True

End Sub

As you will notice above I am simply assigning the contents of the Tiny MCE RichTextBox to an ASP.Net Label Control. The figure below displays the Label with the Rich Text Content

Label displaying Rich Text Content along with Image Picture in ASP.Net Webpage