Javascript 单击CKEditor小部件的特定部分/元素上的事件

我们正在尝试构建一个小部件，如下所示：

<div class="main" id="req002"><br>
    <span class="marker"><br>
        <img class="imageMarker" src="myImage.png"><br>
        TITLE
        <br>
    </span>
    <br>
    <div class="content"><br>
        <p>Content line1 !!</p><br>
        <p>Content line2!!</p><br>
    </div>
    <br>
</div>

标题






内容行1
 

内容行2
 

我们希望“图像”是可点击的，但不可编辑，点击后显示一个带有选项列表的菜单。从菜单中选择一个选项后，我们希望更改“图像”，并在小部件的外部“div”元素上设置一些属性值。我查看了“上下文菜单”功能，但上下文菜单显示的是整个小部件，而不是“图像”元素。在小部件API中，我没有找到将侦听器附加到小部件各个部分的方法

代码如下：

CKEDITOR.plugins.add('mywidget', {
    requires: 'widget',
    icons: 'mywidget',
    init: function (editor) {

        editor.addCommand('changeType', {
            exec: function () {
                alert("Hello for the Widget!");
            }
        });

        editor.widgets.add('mywidget', {
            button: 'my widget',
            template:
            '<div class="main">' +
            '<span class = "marker"> <img src="img/main.png"> Title... </span>' +
            '<div class="content">' +
            '<p> content... </p>' +
            '</div>' +
            '</div>',
            editables: {
                title: {
                    selector: '.marker',
                    allowedContent: 'p br ul ol li strong em'
                },
                content: {
                    selector: '.content',
                    allowedContent: 'p br ul ol li strong em'
                }
            },
            allowedContent: 'div(!main);span(!marker);div(!content)',

            requiredContent: 'div(!main)',

            upcast: function (element) {
                return element.name == 'div' && element.hasClass('main');
            }
        });

        CKEDITOR.dtd.$editable = {
            address: 1,
            article: 1,
            aside: 1,
            blockquote: 1,
            body: 1,
            details: 1,
            div: 1,
            fieldset: 1,
            figcaption: 1,
            footer: 1,
            form: 1,
            h1: 1,
            h2: 1,
            h3: 1,
            h4: 1,
            h5: 1,
            h6: 1,
            header: 1,
            hgroup: 1,
            main: 1,
            nav: 1,
            p: 1,
            pre: 1,
            section: 1,
            span: 1
        }
    }
});

CKEDITOR.plugins.add（'mywidget'{
需要：'widget'，
图标：“mywidget”，
init：函数（编辑器）{
editor.addCommand（'changeType'{
exec：函数（）{
警报（“小部件你好！”）；
}
});
editor.widgets.add（'mywidget'{
按钮：“我的小部件”，
模板：
'' +
“标题…”+
'' +
“内容…
”+
'' +
'',
可编辑内容：{
标题：{
选择器：'.marker'，
允许内容：“p br ul ol li strong em”
},
内容：{
选择器：'.content'，
允许内容：“p br ul ol li strong em”
}
},
allowedContent:'div（！main）；span（！marker）；div（！content）'，
必需内容：“div（！main）”，
上行：功能（元素）{
return element.name=='div'&&element.hasClass（'main'）；
}
});
CKEDITOR.dtd.$editable={
地址:1,，
第1条：，
旁白:1,，
区块报价：1，
正文：1，
详情:1,，
分区:1,，
字段集：1，
图1：，
页脚：1，
表格:1,，
h1:1，
h2:1，
h3:1，
h4:1,，
h5:1，
h6:1,，
标题：1，
组：1，
主要内容:1,，
导航：1，
p:1，
前:1,，
第1节：，
跨度：1
}
}
});

有人能帮忙吗？[我在使用ckeditor 4.6.2]