Articles in this section
Category / Section

How to resolve the textbox focus issue of find and replace dialog in RichTextEditor while using inside jQuery mobile Popup?

4 mins read

Description:

To resolve the textbox focus issue of find and replace dialog in JavaScript RichTextEditor while using inside jQuery mobile Popup.

Solution:

While placing RichTextEditor inside jQuery mobile Popup and jQuery mobile Dialog, find and replace textbox cannot be focused because the element is outside the container. To focus the find and replace textbox, override the _renderFindDialog method in RichTextEditor source by changing the containment property of Dialog as RichTextEditor wrapper with its ID instead of body. Refer to the following code.

 

<div data-role="main" class="ui-content">
        <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-container="#mypopup">Show Popup</a>
        @{List<String> toolsList = new List<string>() { "edit" };
            List<String> edit = new List<String>() { "findAndReplace" };
        }
        <div data-role="popup" id="myPopup" style="height:800px;">
 
            @{Html.EJ().RTE("rteSample").ShowHtmlSource(true).Width("100%").ContentTemplate(@<div>
        <p><b>Description:</b></p>
        &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;
        &lt;p&gt;&lt;b&gt;Functional
        Specifications/Requirements:&lt;/b&gt;&lt;/p&gt;
        &lt;ol&gt;&lt;li&gt;&lt;p&gt;Provide
        the tool bar support, it’s also customizable.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Options
        to get the HTML elements with styles.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Support
        to insert image from a defined path.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Footer
        elements and styles(tag / Element information , Action button (Upload, Cancel))&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Re-size
        the editor support. &lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Provide
        efficient public methods and client side events.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Keyboard
        navigation support.&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;
    </div>).ShowFooter(true).MinWidth("200px").Width("500px").ToolsList(toolsList).Tools(tool => tool.Edit(edit)).Render();}
        </div>
    </div>
</div>
 
<script>
            ej.RTE.prototype._renderFindandReplaceDialog = ej.RTE.prototype._renderFindDialog;
 
            ej.RTE.prototype._renderFindDialog = function (target) {
                this._renderFindandReplaceDialog(target);
                this._findDialog.setModel({ 'containment': '#rteSample_wrapper' });
            }
 
</script>

 

Sample:  RTEfindandreplace-382708000

 

Find and ReplaceFind and Replace


Conclusion

I hope you enjoyed learning about how top resolve the textbox focus issue of find and replace dialog in RichTextEditor while using inside jQuery mobile popup.

You can refer to our JavaScript Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Rich Text Editor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied