Obtain the present location of the cursor within the TinyMCE editor

Despite various attempts, I have struggled to determine the current cursor position inside TinyMCE.

My goal is to implement a change control feature that captures the starting point of text entry within the TinyMCE "textarea," allowing me to save the entered text to a database for review and approval by another user.

I have experimented with methods like selectionStart, bookmark (which proved temporary), and selection.getSelect() (providing only line-specific positions rather than exact cursor location).

Is there a reliable way to retrieve the precise pointer position in this scenario?

javascriptnext.jstinymce

Answer №1

Take a look at this demonstration on how to set and retrieve the cursor position using TinyMCE's Bookmark Manager API:

let tinyBookmark;
function saveCursor() {
    tinyBookmark = tinyMCE.activeEditor.selection.getBookmark(2);
}

function restoreCursor() {
    console.log(tinyBookmark);
    tinyMCE.activeEditor.focus()
    tinyMCE.activeEditor.selection.moveToBookmark(tinyBookmark); 
}

The tinyBookmark object can be saved in your database (displayed in the console log during the restoreCursor function).

For more information, refer to the documentation:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React version 18.2.0 and Next.js version 13 faced an issue with hydration failure due to the initial user interface not matching. This problem

Upon opening the page, I encounter an error when focusing on the input element right away. However, if I wait a few seconds before focusing on the input element, the error does not occur. Unfortunately, I have been unable to resolve this issue. Interesting ...

javascriptreactjsnext.js

How to dynamically apply component-specific CSS in NextJS based on conditions

I'm working on my nextjs project and encountered an issue with adding conditional styling to a component. To address this, I created a component-level stylesheet called MyComponent.module.css, which includes the following styles: .primary { color: ...

javascriptreactjsnext.js

A superior method for implementing CSS keyframe transitions

Currently, I am utilizing the Rico St.Cruz brilliant query.transit library for my work. However, I need to make some changes involving classes instead of CSS transitions. Although I am not very confident in CSS transitions, I attempted to replace: JS: $ ...

javascriptjqueryhtmlcss

Utilizing Ajax, Jquery, and Struts2 for File Uploading

Can someone please provide guidance on uploading files using a combination of Ajax, jQuery, and Struts2? I have searched through numerous tutorials online but haven't found a suitable solution yet. The goal is to trigger a JavaScript function when a b ...

javascriptjqueryajaxfile-uploadstruts2

Express Form Validation: Ensuring Data Accuracy

I have recently learned that client-side form validations may not be sufficient to prevent malicious actions from users. It is recommended to also validate the form on the server-side. Since I am new to using express, can someone provide guidance on what s ...

javascripthtmlnode.jsexpress

Stop the closure of confirmation box by disabling the space key

I've been working on a website that features a table for users to interact with. Within one column of the table, there are input boxes where users can write notes. Below each input box, there is a save button to store the entered notes in a database. ...

javascriptjquery

An error was encountered in compiler.js at line 1021, stating that an unexpected value 'UserService' was imported by the module 'UserModule'. It is recommended to add a @NgModule annotation to resolve this issue

As a PHP programmer new to Angular, I am facing an issue while trying to retrieve user properties from a Laravel API. When attempting this, I encountered the following error: compiler.js:1021 Uncaught Error: Unexpected value 'UserService' importe ...

javascriptangulartypescript

Using React's dangerouslySetInnerHTML can cause issues with JSON configuration when the '&' character is used

I am encountering an issue when trying to insert the amp-analytics script into an amp page that is generated from Next.js. The problem arises with the & character causing JSON config to break when using dangerouslySetInnerHTML. Below is the code snipp ...

next.jsgoogle-optimizeamp-analytics

Incorporate AJAX into your Javascript code for ordering

My issue arises when pointOnMap() is executed before xmlPreparer(), even though they are called in the correct order. I suspect this has something to do with the use of AJAX, as parseXML creates the object that pointOnMap() requires to be initialized befor ...

javascriptjqueryajax

Using localStorage in the client side of nextJS is a breeze

Encountering an error while attempting to retrieve local storage data. Even with the use client directive in place at the beginning, the issue persists. 'use client'; const baseURL = 'https://localhost:7264'; const accessToken = localSt ...

javascriptreactjsnext.jslocal-storage

hiding html elements by using the display property set to none instead of physically removing

I am currently utilizing an if-else statement to display different HTML structures. As a result, the entire HTML is being rendered twice. Is there a way we can utilize 'display: none' instead? I attempted to use it in th ...

javascriptjqueryhtmlcsstypescript

Node and Web scraping Promise: a powerful combination

I've been using Cheerio and Node for web scraping, and I thought implementing promises could simplify handling asynchronous code. However, my attempt to chain promises hasn't been successful. Below is the code I'm working with, in hopes that ...

javascriptnode.js

Updating the handler function for AutoComplete with Checkbox in Material UI using React JS

I am looking to include an <AutoComplete /> field in my form. The options for this field are fetched through a get request, and here is the result displayed in the console. [ { "uid": "c34bb0ed-9f63-4803-8639-a42c7e2a8fb0&q ...

javascriptreactjsmaterial-uiautocomplete

Tips for ensuring only one dropdown is opened at a time

Hey there! I've been struggling with getting my dropdowns to open one at a time on my website. I attempted to hide them all by default, but they still insist on opening simultaneously. Any ideas on what I might be overlooking? Thank you for your help! ...

javascriptjquery

The Chrome Extension was denied from loading due to a violation of the specified Content Security Policy

I am encountering an issue while loading a Chrome Extension using React. Whenever I try to load it, the error message below pops up: Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.min.js' because it violates the following ...

javascriptreactjsgoogle-chrome-extension

Employing eval for parsing the JSON data

function ajaxFunction(){ var ajaxRequest; // The variable that enables the use of Ajax technology! try{ // Compatible with Opera 8.0+, Firefox, and Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // For Internet Explorer Browsers ...

javascriptajaxjsonparsingeval

Is there a way to speed up the loading time of React in the browser?

My experience with using React in the browser has been positive, but I'm facing a speed issue. The initial loading time is quite lengthy as it compiles. I am looking for a way to use React/JSX directly in the browser and have it compile instantly wit ...

javascriptreactjs

React: Unexpected error occurs with invalid element type

I encountered the following issue while attempting to utilize a component Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forg ...

javascriptreactjs

How to set the element in the render method in Backbone?

Currently, I am in the process of developing a web page utilizing BackboneJS. The structure of the HTML page consists of two divs acting as columns where each item is supposed to be displayed in either the first or second column. However, I am facing an is ...

javascripthtmlbackbone.js

Transforming an object containing methods into a string using Javascript specifically for Photoshop

I have a unique universal object that is essential for my Photoshop scripts. It contains various properties and methods like this: var Object = {}; Object.text = "this is some text"; Object.toolbox = new ToolBox(); // specialized object with its own funct ...

javascriptobjectserializationphotoshop