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

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

Step by Step how to use the TinyMCE Rich Editor as template for the UIHint DataAnnotation Attribute

        By Carmel Shvartzman

In this tutorial we'll learn how to use the TinyMCE Rich Editor as a  template for the UIHintAttribute DataAnnotation
We'll use a FREE MCE Editor , adding it through NUGET Package Manager. The MCE will be stored as a Template at "~/Views/Shared/EditorTemplates", and we'll use DataAnnotations to display the Rich Editor in our MVC App.
According to the  MSDN  documentation , UIHint receives as an argument the template or user control that Dynamic Data will use to display the data field. While using the UIHint attribute on the Model, and the EditorFor or DisplayFor inside a view, the ASP.NET MVC engine will look for the specified template at the "~/Views/Shared/EditorTemplates" directory.
You can take a look at the MSDN  documentation and description of the UIHintAttribute . It was originally introduced for Dynamic Data , and later for ASP.NET MVC.
We'll design a web site using a free CSS Template, as explained in a former tutorial, and a JQuery UI Theme that we imported in this tutorial. They are short step by step begginer's guides, so if you like the look-and-feel of this web site, follow those 10 minutes tutorials to make this same site.We'll want to display our data using a TinyMCE, showing as follows:

In the field "Text" we will format the font, and also insert pictures. First thing, download the MCR Editor using NUGET making a search for "TinyMCE.MVC.JQuery" :

Also, update the JQuery and the JQueryUI scripts:

You'll notice that NUGET added files to the Scripts folder:

And also added a TEMPLATE to the "Shared" folder:

Open the TinyMCE Template and modify the WIDTH & HEIGHT:

Check for the JQuery scripts at _Layout, because TinyMCE needs the .js BEFORE loading the document:



This is the field we want to turn from Text to Rich Editor:

The name of the field is "Text" and the Entity is "Comment" :

Take a look at the Comment class:

We cannot modify the auto-generated template , so let's EXTEND the class with a METADATA partial class:

We need to make a Data Annotation to ONLY one field : "Text" . So use the UIHintAttribute and send the Template argument the name of the TinyMCE template file at the SHARED folder.
Build and run the App to see the Rich Editor:

You can insert a picture as well:

After saved, you'll see the field is not properly displayed :

We must modify the displaying of the field :

...using the Raw() method for displaying the HTML :

Now this is the display :

That's all!! 

In this tutorial we've learned how to use the TinyMCE Rich Editor as a  template for the UIHint DataAnnotation Attribute.  

Happy programming.....

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