RTE toolbox not works

[Pio Luca Valvona]

I used a RTE in a bootstrap dialog

<ej:rteid="rteDescrizioneNews"width="100%"isresponsive="true"runat="server"toolslist="font,alignment,style,lists,doAction,clipboard">
<ToolsFont="fontName,fontSize,fontColor"
Alignment="justifyLeft,justifyCenter,justifyRight,justifyFull"
Styles="bold,italic,underline,strikethrough"
Lists="unorderedList,orderedList"
DoAction="undo,redo"
Clipboard="cut,copy,paste">
Tools>
ej:rte>

and, as indicated in the documentation, I initialized it:

varrteItaObj=$("#<%=rteDescrizioneNews.ClientID%>").data("ejRTE");
rteItaObj.refresh();

to enable writing, but I can not use the commands of the Toolbox because they have no effect on the inserted text.

[Keerthana Rajendran]

Hi Pio Luca, 

 

Thank you for contacting Syncfusion support. 

 

We have checked the issue by rendering RTE control inside bootstrap dialog based on your update and toolbar commands are executed successfully. Please check the below given sample. 

 

http://www.syncfusion.com/downloads/support/forum/134739/ze/RTE_inside_modal-1142375493 

 

If the issue persists, please provide us details on whether you are using bootstrap dialog or ejDialog. If possible, modify the above sample to reproduce the issue in our end so that we can proceed further. 

 

Regards, 

Keerthana. 

[Pio Luca Valvona]

Hi Keerthana,

thank you for the support.

Unfortunately I forgot to specify that the dialog is located in an ascx.

I update the code so it will be easier to understand the problem.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GestioneNews.ascx.cs" Inherits="PLVSite.Web20.UserControls.GestioneNews" %>

<script type="text/javascript">
    Sys.Application.add_load(pageLoad);
    function pageLoad(sender, args) {
        if ($('[id$=hdf_ShowGestioneNews]').val() == "true")
            $('#gestioneNewsModal').appendTo("form").modal({
                backdrop: 'static',
                keyboard: false,
                show: true
            });
        var rteItaObj = $("#<%=rteDescrizioneNews.ClientID%>").data("ejRTE");
        rteItaObj.refresh();
        var rteEngObj = $("#<%=rteDescrizioneNewsIng.ClientID%>").data("ejRTE");
        rteEngObj.refresh();

    }
    $.validator.setDefaults({
        //to validate all fields(hidden also) 
        ignore: [],
        //if we don’t set custom class, default “error” class will be added 
        errorClass: 'e-validation-error',
        //it specifies the error message display position 
        errorPlacement: function (error, element) {
            if (element.attr("id") == "<%=rteDescrizioneNews.ClientID%>" || element.attr("id") == "<%=rteDescrizioneNewsIng.ClientID%>") {
                error.insertAfter(element.closest(".e-widget"));
            }
            else {
                error.insertAfter(element);
            }
        }
    });

    $(window).on('load', function () {
        var lang;
        var co = Cookies.get("Site_Language");
        if (co != null)
        {
            lang = co.substring(0, 2);
        }
        else
        {
            lang = "<%= Request.UserLanguages[0].Substring(0,2) %>";
        }
       
        if (lang != null && lang != "en") {
            $.getScript("/Scripts/localization/messages_" + lang + ".js");
        }
    });

</script>
<asp:HiddenField runat="server" ID="hdf_ShowGestioneNews" />
<!-- Modal -->
<div class="modal" id="gestioneNewsModal" tabindex="-1" role="dialog" aria-labelledby="gestioneNewsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header ">
                <h4 class="modal-title" id="gestioneNewsModalLabel"><span class="text-primary">
                    <asp:Literal ID="ltlTitolo" runat="server"></asp:Literal></span></h4>
            </div>
            <div class="modal-body ">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>
                                <asp:Literal ID="ltlTitoloNews" runat="server" Text="<%$ Resources:News,TitoloNews %>"></asp:Literal></label>
                            <input id="txtTitoloNews" type="text" runat="server" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>
                                <asp:Literal ID="ltlDescrizioneNews" runat="server" Text="<%$ Resources:News,DescrizioneNews %>"></asp:Literal></label>
                            <ej:rte id="rteDescrizioneNews" width="100%" isresponsive="true" runat="server" toolslist="font,alignment,style,lists,doAction,clipboard">
                            <Tools  Font="fontName,fontSize,fontColor"
                                    Alignment="justifyLeft,justifyCenter,justifyRight,justifyFull"
                                    Styles="bold,italic,underline,strikethrough"
                                    Lists="unorderedList,orderedList"
                                    DoAction="undo,redo"
                                    Clipboard="cut,copy,paste">             
                                </Tools>
                        </ej:rte>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>
                                <asp:Literal ID="ltlTitoloNewsIng" runat="server" Text="<%$ Resources:News,TitoloNewsIng %>"></asp:Literal></label>
                            <input id="txtTitoloNewsIng" type="text" runat="server" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>
                                <asp:Literal ID="ltlDescrizioneNewsIng" runat="server" Text="<%$ Resources:News,DescrizioneNewsIng %>"></asp:Literal></label>
                            <ej:rte id="rteDescrizioneNewsIng" width="100%" isresponsive="true" runat="server" toolslist="font,alignment,style,lists,doAction,clipboard">
                                <Tools  Font="fontName,fontSize,fontColor"
                                    Alignment="justifyLeft,justifyCenter,justifyRight,justifyFull"
                                    Styles="bold,italic,underline,strikethrough"
                                    Lists="unorderedList,orderedList"
                                    DoAction="undo,redo"
                                    Clipboard="cut,copy,paste">             
                                </Tools>                            
                        </ej:rte>

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>
                                <asp:Literal ID="ltlLink" runat="server" Text="<%$ Resources:News,Link %>"></asp:Literal></label>
                            <input id="txtLink" type="text" runat="server" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <asp:Button ID="btnInvia" runat="server" Text="<%$ Resources:Application,btnInvia %>" CssClass="btn btn-primary" OnClick="btnInvia_Click" />
                <asp:Button ID="btnCancella" runat="server" Text="<%$ Resources:Application,btnCancella %>" CssClass="btn btn-default" OnClick="btnCancella_Click" UseSubmitBehavior="false" />
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

