Write at cursor position

[Maik Betzel]

Hello Syncfusion Team. I created an custom icon for your RTE  to insert an E-Mail MailTo. But it always inserts at the start of the RTEfield and not at cursor position. Everything i tried seems not to work. 

defaultRTE.focusIn(); seems not to wotk either.

This is my Insertfunction

Thank you. 

[Vinitha Jeyakumar]

Hi Maik, 

 

 

Greetings from Syncfusion support, 

 

 

We have validated your query “Write at cursor position” 

 

We can achieve your requirement of inserting HTML text in the current cursor position by getting the range of the element. Please check the code below, 

 

Code snippet: 

<div class=" control-section"> 

        <div class="control-wrapper"> 

            <div id="rteSection"> 

                <ejs-richtexteditor id="customtool" created="created" actionComplete="actionComplete"> 

                    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings> 

                    <e-content-template> 

                          . . . 

                    </e-content-template> 

                </ejs-richtexteditor> 

            </div> 

        </div> 

    </div> 

 

    <script type="text/javascript"> 

        var rteObj, selection, ranges, dialogObj, saveSelection; 

         

        function actionComplete(e) { 

            if (e.requestType === 'SourceCode') { 

                rteObj.getToolbar().querySelector('#custom_tbar').parentElement.classList.add('e-overlay'); 

            } else if (e.requestType === 'Preview') { 

                rteObj.getToolbar().querySelector('#custom_tbar').parentElement.classList.remove('e-overlay'); 

            } 

        }; 

        function created() { 

            rteObj = this; 

            selection = new ej.richtexteditor.NodeSelection(); 

            var customBtn = rteObj.element.querySelector('#emot_tbar'); 

            customBtn.onclick = function (e) { 

                    rteObj.focusIn(); 

                    ranges = selection.getRange(document); 

                    saveSelection = selection.save(ranges, document); 

                    var val = '<p>Test</p>'; 

                    rteObj.executeCommand('insertHTML', val); 

                

            }; 

        } 

    </script> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_CustomTool-207916823 

 

Please check the sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha 

[Maik Betzel]

Hi Vinitha,

thank you for your response.

The given example is not fixing my problem because i am creating an inputfield for the E-Mail adress by clicking the custom Button as shown below.

My problem is that I am losing the Focus from the RTE.

I need to save the focusposition and set it back at the right position in the RTE as before to insert the Email at the right position in the RTE textarea.

Regards, Maik

[Vinitha Jeyakumar]

Hi Maik,  

 

 

You can save the cursor position when the Rich Text Editor loses its focus by using the blur event. Please check the code below, 

 

Code snippet: 

<div class=" control-section"> 

        <div class="control-wrapper"> 

            <div id="rteSection"> 

                <ejs-richtexteditor id="customtool" created="created" blur="onBlur" actionComplete="actionComplete"> 

                    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings> 

                    <e-content-template> 

                    </e-content-template> 

                </ejs-richtexteditor> 

            </div> 

        </div> 

    </div> 

    <script type="text/javascript"> 

        var rteObj, selection, ranges, dialogObj, saveSelection; 

         

        function actionComplete(e) { 

            if (e.requestType === 'SourceCode') { 

                rteObj.getToolbar().querySelector('#custom_tbar').parentElement.classList.add('e-overlay'); 

            } else if (e.requestType === 'Preview') { 

                rteObj.getToolbar().querySelector('#custom_tbar').parentElement.classList.remove('e-overlay'); 

            } 

        }; 

        function created() { 

            rteObj = this; 

            selection = new ej.richtexteditor.NodeSelection(); 

            var customBtn = rteObj.element.querySelector('#emot_tbar'); 

            customBtn.onclick = function (e) { 

                if (saveSelection) { 

                    saveSelection.restore(); 

                } 

                    var val = '<p>Test</p>'; 

                    rteObj.executeCommand('insertHTML', val, ); 

                

            }; 

        } 

        function onBlur() { 

            ranges = selection.getRange(document); 

            saveSelection = selection.save(ranges, document); 

        } 

    </script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170957/ze/RTE_FocusOut-483030369