14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

Understanding byte offset and WYSIWYG cursor position

April 18th, 2024

3 min read

images representing javascript and numbers around the rich text editor

Written by

Joe Robinson


Developer Insights

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();
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:


More WYSIWYG capabilities for your application

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

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

byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • Developer InsightsMar 7th, 2024

    Understanding Uncaught TypeErrors in JavaScript

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge


© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.