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.
Unfortunately, activation email could not send to your email. Please try again.

RichTextEditor: Displaying word documents from disk

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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?



Thanks, 

Don

Karthikeyan Viswanathan [Syncfusion]
Replied On January 13, 2017 12:36 AM

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: 

<code> 

           @{ 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-tools> 
               <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" /> 
            </ej-rte> 



</code> 




Regards, 
Karthikeyan V. 


Don
Replied On January 13, 2017 07:52 PM

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>
        <div class="modal-body">
          <form>

            @{
              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" };
            }
            @{Html.EJ().RTE("rteSample").Width("100%").Height("100%").EnableResize(true)
                   .IsResponsive(true).AllowEditing(false)
                   .ToolsList(toolsList).Tools(tool => tool.Styles(style).Lists(lists)
                   .DoAction(doAction).Links(links).Images(images)).Render();}
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>


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

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

Thanks,

Don













Gopi Govindasamy [Syncfusion]
Replied On January 17, 2017 07:15 AM

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.  
  
Regards,  
Gopi G.  


Don
Replied On January 17, 2017 09:39 AM

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 05:17 AM

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:  
 
<code> 
 
<script> 
    $(function () { 
        $("#upload").ejUploadbox({ 
            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"); 
                diaobj.open(); 
                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, ''); 
                iframe.children().remove(); 
                iframe.append($.parseHTML(htmlText)); 
            } 
        }); 
    }); 
 
     
 
 
</script> 
 
</code> 
 You can get the selected files by using uploadbox ID. Refer the below highlighted code snippet: 
 
<code> 
[HttpPost] 
        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; 
        } 
</code> 
 
If You don’t want to display a uploadbox button  , You will manually trigger the uploadbox click event and achieve the above functionality. 
 
   
Regards,    
Karthikeyan V.   


CONFIRMATION

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.

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.

;