Read only text editor with export tools

[Mihael]

Sample code:

@{

    List<String> toolsList = new List<string>() { "importExport" };

    List<String> ImportExport = new List<string>() { "wordExport", "pdfExport" };

}

@{Html.EJ().RTE("rteSample").Width("100%").ContentTemplate(@<div>

    <p><b>Description:</b></p>

    <p>

        The Rich Text Editor (RTE) control is an easy to render in

        client side. Customer easy to edit the contents and get the HTML content for

        the displayed content. A rich text editor control provides users with a toolbar

        that helps them to apply rich text formats to the text entered in the text

        area.

    </p>

    <p>

        <b>

            Functional

            Specifications/Requirements:

        </b>

    </p>

    <ol>

        <li>

            <p>

                Provide

                the tool bar support, it’s also customizable.

            </p>

        </li>               

        <li>

            <p>

                Provide

                efficient public methods and client side events.

            </p>

        </li>

        <li>

            <p>

                Keyboard

                navigation support.

            </p>

        </li>

    </ol>

</div>).MinWidth("200px").MinHeight("500px").AllowEditing(false).ToolsList(toolsList).Tools(tool => tool.ImportExport(ImportExport))     

      .ExportToWordSettings(exportToWordSettings => exportToWordSettings.Url("Home/ExportToWord").FileName("WordExport"))

      .ExportToPdfSettings(exportToPdfSettings => exportToPdfSettings.Url("Home/ExportToPDF").FileName("PdfExport")).Render();}

How can I achieve to be able to export to word and pdf with AllowEditing(false), so i want read only text editor without import.

It works without AllowEditing(false) but then rte is editable.

Thanks

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Mihael, 

Thanks for contacting Syncfusion support. 

  

We have validated your reported query on ejRTE. We have prepared an solution to achieve your requirement of having the text area of RTE as un editable. For your information, RTE’s content area is rendered with iframe element, by setting contentEditable attribute as false of the body element in the iframe, we can prevent editing in its container element. Please, refer the below code snippet to achieve you requirement. 

[index.cshtml] 

@{ 

    List<String> toolsList = new List<string>() { "importExport" }; 

    List<String> ImportExport = new List<string>() { "wordExport", "pdfExport" }; 

} 

@{ 

    Html.EJ().RTE("rteSample").Width("100%").ContentTemplate(@<div> 

    &lt;p&gt;The Rich Text Editor (RTE) control is an easy to render in 

    client side. Customer easy to edit the contents and get the HTML content for 

    the displayed content. A rich text editor control provides users with a toolbar 

    that helps them to apply rich text formats to the text entered in the text 

    area. &lt;/p&gt; 

</div>).MinWidth("200px").ToolsList(toolsList).Tools(tool => tool.ImportExport(ImportExport)) 

.ExportToWordSettings(exportToWordSettings => exportToWordSettings.Url("ExportToWord").FileName("WordExport")) 

.ExportToPdfSettings(exportToPdfSettings => exportToPdfSettings.Url("ExportToPDF").FileName("PdfExport")).Render(); 

} 

 

<script> 

    $(function () { 

        //setting the contentEditable as false to prevent editing in RTE text area by using RTE instance 

($($("#rteSample").ejRTE("instance").wrapper[0]).find("iframe"))[0].contentDocument.body.contentEditable = false; 

    }); 

</script> 

   

Content Editable: https://www.w3schools.com/tags/att_contenteditable.asp  

Please, let us know if you need any further assistance. 

Regards, 

Shameer Ali Baig S. 

[Mihael]

Thank you, works like a charm.

[Prince Oliver]

Hi Mihael, 

Most Welcome. We ae glad to help you. 

Regards, 

Prince