What is the process for executing code in a TinyMCE plugin after the `init_instance_callback` has finished executing?

I'm in the process of developing a new custom plugin for TinyMCE. Is there a method to trigger a callback within the plugin code after the init_instance_callback function has executed for the entire editor? It is essential for me to execute certain tasks within the plugin at this point, and I prefer to automate it within the plugin itself rather than requiring users to call a specific method from their own init_instance_callback implementation.

Do the events that occur between the TinyMCE editor and its plugins have comprehensive documentation available? I presume the solution would involve something like the following:

tinymce.PluginManager.add('myplugin123', function(editor, url)
{
  ...
  editor.on("some-event-name-for-init_instance_callback-complete", function (x)
  {
     // Insert the desired code to be executed here
     ...
  });
});

I aim to utilize the most recent version of TinyMCE, which currently stands at 5.10.2.

Answer №1

It is not believed that the callback triggers an event upon completion, but you can trigger one manually using a custom event:

The crucial part is:

init_instance_callback : function(editor) {
    console.log('Editor: ' + editor.id + ' has been initialized.');
    //Trigger your own event at the end of init_instance_callback
    editor.fire('my_custom_event');
},

The final line triggers an event that you define. You can then listen for this event and take appropriate action. In the provided Fiddle example, this is also done within the TinyMCE configuration, but it can be implemented in your plugin as suggested.

Answer №2

It appears that the initialization code for the TinyMCE editor (specifically for version 5.10.2) includes the following:

var initEditor = function (editor) {
  editor.bindPendingEventDelegates();
  editor.initialized = true;
  fireInit(editor);
  editor.focus(true);
  moveSelectionToFirstCaretPosition(editor);
  editor.nodeChanged({ initial: true });
  editor.execCallback('init_instance_callback', editor);
  autoFocus(editor);
};

The fireInit(editor); method call triggers the Init event for the editor, causing all related event listeners to be immediately executed (including any plugins waiting for this event using editor.on("Init", ...)).

If a plugin needs to run code after the init_instance_callback has already been executed, it can do so by using:

setTimeout(function()
{
  // code to run after init_instance_callback
}, 0);

In practice, this approach works because it adds the function reference to the end of the browser's native event queue, ensuring it runs once the current JS execution is complete.

It should be noted that the autoFocus() implementation introduces a 100 ms delay before triggering the focus event, and will only work if editor.settings.auto_focus is set to true.

This information is not documented officially. While it features in TinyMCE 5.10.2, it might change in future versions, so it should be considered more of a workaround than a fully supported feature.

A recommended approach would be to use both the setTimeout() function call and listen for the focus event. Whichever occurs first will likely happen almost immediately (or with the 100 ms delay) after the init_instance_callback has been executed.

If TinyMCE updates its behavior to trigger the init_instance_callback via the browser's native event loop in the future, this workaround may execute the code prematurely. In such a scenario, there is no guaranteed safe delay value (> 0) to wait for TinyMCE to complete its actions, as the JS execution could potentially stall indefinitely between the Init event and setting a timeout for the init_instance_callback trigger. If 0 is deemed unsafe (as per the current implementation), then any non-zero value could also pose risks.

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

Is it possible to insert a variable into a span or v-tooltip tag?

I am currently using vue 2 along with vuetify 2, and I seem to be encountering an issue when attempting to display data from a table. Whenever I insert curly braces between the v-tooltip tags, it results in a blank page. Below is an example of the code: &l ...

A guide to managing JavaScript alerts and confirmations in Selenium IDE

I'm completely new to automation testing and have recently begun using Selenium IDE for my automation needs. My main question is whether there is a way in IDE to handle java-script alerts. Consider this scenario: I click on the "Delete" button, whic ...

Is there a way to access the scrolling element on the current webpage?

