We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

RichTextEditor: Displaying word documents from disk

Hi Guys,

When the user clicks on a document icon, Id like to display the document in a modal popup.

Is it possible to retrieve word doc \ docx files and display them in the RichTextEditor ( or another control)?

If so, can you suggest any sample \ demo code?



5 Replies

KV Karthikeyan Viswanathan Syncfusion Team January 13, 2017 05:36 AM UTC

HI Donald Callander, 

Thanks for contacting Syncfusion support. 

Yes, You can achieve your scenario by set import settings into RichTextEditor. Please find to the below code snippet: 


           @{ List<String> toolsList = new List<string>() { "importExport" }; 
               List<String> importExport = new List<string>() { "import", "wordExport", "pdfExport" }; 
            <ej-rte id="rteExport" tools-list="toolsList"  width="100%"  is-responsive="true" min-width="20px"> 
                <e-tools import-export="importExport"  > 
               <e-import-settings url="//Internaldemo.syncfusion.com:800/RTE_Export_and_Import_API/RTEimportexport/RTEimportexport/api/RTE/Import" /> 
               <e-export-to-word-settings url="//Internaldemo.syncfusion.com:800/RTE_Export_and_Import_API/RTEimportexport/RTEimportexport/api/RTE/ExportToWord" fileName="WordExport" /> 
               <e-export-to-pdf-settings url="//Internaldemo.syncfusion.com:800/RTE_Export_and_Import_API/RTEimportexport/RTEimportexport/api/RTE/ExportToPDF" fileName="PdfExport" /> 


Karthikeyan V. 

DO Don January 14, 2017 12:52 AM UTC

Hi Karthikeyan,

Thank you for taking the time to reply.

From the look of the code, it appears that the user will be able to select a document to load.
Id like to popup the modal with the document showing.

Below is the code I use to display the modal dialog.

  <div class="modal fade" tabindex="-1" id="vModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Display Document</h4>
        <div class="modal-body">

              List<String> toolsList = new List<string>() { "style", "lists", "doAction", "links", "images" };
              List<String> style = new List<string>() { "bold", "italic", "underline", "strikethrough" };
              List<String> lists = new List<string>() { "unorderedList", "orderedList" };
              List<String> doAction = new List<string>() { "undo", "redo" };
              List<String> links = new List<string>() { "createLink", "removeLink" };
              List<String> images = new List<string>() { "image" };
                   .ToolsList(toolsList).Tools(tool => tool.Styles(style).Lists(lists)
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

I use the following code to call the modal dialog.
                <a type="submit" class="btn btn-default" data-toggle="modal" rel='nofollow' href="#vModal"><i class="fa fa-file-word-o"></i></a>

How would I pass a filepath to be opened in the modal  dialog when it opens?



GG Gopi Govindasamy Syncfusion Team January 17, 2017 12:15 PM UTC

Hi Donald Callander,   
We checked your scenario for modal dialog with RTE control. The modal dialog opens using modal dialog Id. In the sample RTE textarea content is editable. We have changed the sample and modal dialog with RTE control is rendered. We have attached sample below link.  
Please let us know if you need any other assistance.  
Gopi G.  

DO Don January 17, 2017 02:39 PM UTC

Hi Gopi,

Thanks for trying.
From the look of that example, it appears that's a copy and paste of the RTE editor example which simply displays hardcoded text.

I need to display a document from disk in the RTE.

How do I load a document into the RTE from disk and display it for the user to view?

KV Karthikeyan Viswanathan Syncfusion Team January 20, 2017 10:17 AM UTC

Hi Donald Callander,    
As per your query, We have prepared a custom sample for “To display a document from disk in the RTE within model dialog”. We have use uploadbox button for file selection and read the selected files and get the response text into uploadbox success event. Please refer to the below code snippet:  
    $(function () { 
            multipleFilesSelection: false, autoUpload: true, extensionsAllow: ".docx,.doc", showBrowseButton: false, buttonText: { browse: "rteSample" }, showFileDetails: false, saveUrl: "import?rteid=rteSample", 
            success: function (args) { 
                var diaobj = $("#Dialog1").data("ejDialog"); 
                var rteID = args.model.buttonText.browse, rteObj = $("#rteSample").data("ejRTE"), htmlText = args.responseText, iframe = $(rteObj._getDocument().body); 
                htmlText = htmlText.replace('<string xmlns="http://schemas.microsoft.com/2003/10/Serialization/">', '').replace('</string>', '').replace(/"/gi, ''); 
 You can get the selected files by using uploadbox ID. Refer the below highlighted code snippet: 
        public string Import() 
            string HtmlString = string.Empty; 
            if (HttpContext.Request.Files.AllKeys.Any()) 
                var httpPostedFile = HttpContext.Request.Files["upload"]; 
                if (httpPostedFile != null) 
                    using (var mStream = new MemoryStream()) 
                        new WordDocument(httpPostedFile.InputStream).Save(mStream, FormatType.Html); 
                        mStream.Position = 0; 
                        HtmlString = new StreamReader(mStream).ReadToEnd(); 
                    HtmlString = ExtractBodyContent(HtmlString); 
                    foreach (var item in DecodeKeys()) 
                        HtmlString = HtmlString.Replace(item.Key, item.Value); 
                else HttpContext.Response.Write("Select any file to upload."); 
            return HtmlString; 
If You don’t want to display a uploadbox button  , You will manually trigger the uploadbox click event and achieve the above functionality. 
Karthikeyan V.   

Live Chat Icon For mobile
Up arrow icon