How to resolve the textbox focus issue of find and replace dialog in RichTextEditor while using inside jQuery mobile Popup?
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> <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>Options to get the HTML elements with styles.</p></li><li><p>Support to insert image from a defined path.</p></li><li><p>Footer elements and styles(tag / Element information , Action button (Upload, Cancel))</p></li><li><p>Re-size the editor support. </p></li><li><p>Provide efficient public methods and client side events.</p></li><li><p>Keyboard navigation support.</p></li></ol> </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
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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!