Implement an OnMouseover Event in TinyMCE Editor Instance

Question

Implement an OnMouseover Event in TinyMCE Editor Instance

In my quest to enhance the functionality of an editor instance within TinyMCE (via a plugin), I have encountered a roadblock with regards to implementing onMouseOver and onMouseOut events. It appears that these specific events are not natively supported by TinyMCE's API. My intention is to have a control surface when the user hovers over the element to switch to "read-only" mode, among other potential actions. Is it necessary for me to manually inject code into TinyMCE in order to achieve this, or is there a hidden method through which this can be accomplished? And if manual coding is indeed required, what is the rationale behind the lack of support for these events in the API?

For the sake of clarity for those who may share the same degree of confusion as some previous respondents, my main objective is to associate an event with the TinyMCE.Editor instance generated by the TinyMCE library (the class that is supplied to the callback function within the setup parameter of TinyMCE.init). In essence, I aspire to execute the following:

tinyMCE.init({
  .
  .
  .
  setup : function(ed) { 
    TinyMCEReadOnlySetup(ed,true); 
    ed.onMouseOver.add(ShowButton(ed));
    ed.onMouseOut.add(HideButton(ed));
  },
  .
  .
  .
});

However, the variable 'ed' (which represents an instance of TinyMCE.Editor) does not seem to facilitate the addition of MouseOver events in the typical manner seen with other similar events.

javascript tinymce onmouseover onmouseout

Answer 1

Answer №1

If you want to switch between read-only and edit mode, you can do so by using the following code snippet:

ed.getDoc().designMode = "Off";

You can also save the editor content and restore it when the onChange event is triggered.

UPDATE:

To add a mouseover event listener, you can utilize the following code:

$('#' + ed.id +'_parent').bind('mouseover',function (evt){
   setTimeout("console.log('mouseover')",50);return false;
});

This functionality can be implemented in the onInit section of your plugin.

Answer 2

If you want to switch between read-only and edit mode, you can do so by using the following code snippet:

ed.getDoc().designMode = "Off";

You can also save the editor content and restore it when the onChange event is triggered.

UPDATE:

To add a mouseover event listener, you can utilize the following code:

$('#' + ed.id +'_parent').bind('mouseover',function (evt){
   setTimeout("console.log('mouseover')",50);return false;
});

This functionality can be implemented in the onInit section of your plugin.

Answer 3

Answer №2

After some experimenting, I discovered a workaround for making this function properly. I ended up creating a custom plugin and implementing the following code within the initialization attribute:

ed.onInit.add(function(ed){
                   .
                   .
                   .

    document.getElementById(ed.id + '_parent').setAttribute('onmouseover',
      "tinyMCE.editor_ShowButton('" + ed.id + "');");
    document.getElementById(ed.id + '_parent').setAttribute('onmouseout',
      "tinyMCE.editor_HideButton('" + ed.id + "');");
    //ed.getBody().appendChild(newdiv);
 });

Although not the ideal solution, it effectively accomplishes the task at hand.

Answer 4

After some experimenting, I discovered a workaround for making this function properly. I ended up creating a custom plugin and implementing the following code within the initialization attribute:

ed.onInit.add(function(ed){
                   .
                   .
                   .

    document.getElementById(ed.id + '_parent').setAttribute('onmouseover',
      "tinyMCE.editor_ShowButton('" + ed.id + "');");
    document.getElementById(ed.id + '_parent').setAttribute('onmouseout',
      "tinyMCE.editor_HideButton('" + ed.id + "');");
    //ed.getBody().appendChild(newdiv);
 });

Although not the ideal solution, it effectively accomplishes the task at hand.

Implement an OnMouseover Event in TinyMCE Editor Instance

Answer №1

Answer №2

Similar questions

Methods for invoking a function from a separate .js file within React Native Expo

When the hero banner text is too long, dynamic generation will insert it below the 3 action cards to prevent overlap, incorporating styling to maintain clarity and organization

A method of submitting by simply pressing the enter key alongside clicking on a Bootstrap button

How do I go about adding a specific class to every row within a Vue.js table?

Problem encountered when attempting to send an array of files in two dimensions

Using JavaScript to fetch and display a video

Anticipated usage of 'this' within the class method

What is the best way to assign a Vue property the value of a stringified element attribute?

"Discover the best way to sort through an array of complex objects with varying levels of nesting using a specified search

If I dared to eliminate the emphasized line, this code would completely fall apart

Tips for managing await requests in asynchronous loop functions - utilizing Node.js

Verifying if a Google Apps Script sheet name or string contains a combination of letters and numbers using JavaScript

Having trouble connecting DB and D3 using PHP. Struggling to follow D3noob's tutorial to completion

What are the steps to setting up Webpack-simple with Vue Cli 3?

Executing AJAX upon triggering the onchange event occurs prior to the full page loading

What is the process for associating JSON reponses with button actions on a webpage?

Obtain the currency symbol from a given price string

Creating a hierarchical menu structure by splitting strings in an array using an algorithm

What is the meaning of object in JavaScript?

How can I send parameters to a directive in AngularJS?