我为 CKEditor 4 编写了一个“简单”插件来插入一个带有数据属性和类的 div(数据属性是通过一个简单的对话窗口设置的)。除了单击确定外,一切正常,实际编辑器窗口中没有任何内容。有人可以看看我下面的代码,并指出我哪里出错了。谢谢。
编辑器配置
CKEDITOR.editorConfig = function (config) {
config.BaseHref = 'http://cdn.aoec.com/';
config.extraPlugins = 'contactforms,autogrow,justify,filebrowser,showblocks,tabletools,tweetabletext,widget,widgetbootstrap,widgettemplatemenu,wsc,moxiemanager,video,bootstrapCollapse,image2';
config.autoGrow_minHeight = 400;
config.contentsCss = '/content/styles/site.css';
config.skin = 'flat';
config.allowedContent = true;
config.bootstrapCollapse_managePopupContent = true;
config.toolbar = [
['Source', '-', 'Templates', 'ShowBlocks'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
['Link', 'Unlink', 'Anchor'], ['Table', 'TableTools', 'HorizontalRule', 'SpecialChar'],
['CreatePlaceholder', 'Image', 'Video'],
['Bold', 'Italic', 'Strike', 'Subscript', 'SuperScript', '-', 'RemoveFormat', 'Styles', 'Format'],
['NumberedList', 'BulletedList', '-', 'BlockQuote'],
['createDiv', 'JustifyLeft', 'JustfiyCenter', 'JustifyRight', 'JustifyBlock'],
['TweetableText'], ['WidgetTemplateMenu'],
['BootstrapCollapse'], ['ContactForms']
];
};
插件.js
CKEDITOR.plugins.add('contactforms', {
icons: 'contactforms',
init: function (editor) {
editor.addCommand('contactforms', new CKEDITOR.dialogCommand('contactformsdialog', {
allowedContent: 'div[class,data-form-id]'
}));
editor.ui.addButton('ContactForms', {
label: 'Insert a Contact Form',
command: 'contactforms',
toolbar: 'insert'
});
CKEDITOR.dialog.add('contactformsdialog', this.path + 'dialogs/contactforms.js');
}
});
联系表格.js
CKEDITOR.dialog.add('contactformsdialog', function(editor) {
return {
title: 'Insert a Contact Form',
minWidth: 320,
minHeight: 200,
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'text',
id: 'formid',
label: 'Form ID',
validate: CKEDITOR.dialog.validate.notEmpty("Form ID field cannot be empty.")
}
]
}
],
onOK: function() {
var dialog = this;
var theForm = editor.document.createElement('div');
theForm.setAttribute('class', 'contactform');
var theFormId = dialog.getValueOf('tab-basic', 'formid');
theForm.setAttribute('data-form-id', theFormId);
editor.insertElement(theForm);
}
};
});
提前致谢...