Is there a way to retrieve the caret position in pixels (x & y dimensions) in TinyMCE 4 without obtaining row/column numbers? It should be relative to anything and achieved without adding any extra tags like bookmarks. Anyone know if TinyMCE has a method for this or if there's an option to get the bookmark position in pixels and then remove it?
Appreciate any insight on this matter!
Great, I've located the information.
To start, you'll need to initialize an instance of the tinymce.Editor class. This can be done like so:
var editor = new tinymce.Editor(); //or another method, such as tinyMCE.activeEditorUsing jQuery, retrieve the position of the TinyMCE widgets:
var tinymcePosition = $(editor.getContainer()).position();
var toolbarPosition = $(editor.getContainer()).find(".mce-toolbar").first();
Now determine the position of the HTML node you are currently editing:
var nodePosition = $(editor.selection.getNode()).position();
var textareaTop = 0;
var textareaLeft = 0;
We have the Y-axis position (via nodePosition.top), now let's find the X-axis position:
if (editor.selection.getRng().getClientRects().length > 0) {
textareaTop = editor.selection.getRng().getClientRects()[0].top + editor.selection.getRng().getClientRects()[0].height;
textareaLeft = editor.selection.getRng().getClientRects()[0].left;
} else {
textareaTop = parseInt($($this.selection.getNode()).css("font-size")) * 1.3 + nodePosition.top;
textareaLeft = nodePosition.left;
}
The positions of the caret relative to the TinyMCE editor window (textarea) are now stored in
textareaTop && textareaLeftvar position = $(editor.getContainer()).offset();
var caretPosition = {
top: tinymcePosition.top + toolbarPosition.innerHeight() + textareaTop,
left: tinymcePosition.left + textareaLeft + position.left
}
This solution is inspired by the autocomplete plugin for TinyMCE 3 found at here, and has been adjusted to fit my needs in TinyMCE 4.
A while back, I came across some slider code on a website and copied it. Unfortunately, I can't seem to locate the source now. Here is the code snippet: slides.min.jquery.js $(function(){ $('#slides').slides({ preload: true, ...
Recently, I've been diving into the world of Angular Validations to ensure pattern matching and field requirements are met in my projects. Despite finding numerous resources online on how to implement this feature, I've encountered some challenge ...
Greetings! I am facing an issue where every time a year is added, it gets inserted between the day and month in the date of entry for a user at our company. var yearOnCompany = moment(user.fecha_ingreso_empresa, "YYYYMMDD").fromNow(); var dateStart = mome ...
I am currently using jose for signing and encrypting JWTs, but I am facing an issue when trying to sign and then encrypt the entire JWT. When it comes to signing my JWT, I utilize the following function: const secretKey = process.env.JWT_SECRET; const key ...
I have a system that takes input in the form of lines of text stored as an array, for example: array[123,556,"test",0,0]. By using val().split('\n'), I am able to add each new line to the array so that each line index is incremented by 1. He ...
Being a fan of creating global namespaces in javascript, I often use this approach in my app development. For instance, if my application is named Xyz, I typically create an object called XYZ to organize properties and nested objects like so: XYZ.Resource ...
I have been working on a Vue.js project for learning purposes, incorporating Quasar and Vuex. However, I keep encountering numerous Uncaught (in promise) DOMException errors which appear in the console. The application seems to work fine, but these red err ...
I am looking to track the number of clicks on a specific div with the id #counter and then redirect the user to a different website. To achieve this, I have implemented an ajax call on the click event of the #counter div. Upon successful completion of the ...
I am working on creating a unique identification number for each React component, which will be assigned to the component upon mounting. Here is the approach I am taking: The callOnce function is used to ensure that a specific function is only executed on ...
I'm completely new to Angular.js and have been exploring various tutorials to grasp the concept of two-way binding with contenteditable elements within an ng-repeat. Currently, I am utilizing a shared 'store' between controllers like this: ...
I've encountered an issue while working on a Python application that utilizes Vue.js. A ticket came my way with an error message stating: [Vue warn]: Duplicate keys detected: ''. This may cause an update error. (found in Root) The pro ...
If I have a string representing an SVG path like: "M72 0v754h405v-86h-311v-211h302v-86h-302v-285h311v-86h-405z" My goal is to transform it into an array where each element consists of either a letter or a positive/negative number. For example: [ ...
Looking for a solution to achieve smooth scrolling on an HTML page without using the #id_name to scroll to a specific div. Instead, I want to scroll to a particular point, such as having a button that scrolls down the webpage smoothly by 250px when press ...
I am attempting to utilize an ng-template to iterate through my args in order to create an indented menu content. Unfortunately, I have encountered issues with ng-include not working as expected. I have tried adding a quote but it still does not work. For ...
I am currently utilizing JQuery's FullCalendar plugin for my project and I have observed that the date cells expand when multiple events coincide on a single date. For example, as shown in this image, the date cell for February 4 is expanding. Is the ...
I recently developed an input component for my Vue project and integrated it within my forms. My aim is to implement vee-validate for validating the inputs. Initially, I attempted to validate my component like any regular input field. However, upon encoun ...
What's the solution to this issue? Error: UnhandledPromiseRejectionWarning: DiscordAPIError: Cannot send an empty message Code: let y = process.openStdin() y.addListener('data', res => { let x = res.toString().trim().split(/ +/g) ...
Using Bootstrap 3 for field validation on forms has been effective, but there seems to be an issue with certain browsers such as ios safari not validating [required] form items. To address this, I created a script that checks if an element is marked as req ...
Despite multiple attempts to resolve what I initially thought was a caching issue by completely removing all code from my server, I am still facing the same problem: The default error handling provided by Express Generator in the app.js file contains the ...
Imagine a scenario where there is a Parent Component that provides a Context containing a Store Object. This Store holds a value and a function to update this value. class Store { // value // function updateValue() {} } const Parent = () => { const ...