Set cursor position within text

[Frederik Gysel]

Hi,

After setting the text of my RTE (with RTE.value) I would like to position the cursor at a specific position within the text of my RTE.

The position of the cursor should be based on some text part in the RTE.

For example, when below text in loaded in the RTE, I would like to set the cursor position just before the [xxx] text. And even better, if possible, also select the [xxx] text part so that the user can easily replace the [xxx] text part by his input.

'my name is [xxx] and I ...'

Is this possible?

Thx

Frederik

[Vinitha Jeyakumar]

Hi Frederik Gysel,

We have prepared a sample as per your requirement to place the cursor at a specific location and to select the text on a button click. Please check the code and sample below,

Code snippet:

  <button id="dialogBtn" type="button">place cursor</button>

            <div id="defaultRTE"></div>

let defaultRTE: RichTextEditor = new RichTextEditor({

  value: '<p>my name is <span id="key">[xxx]</span> and I <p>',

});

defaultRTE.appendTo('#defaultRTE');

let button: Button = new Button({});

button.appendTo('#dialogBtn');

document.getElementById('dialogBtn').onclick = (): void => {

  let element: Element = defaultRTE.contentModule

    .getDocument()

    .getElementById('key');

  let selectioncursor: NodeSelection = new NodeSelection();

  let range: Range = document.createRange();

  range.setStart(element, 0); // to set the range

  selectioncursor.setRange(document, range);

  var range1 = document.createRange();

  range1.selectNodeContents(element);

  var selection = window.getSelection();

  selection.removeAllRanges();

  selection.addRange(range1);

};

Sample: https://stackblitz.com/edit/tawjlb?file=index.ts,index.html

Regards,

Vinitha

[Frederik Gysel]

Dear,

Thanks, 

But I already saw that example elsewhere and I cannot expect the user to enter HTML code ( <span id="key">[xxx]</span> ) in the RTE.

Plain text is the only user input.

Isn't there some function to search for text (in this case [xxx]) iso getelementbyID?

Thx

Frederik

[Vinitha Jeyakumar]

Hi Frederik Gysel,

We have modified the sample as per you request without using id and span tags. Please check the code and sample below,

Code snippet:

document.getElementById('dialogBtn').onclick = (): void => {

  var div = defaultRTE.inputElement;

  var nodes = div.getElementsByTagName('p');

  for (var i = 0; i < nodes.length; i++) {

    var text = nodes[i].textContent || nodes[i].innerText;

    var searchText = '[xxx]';

    if (text && text.includes('[xxx]')) {

      var range = document.createRange();

      var startIndex = text.indexOf('[xxx]');

      range.setStart(nodes[i].firstChild, startIndex);

      range.collapse(true);

      var selection = window.getSelection();

      selection.removeAllRanges();

      selection.addRange(range);

      var nodeText = nodes[i].textContent || nodes[i].innerText;

      var nodeStartIndex = nodeText.indexOf(searchText);

      var nodeEndIndex = nodeStartIndex + searchText.length;

      var range1 = document.createRange();

      range1.setStart(nodes[i].firstChild, nodeStartIndex);

      range1.setEnd(nodes[i].firstChild, nodeEndIndex);

      var selection = window.getSelection();

      selection.removeAllRanges();

      selection.addRange(range1);

    }

  }

};

Sample: https://stackblitz.com/edit/tawjlb?file=index.ts,index.html

Regards,

Vinitha

[Frederik Gysel]

Great solution, thanks  a lot for your help, much appreciated!!

Rgds

Frederik

[Vinitha Jeyakumar]

Hi Frederik Gysel,

We are glad to assist you.

Regards,

Vinitha