[Keerthana Rajendran]

Hi Pio Luca, 

 

Thanks for sharing the code. 

 

We were able to reproduce the issue in our end while rendering RTE inside dialog from user control page. This issue occurs because RTE is not reinitialized correctly during load. Hence, we suggest you to destroy the control and reinitialize the rte model as shown below 

 

  Sys.Application.add_load(pageLoad); 

    function pageLoad(sender, args) { 

        //if ($('[id$=hdf_ShowGestioneNews]').val() == "true") 

            $('#gestioneNewsModal').appendTo("form").modal({ 

                backdrop: 'static', 

                keyboard: false, 

                show: true 

            }); 

            var rteItaObj = $("#<%=rteDescrizioneNews.ClientID%>").data("ejRTE"); 

        $("#<%=rteDescrizioneNews.ClientID%>").ejRTE("destroy").ejRTE(rteItaObj.model); 

        var rteEngObj = $("#<%=rteDescrizioneNewsIng.ClientID%>").data("ejRTE"); 

        $("#<%=rteDescrizioneNewsIng.ClientID%>").ejRTE("destroy").ejRTE(rteEngObj.model); 

    } 

 

We have modified our previous sample based on this which can be downloaded from the below link: 

 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE150750114 

 

Regards, 

Keerthana. 

[Pio Luca Valvona]

Hi Keerthana,

thank oyu for the support.

The example that you sent me works partially, because the system returns the following error: "Potentially dangerous value Request. Form detected by client (CphMain_ucGestioneNews_rteDescrizioneNews_formatDDL =" <p> ")." I do not want to disable validation from the Web. config for obvious security reasons.

Regards

Luca

[Keerthana Rajendran]

Hi Pio Luca,  

 

This issue occurs due to the detection of HTML elements(<>) in ASP.NET and this has been added for security reasons. 

 

Please refer the below given forums for further details. 

 

https://stackoverflow.com/questions/81991/a-potentially-dangerous-request-form-value-was-detected-from-the-client 

 

https://www.aspsnippets.com/Articles/ASPNet-Error-A-potentially-dangerous-RequestForm-value-was-detected-from-the-client.aspx 

 

https://www.codeproject.com/Tips/297679/A-potentially-dangerous-Request-Form-value-was-det 

 

https://forums.asp.net/t/1235144.aspx?A+potentially+dangerous+Request+Form+value+was+detected+from+the+client 

 

If you doesn’t want to set validation as false in web.config  for all the pages in the project, we suggest you to add requestValidationMode 2.0 to httpRuntime in web config and set ValidateRequest to false only on page from where you send HTML content from RTE. 

 

<httpRuntime requestValidationMode="2.0" /> 

 

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RTE.aspx.cs" Inherits="SyncfusionASPNETApplication1.RTE" ValidateRequest="false" %> 

 

 

We have modified previous sample based on this which can be downloaded from: 

 

http://www.syncfusion.com/downloads/support/forum/134739/ze/Sample-168033436 

 

Regards, 

Keerthana. 

 

[Pio Luca Valvona]

Hi Keerthana,

thank you for support.

Now it works, but even if I set the width to 100%, RTE is out of the div. 

Before it was displayed well.

Regards,

Luca

Attachment: ScreenShot_c72aa67f.zip

[Prince Oliver]

Hi Pio, 

Thank you for your update. 

We have checked the issue you reported. Make sure that you have set the width as “100%” with “!important” attribute to override the default width set for the control, if you have set in the page using CSS styles.  

<style> 

   .e-rte{ 

        width:100% !important; 

    } 

</style> 

Please find the sample from the following location: http://www.syncfusion.com/downloads/support/forum/134739/ze/Sample-1680334361269764220 

Regards, 

Prince