Monday, June 16, 2014

Step by step how to convert text into PDF online using the TinyMCE Rich Editor in an Asp.Net MVC application

       By Carmel Shvartzman

In this tutorial we'll learn how to convert text into PDF online using the TinyMCE Rich Editor in an Asp.Net MVC application, and download the PDF file to the user's machine
For this tutorial, we'll  need an open source application named ITextSharp, a FREE download from SOURCEFORGE, and also another free plugin named TinyMCE Editor, which can be installed in your application using the NuGet Package Manager.
Then, we'll create an empty MVC application, and we will use ITextSharp and TinyMCE to create our PDF file and download it , showing as follows:


We'll need  ITextSharp and TinyMCE. So install the TinyMCE using NuGet :


Then download ITextSharp from SourceFORGE :


Take a look at the files added by NuGet to your application:


Add the "usings" to the Controller :



Then, create an Action to handle HTTP POST requests, and return the PDF file over the response :

This is the code you need to create the simple PDF file :


[HttpPost, ValidateInput(false)]
        public void CreatePdf(string text)
        {
            Document file = new Document();
            FileStream stream = new FileStream(Server.MapPath("~/Images/") + "NewFile.pdf", FileMode.Create);
            try
            {
                PdfWriter.GetInstance(file, stream);
                file.Open();
                List<iTextSharp.text.IElement> parsedList = null;
                parsedList = HTMLWorker.ParseToList(new StringReader(text), null);
                for (int index = 0; index < parsedList.Count; index++)
                {
                    file.Add((IElement)parsedList[index]);
                }

                file.Close();
                stream.Close();
                Response.Redirect("~/Images/NewFile.pdf");
            }
            catch
            {
                stream.Close();
            }
        }


Take care to CLOSE the stream before you leave the Action method.
Now that we're done with the PDF, we need to prepare the TinyMCE at client side. Browse to the official open source site of TinyMCE  : 



There, notice that the plugin ONLY USES THE "jquery.tinymce.js" javascript file , and initializes the object  as follows :

 


Therefore, open the HTML View where you want to add the Editor , and COPY-PASTE from the former example the <textarea> we need, and a reference to that script file :
Create a script file to hold the Editor instantiation , as follows (COPY-PASTE from the site, but BE CAREFUL to update the script file URL) :


That's all!!!!!!!  (You expecting more ? ) Build the application and open the web page:


...And you get the PDF file to download :






That's all!! 
In this tutorial we've learn how  to convert text into PDF online using the TinyMCE Rich Editor in an Asp.Net MVC application, and download the PDF file to the user's machine. 

Happy programming.....


כתב: כרמל שוורצמן