javascript - Adding hover event to elements inside a tinymce editor - Stack Overflow

admin管理员组

文章数量:1026989

I have a tinymce plugin that populates the editor with content.

Certain populated elements have a class="hoverable"

I'd like to attach a function to the hover event on those elements with class="hoverable"

I know how to attach an onClick with ed.onClick.add in the create function but there is no ed.onHover.add or ed.onMouseIn.add.

Edit: My plug-in actually pops up a dialog when you press the plug-in button in the menu. The user selects some content from the dialog and inserts it into the editor.

I have a tinymce plugin that populates the editor with content.

Certain populated elements have a class="hoverable"

I'd like to attach a function to the hover event on those elements with class="hoverable"

I know how to attach an onClick with ed.onClick.add in the create function but there is no ed.onHover.add or ed.onMouseIn.add.

Edit: My plug-in actually pops up a dialog when you press the plug-in button in the menu. The user selects some content from the dialog and inserts it into the editor.

• javascript
• jquery
• tinymce

Share Improve this question Follow edited Oct 26, 2011 at 18:21 Hector Scout asked Oct 25, 2011 at 19:58 Hector ScoutHector Scout 1,40833 gold badges1515 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can add a mouseover handler to elements in the editor with class 'hoverable'.

$(ed.getBody()).find('.hoverable').hover(function (evt){ /* do tooltip here */   });

You can find a howto create simple tooltips using jQuery here.

In the function that adds the selected content to the editor I added

tinymce.activeEditor.$('.hoverable').live('mouseover mouseout', function(evt) {
    if (evt.type == 'mouseover') {
        //do hover stuff
    }
    else {
        //undo hover stuff
    }
}

In my case new hoverable things may be added so I need the .live in other cases you could probalby just use .hover.

I have a tinymce plugin that populates the editor with content.

Certain populated elements have a class="hoverable"

I'd like to attach a function to the hover event on those elements with class="hoverable"

I know how to attach an onClick with ed.onClick.add in the create function but there is no ed.onHover.add or ed.onMouseIn.add.

Edit: My plug-in actually pops up a dialog when you press the plug-in button in the menu. The user selects some content from the dialog and inserts it into the editor.

I have a tinymce plugin that populates the editor with content.

Certain populated elements have a class="hoverable"

I'd like to attach a function to the hover event on those elements with class="hoverable"

I know how to attach an onClick with ed.onClick.add in the create function but there is no ed.onHover.add or ed.onMouseIn.add.

Edit: My plug-in actually pops up a dialog when you press the plug-in button in the menu. The user selects some content from the dialog and inserts it into the editor.

• javascript
• jquery
• tinymce

Share Improve this question Follow edited Oct 26, 2011 at 18:21 Hector Scout asked Oct 25, 2011 at 19:58 Hector ScoutHector Scout 1,40833 gold badges1515 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can add a mouseover handler to elements in the editor with class 'hoverable'.

$(ed.getBody()).find('.hoverable').hover(function (evt){ /* do tooltip here */   });

You can find a howto create simple tooltips using jQuery here.

In the function that adds the selected content to the editor I added

tinymce.activeEditor.$('.hoverable').live('mouseover mouseout', function(evt) {
    if (evt.type == 'mouseover') {
        //do hover stuff
    }
    else {
        //undo hover stuff
    }
}

In my case new hoverable things may be added so I need the .live in other cases you could probalby just use .hover.

本文标签： javascriptAdding hover event to elements inside a tinymce editorStack Overflow