我为CKEditor 4.5创建了一个自定义的faq小部件。 plugin.js文件如下所示。基本上,小部件使用Twitter Bootstrap的collapse功能添加一个div来呈现FAQ条目。
CKEDITOR.plugins.add('faq', {
requires: 'widget',
icons: 'faq',
init: function (editor) {
var id = Math.random().toString(36).substr(2);
editor.widgets.add('faq', {
button: 'Create FAQ entries',
template: '<div class="faq"><a class="faq-question" data-toggle="collapse" href="#faq-' + id +
'" aria-expanded="true" aria-controls="faq-' + id + '"><p>Question ...?</p></a>' +
'<div class="collapse in faq-answer" id="faq-' + id +'">Answer ...</div></div>',
editables: {
question: {
selector: '.faq-question'
},
answer: {
selector: '.faq-answer'
}
},
allowedContent: 'div(!faq); a(!faq-question); div(!faq-answer); a',
requiredContent: 'div(!faq)',
upcast: function (element) {
return element.name == 'div' && element.hasClass('faq');
}
});
}
});
编辑answer字段效果很好,但是在CKEditor中,我无法编辑问题。
编辑器中生成的源代码如下:
<div class="faq">
<a aria-controls="faq-fk7stx54sfpnl8fr" aria-expanded="true" class="faq-question" data-toggle="collapse" href="#faq-fk7stx54sfpnl8fr">Question ...?</a>
<div class="collapse in faq-answer" id="faq-fk7stx54sfpnl8fr"><p>Answer ...</p></div>
</div>
[好吧,一些关于它的例程帮助解决它;-)
我必须将<a>
标签添加到这样的可编辑元素列表中:
CKEDITOR.dtd.$editable['a'] = 1;
在[[plugins.js文件的顶部]