我们正在尝试构建如下的小部件:
<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>
我们希望“图片”可点击但不可编辑,点击后会显示一个带有选项列表的菜单。从菜单中选择一个选项我们想要更改“图片”并设置一些属性值在小部件的外部'div'元素上。我查看了“上下文菜单”功能,但上下文菜单显示整个小部件,而不是专门针对'image'元素。在Widget 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 4.6.2]