Rich Text Editor not displaying correct height on start

[Santiago]

Hello friends!

I have an error when displaying a Rich Text Editor for the first time.

When I click the "resize" button at the bottom right it solves.

But I would like that from the beginning I do not have to click on the button to solve the problem

My code in view:

----------------------------------

<ejs-richtexteditor ejs-for="@Model.Wall" placeholder="Personaliza tu presentación..." 

                                                id="textarea_profile_wall" name="textarea" height="400"

                                                showCharCount="true" enableResize="true"

                                                imageUploadSuccess="onImageUploadSuccess">

                              

                                <e-richtexteditor-toolbarsettings Items="@(new object[] {"Bold", "Italic", "SubScript", "SuperScript",

                                                                                    "LowerCase", "UpperCase", "|",

                                                                                    "Formats", "Alignments", "OrderedList", "UnorderedList",

                                                                                    "Outdent", "Indent", "|", "CreateTable",

                                                                                    "CreateLink", "Image", "|", "ClearFormat",

                                                                                    "SourceCode",  "|", "Undo", "Redo"})"

                                                                  EnableFloating="true" type="MultiRow" />

                                <e-richtexteditor-quicktoolbarsettings showOnRightClick="false" Image="@(new object[] {"Replace", "Align", "Caption", "Remove",

                                                                    "InsertLink", "OpenImageLink", "-", "EditImageLink",

                                                                    "RemoveImageLink", "Display", "AltText", "Dimension"})"

                                                                       Link="@(new object[] { "Open", "Edit", "UnLink" })" />

                                <e-richtexteditor-insertimagesettings allowedTypes="@(new string[] { ".png", ".jpg", ".jpeg" })" Display="inline"

                                                                      saveUrl="/Account/SaveImage" path="/Uploads/" Resize="true"

                                                                      ResizeByPercent="true" MaxWidth="500px" MaxHeight="500px" />

                                <e-content-template>

                                </e-content-template>

                            </ejs-richtexteditor>

----------------------------------

Attached images of the error

Attachment: imagesError_71c5eb3e.rar

[Indrajith Srinivasan]

Hi Santiago, 

 

Greetings from Syncfusion support, 

 

We have checked the shared attachments. The reported issue occurs, if the Rich Text Editor height is not calculated properly. Can you please share us few more details regarding the reported query ? 

 

• Is the Rich Text Editor placed inside any other components ?
• Can you please share us the code blocks, of Rich Text Editor rendered in the page ?

 

The above details will be helpful for us to further validate on the reported issue and provide solution at earliest. 

 

Regards, 

Indrajith 

[Santiago]

Hi Indrajith,

 

Thank you very much for the support that we provide users exelentes controls.

You have given me the clue I needed to detect the problem.

The problem was that the container of the Rich text editor was started with hidden tag.

I fixed it loading the whole view first and then run a Javascript function to automatically hide it.

Thank you very much!

[Santiago]

The drawback is that it does not load if we put it for example in a Bootstrap Modal

[Revanth Krishnan]

Hi Santiago, 

 

 

Good day to you. 

 

 

We have validated your query “The Rich Text Editor does not load properly if we put it for example in a Bootstrap Modal”. 

 

 

This can be resolved be calling the `refreshUI` method. The refreshUI method need to be called when opening the Bootstrap model, 

 

Code Snippet: 

<ejs-richtexteditor id="rteID" created="onCreate">
</ejs-richtexteditor> 

 

function onCreate() { 

        defaultRTE = this;
} 

 

//Call the below method when opening the Bootstrap model 

defaultRTE. refreshUI(); 

 

Please check the above code snippet and let us know if it resolves your issue. 

 

Regards, 

Revanth 

[Santiago]

Hello =)

It is effectively solved with the actions you teach.

Check out the Bootstrap Modal documentation and the perfect place to run the "defaultRTE. refreshUI();" method is "shown.bs.modal" event.

I share the code that I use in the view:

<ejs-richtexteditor id="rteID" created="onCreate">
</ejs-richtexteditor> 

<script>
    var defaultRTE;

    function onCreate() {
        defaultRTE = this;
    }

    $('#modalAddService').on('shown.bs.modal', function (e) {
        defaultRTE.refreshUI();
    });
</script>

On the other hand, the actions of <e-richtexteditor-quicktoolbarsettings> (Replace, Align, Caption, Remove, etc) are not seen since they are in a layer below the modal.

Thank you very much for the help Revanth Krishnan

[Santiago]

The problem with image editing is that the container div is created in a css z-index style lower than necessary for it to be viewed in a Bootstrap modal.

Can you get the call to the method that opens the tool to change the style once it is loaded?

I attach some images to explain the error

Thanks!

Attachment: err_1caa1216.rar

[Indrajith Srinivasan]

Hi Santiago, 

 

Good day to you, 

 

We have validated your reported query and able to reproduce the reported issue from our end. As you said, the bootstrap dialog has higher zIndex than the quickToolbar popup hence the reported issue occurs. You can resolve the reported issue, by manually assigning the zIndex for the Image popup using CSS. We have also prepared a sample that tries to meet your requirements. 

 

CSS style: 

 

 

<style> 

    .e-rte-image-popup.e-rte-quick-popup { 

        z-index: 20001 !important; 

    } 

</style> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/160278/ze/RTE_with_bootstrapmodal2083991907  

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Santiago]

Hello Indrajith

The bug with bootstrap modals is fixed.

Many thanks to you and the Syncfusion team for good support.

[Indrajith Srinivasan]

Hi Santiago, 

 

Welcome, 

 

We are glad that your reported issues are resolved. Please get back to us, if you need any further assistance. 

 

Regards, 

Indrajith