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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

RichTextEditor: Displaying word documents from disk

Thread ID:





128294 Jan 12,2017 05:11 PM UTC Jan 20,2017 10:17 AM UTC ASP.NET Core 5
Tags: General
Asked On January 12, 2017 05:11 PM UTC

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?



Karthikeyan Viswanathan [Syncfusion]
Replied On 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. 

Replied On 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?



Gopi Govindasamy [Syncfusion]
Replied On 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.  

Replied On 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?

Karthikeyan Viswanathan [Syncfusion]
Replied On 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.   


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon