RichTextEditor: Displaying word documents from disk

[Don]

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]

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> 

Online demo link: http://aspnetcore.syncfusion.com/rte/importandexport  

Regards, 

Karthikeyan V. 

[Don]

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]

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.  

  

Sample Link:http://www.syncfusion.com/downloads/support/forum/128357/ze/RTEModeldialog1305169526.zip  

  

Please let us know if you need any other assistance.  

  

Regards,  

Gopi G.  

[Don]

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]

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. 

 

Sample Link:  http://www.syncfusion.com/downloads/support/forum/128294/RTE_UP~12071330806.ZIP  

   

Regards,    

Karthikeyan V.