Print Page - [SOLVED] texteditor - how to set cursor/focus after 'insertContent'

Title: [SOLVED] texteditor - how to set cursor/focus after 'insertContent'
Post by: rannacher on January 07, 2022, 01:56:45 PM

Hi,

after inserting text with 'insertContent', how can I manage to get the cursor/focus right after the text inserted?
Below code properly inserts the text (f.e. from a popup menu), but focus is always set to beginning of first line.
To make sense for this, I want the user to continue typing right after the pasted text.

Code:

        function InsertText(txt)
        {
          $('#myTextEditor').texteditor('insertContent', '<span>'+txt+'</span>');
          //$('#myTextEditor').texteditor('getEditor').focus().select();
          $('#myTextEditor').texteditor('getEditor').trigger('mouseup');
        }

Thx a lot as always!!!
BR Mike.

Title: Re: texteditor - how to set cursor/focus after 'insertContent'
Post by: jarry on January 10, 2022, 12:57:06 AM

Please try to call this code.

Code:

var content = $('<span>test</span>');
$('#te').texteditor('insertContent', content);
$('#te').texteditor('getEditor').focus();
$('#te').texteditor('options').selectedRange.collapse(false);

Title: Re: texteditor - how to set cursor/focus after 'insertContent'
Post by: rannacher on January 10, 2022, 04:02:13 AM

Dear Jarry,

thx a lot, but seems this is just working, when inserting text into empty editor.

When editor already filled and I click on any position inside the text there, then my function properly inserts the text at this position, but I dont get the cursor after the inserted text in this case (its always in beginning of all text in line 1, pos 1...).

Please for a final hint to get this up & running & done ;)))) THX!

Or how would a GetCursor/SetCursor, respectively GetSelectedText/SelectText function have toi look in general?

Code:

        function InsertText(txt)
        {
          var str = $('#myTextEditor').texteditor('getValue').trim();
          logconsole("str=["+str+"] len=["+str.length+"]");
          if ( (!str) || (str.length < 1 ) )
          {
            // THIS part WORKS... cursor is set after the inserted TEXT
            logconsole("Editor empty");
            $('#myTextEditor').texteditor('getEditor').focus();
            $('#myTextEditor').texteditor('getEditor').trigger('mouseup');
            $('#myTextEditor').texteditor('insertContent', '<span>'+txt+'</span>');
            $('#myTextEditor').texteditor('options').selectedRange.collapse(false);
          }
          else
          {
            // DOES NOT WORK... TEXT inserted properly at actual cursor, but focus always goes to line1, pos1 in the beginning of all text in the texteditor
            logconsole("Editor filled, inserting at actual cursor position");
            $('#myTextEditor').texteditor('insertContent', '<span>'+txt+'</span>');
            $('#myTextEditor').texteditor('getEditor').focus();
            //$('#myTextEditor').texteditor('getEditor').trigger('mouseup');
            $('#myTextEditor').texteditor('options').selectedRange.collapse(false);
          }

          return true;
        }

Title: Re: texteditor - how to set cursor/focus after 'insertContent'
Post by: jarry on January 11, 2022, 08:37:56 PM

This code can also move the cursor.

Code:

var content = $('<span>test</span>');
$('#myTextEditor').texteditor('insertContent', content);
$('#myTextEditor').texteditor('getEditor').focus();
var range = document.createRange();
range.setStartBefore(content[0]);
range.setEndAfter(content[0]);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
range.collapse(false);

Title: Re: texteditor - how to set cursor/focus after 'insertContent'
Post by: rannacher on January 12, 2022, 09:38:03 AM

Hallelujah - its magic ;)))
Thanks a lot Jarry!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: rannacher on January 07, 2022, 01:56:45 PM