CKEditor - 单击上下文菜单后获取元素

Question

I added link to context menu of img in ckeditor, using this code CKEditor - Add Context Menu Item to Images

How can I get the information about the image, on which user clicked? For example the id of the image. Or the path. In order to process with the selected image.

Answer 1

The solution was pretty easy.

$('body').on('contextmenu','img',function(){
var imgid = $(this).attr('id');
alert(imgid);
})

Using jquery to track click on image, we can save it's id to global variable. Then, inside the command of the plugin, to take the id that we saved before.

Answer 2

In JavaScript this keyword refers to the owner of a function or event. So when you write click event handler for elements on HTML document. Then this will return particular html element where click event executed. So inside you click event handler function, use this.

this keyword has properties depending upon element but id and name are common for most of html elements. For eg here in img element, src property could return url attribute value of image.

This is good source to know more about this keyword http://www.quirksmode.org/js/this.html

Answer 3

You can use the function of editor getSelection() to know the element clicked for the context menu :

exec: function (editor) {
     var selection = editor.getSelection();
     var selectedElement = selection.getStartElement();

     // Use it as jquery object to get id or more ...
     $(selectedElement.$);
}