When the route changes, I need to locate the element with scrolling functionality on the new page and scroll it to the top using window.scrollTo(0,0). How can I achieve this? Here is my current code snippet: if (process.client) { router.afterEach((to, ...

Is there a way for me to manually initiate a digest cycle on the parent scope based on my instructions?

I am struggling with getting a directive to render automatically when a change is made to the underlying model programmatically. Using $scope.$apply seems like the right approach, but unfortunately it's not working as expected. The directive only rend ...

My email submission function is malfunctioning

my contact form in my website is not working properly. I have tried troubleshooting the issue by checking the contact.php file but it doesn't seem to be the problem. The script that I am using for the form submission is shown below: <!--Contact U ...

A guide on extracting text enclosed by <a> and </a> tags using regular expressions

I have come across the following code: <a align="center" href="http://google.com"><b>Google Link<b></b></a> <a align="center" href="http://yahoo.com"><strong>Yahoo Link</strong></a> Now, I am looking ...

Storing a blank field in a Kendo grid

Is there a way to clear the content of a cell and save it as an empty field? I attempted to specify my field in the parameter update map using the following code: ((data.Value) ? '","Value": "' + data.Value : "") + and in the schema like this: ...

Pause the ajax response using jQuery

I encountered a simple issue that is causing me trouble. It seems that when I send an ajax request, there isn't enough time to assign the value to the combonews variable: jQuery.ajax({ type: "POST", url: "People.aspx/LoadCombo ...

Tips for manipulating observableArray information retrieved through the $.getJSON method

Recently, I've started using knockout.js and I'm really enjoying it so far! While working in MVC4, I encountered a small issue. I had successfully implemented kojs with static data, but now I need to work with data passed from a controller via JS ...

Dealing with numerous entries in an HTML form using PHP

Currently, I am learning the basics of HTML, PHP, and Javascript. I recently worked on creating a user profile form that includes fields like Full Name, Email Id, and Mobile number. I also want to incorporate a section for "Hobbies/Interests" where users ...

Using jQuery, is it possible to retrieve the product name and image dynamically?

I'm currently working on implementing an add to cart functionality using jQuery. When the add to cart button is clicked, the product name and image should be displayed. I can achieve this statically but I need help figuring out how to dynamically retr ...

React mapped checkboxes are displaying all elements from the array, not just the ones that are checked

Visual: The form is displayed on the left, while the outputs appear on the right I'm currently working on implementing a checkbox array map in React to showcase the features of a specific item. However, I'm facing an issue where all array elemen ...

Tips on how to properly handle the waiting process for model.save() in Mongoose

Here's a function I'm working with: createNewUser async (user) { const newUser = new User(); newUser.name = user.name; newUser.password = user.password; let result = await newUser.save((err, data) => { if (err) retu ...

Are there any instances where CSS is overlooking certain HTML elements?

In the following HTML code snippet, the presence of the element with class ChildBar is optional: <div class="Parent"> <div class="ChildFoo"></div> <div class="ChildBar"></div> <!-- May ...

Can we gather all elements with the 'required' attribute and assign them to a single event in JavaScript?

I am facing an issue with a button that triggers a function when clicked. The problem is that even though the required fields are not filled, the function still gets executed. This is how I have set it up: $('#SubmitButton').click(function() { ...

Embedding a line chart created with chart.js into an SVG container with the help of d3.js

My initial attempt was successful using a button element with the necessary classes and attributes. <button type="button" class="btn btn-default glyphicon glyphicon-arrow-left"></button> However, my next endeavor involve ...

What is the process of instantiating a service constructor in Angular 2?

Below is the implementation of a service: import {Injectable} from 'angular2/core'; import {Service2} from './app.service2'; @Injectable() export class Service1 { constructor(service2:Service2) { this.service2 = service2; } ...

Mastering the art of utilizing sequelize and promises effectively

I'm currently learning how to create apps using expressJS and Sequelize. I could really use some help as I'm more accustomed to sequential programming. My project involves two models: Todo (id, title) and TodoItem (id, content, complete, todoId). ...

Show only the populated fields in a user profile with ReactJS

Purpose Showcasing only completed fields. Context In my app, users fill out an application with fields like "early reg fee, early reg date, regular reg fee, regular reg date". After completing all the information and clicking "view profile", they should ...

Create a Javascript list by using the append method

I am working on creating a list using Javascript and the Append function. In my project, I have an index.php file, script.js file, and a search.php file that executes the mysql query. Although everything is functioning properly, I am not satisfied with t ...