Hello,
I'm having trouble adding a new button to the CKEditor WYSIWYG bar. I tried following a few documentations, but both solution didn't work. I'm sure it has to do with the complexity of the thing and what I want it to do.
What I need:
I need a new button that when clicked offers 2 textbox, 1 for a question and 1 for an answer, and 1 select for alignment (left or right). When the text is filled in, the client can then insert that into a DIV that will be auto-generated. It will contains a question and the answer. The client wants to put it anywhere he wants, so we have to do it via the editor.
<div class="info-box closed left">
<span class="corner-orange"></span><span class="exclamation-icon"></span>
<div class="info-box-content">
<h4>Question here</h4>
<p>Answer here</p>
</div>
<a href="#" class="open-close"></a>
</div>
The above is the HTML structure of the DIV that will contains the text inserted (H4 is the question, P is the answer, the class "left" is the alignement).
I have created a new plugin in the plugin folder called "questionanswer" that contains the following files :
/CMSAdminControls/CKeditor/plugins/questionanswer/dialogs/questionanswer.js
/CMSAdminControls/CKeditor/plugins/questionanswer/icons/questionanswer.png
/CMSAdminControls/CKeditor/plugins/questionanswer/plugin.js
In the plugin.js file, I have added the following lines :
config.plugins += ",questionanswer";
config.toolbar_Full = [
['questionanswer', '-']
];
Then, in the plugin.js file, I have this as of now (which does not work and was my second iteration, which I tried to copy from a demo example, without success :
CKEDITOR.plugins.add('questionanswer', {
//lang: 'en',
icons: 'questionanswer',
requires: 'widget,dialog,lineutils',
init: function( editor ) {
editor.addCommand( 'questionanswer', new CKEDITOR.dialogCommand( 'qaDialog' ) );
editor.ui.addButton( 'Q&A', {
label: 'Insert Question & Answer',
command: 'questionanswer',
toolbar: 'insert'
});
editor.widgets.add('questionanswer', {
dialog: 'questionanswer',
init: function () {
},
template: '<div class="info-box closed">' +
'<span class="corner-orange"></span><span class="exclamation-icon"></span>' +
'<div class="info-box-content">' +
'<h4></h4>' +
'<p></p>' +
'</div>' +
'<a href="#" class="open-close"></a>' +
'</div>',
data: function () {
if (this.data.h4) {
element.getElementsByTagName('h4')[0].setText(this.data.h4);
}
if (this.data.p) {
element.getElementsByTagName('p')[0].setText(this.data.p);
}
if (this.data.alignment) {
element.className = "info-box closed " + this.data.alignment;
}
},
requiredContent: 'div(info-box)',
upcast: function (element) {
return element.name == 'div' && element.hasClass('info-box');
}
});
//CKEDITOR.dialog.add( 'qaDialog', this.path + 'dialogs/questionanswer.js' );
}
});
And in questionanswer.js :
CKEDITOR.dialog.add( 'questionanswer', function( editor ) {
return {
title: 'Question & Answer',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'text',
id: 'question',
label: 'Question',
validate: CKEDITOR.dialog.validate.notEmpty( "Question field cannot be empty." ),
setup: function (widget) {
this.setValue(widget.data.h4 || '');
},
commit: function (widget) {
widget.setData('h4', this.getValue());
}
},
{
type: 'text',
id: 'answer',
label: 'Answer',
validate: CKEDITOR.dialog.validate.notEmpty("Answer field cannot be empty."),
setup: function (widget) {
this.setValue(widget.data.p || '');
},
commit: function (widget) {
widget.setData('p', this.getValue());
}
},
{
type: 'select',
id: 'alignment',
label: 'Alignment',
items: [
['Left', 'left'],
['Right', 'right']
],
'default': 'left',
setup: function (widget) {
this.setValue(widget.data.alignment || 'left');
},
commit: function (widget) {
widget.setData('alignment', this.getValue());
}
}
]
}
]
};
});
I know this is probably not working and it's probably even not close to what I should be doing... I need help in understanding how to correctly add a new interactive button (with the option popup) that the client will be able to fill in and insert into the page. This is what I've got for now, but there are probably errors and invalid stuff in there, I'm still trying to comprehend what I need to do, but I'm starting to get low on time to continue spending time on this issue. If there is anyone who has some experience with adding new plugins to the editor bar, then I will gladly welcome the help.
Thanks!