Understanding byte offset and WYSIWYG cursor position

Understanding where objects are on a web page relative to each other – that is, the offset of the objects – is essential for building interactive web applications. It’s useful information you can use to create effects like call-to-action alerts and content that can scroll into view. Understanding offset values can present a challenge, but they’re important to know for developing web applications. 

When it comes to the use case of placing a cursor in a WYSIWYG, which relies on the offset value, there are options available to make the process easier. For instance, TinyMCE is a WYSIWYG that provides a range of API methods for situations such as WYSIWYG cursor positioning. This post explores how the offset value works within this use case. It covers the byte offset and character offset concepts.

Byte offset meaning and definitions

The byte offset is the distance between two objects on a web page in byte format. A byte is made of 8 adjacent, binary digits. These digits are called bits. When you have an array or other data structure object, the distance between the beginning of the object and another element or point on the page, as measured in the number of bytes, is a byte offset.

For a WYSIWYG on a web application, if you collected the content held within it, and converted it into an array or data structure object, you could determine the distance between the beginning of the WYSIWYG object contents, and a particular node or other element within the WYSIWYG. If you parsed this object to determine the bytes between the beginning of the object and the target node, this distance would be the byte offset.

Can you use a byte offset to set cursor position?

Cursor positions in web applications, specifically WYSIWYGs, usually make use of the character offset, and not the byte offset. It’s a faster process to get the WYSIWYG editor content, identify a node within that content, and then place the cursor at an index value within that node based on the number of characters, and not the number of bytes.

Byte offset and TinyMCE editor contents

You could calculate the byte offset for a node in WYSIWYG contents by collecting the content, converting that HTML into a data structure like an ArrayBuffer, parsing that data structure for the byte offset, and then decoding the data structure if you need to.

For example, make use of the TextEncoder() interface and the TinyMCE getContent() API to turn the WYSIWYG content into an ArrayBuffer. You can then use the encode() method to create the data structure:

var enc = new TextEncoder();
tinyMCE.activeEditor.getContent();
var tinyEncArray0a = enc.encode(tinyMCE.activeEditor.getContent);

Offset and cursor position

When using TinyMCE as your WYSIWYG, however, there are faster solutions for setting the cursor position than identifying the byte offset. TinyMCE’s Document Object Model (DOM) APIs provide cursor position capabilities for your application using a character offset.

Check out the guide to setting the cursor position in TinyMCE using the setCursorLocation() method.

For example, to place the cursor in the first paragraph in a given editor:

tinymce.activeEditor.selection.setCursorLocation(
  tinymce.activeEditor.dom.select("p")[0],
  0
);

More WYSIWYG capabilities for your application

If you need additional information on how to manage content when using TinyMCE, there are several guides available:

• Adding placeholder text to your TinyMCE editor
• How to style text in your editor, what options are available
• Handling textarea on change events with TinyMCE

Contact us if you have any questions on setting the cursor position, or other important capabilities for your customers.