In 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.


<form id="form1" runat="server">

    <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.

 

C#

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("<img src = '{0}' alt = '{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("<img src = '{0}' alt = '{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

 

    

C#

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



The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.



With this the article comes to an end. Hope you liked it. You can download the related sample source code in VB.Net and C# using the link below

TinyMCE_UploadImages.zip (624.50 kb)