digiofficerobin's avatar
digiofficerobin
Copper Contributor
May 21, 2025
Status:
New

Programmatically set the cursor (caret) to a specific location in an e-mail

Describe your scenario
We are writing an addin for One Outlook where we place a signature text in the body of an e-mail.

What is the problem to solve?
The signature text we are placing is added correctly, but the cursor (caret) is placed at the bottom of the inserted text. We would like to control where the cursor (caret) is placed after we inserted the text.

We have tried the following ideas:

  • Using setSelectedDataAsync to dynamically insert content immediately after the marker.
  • Manipulating the HTML with getAsync and setAsync to simulate the desired cursor position.
  • Adding selectable elements, such as a span with a zero-width space, to force the cursor to position itself at the marker.
  • Using prependAsync to insert content at the beginning of the body as an alternative to controlling the cursor.
  • Implementing JavaScript methods like this:
function setCaret() {
    var el = document.getElementById("editable");
    var range = document.createRange();
    var sel = window.getSelection();
    
    range.setStart(el.childNodes[2], 5);
    range.collapse(true);
    
    sel.removeAllRanges();
    sel.addRange(range);
}

Which APIs or add-in features?
We are using Office.JS, see https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/insert-data-in-the-body#insert-data-at-the-current-cursor-position

We have asked this question https://github.com/OfficeDev/office-js-docs-pr/issues/5188 , but this feature isn't available.

Can this feature be added?

There is a more or less similar question here.

No CommentsBe the first to comment