I am creating dynamical custom buttons for my summernote wysiwygs, but i’m running into a problem. I want to pass the data i’m iterating through to the button’s render function, but since it is already being passed the context as a parameter, I’m a bit clueless here.
Here’s the relevant code:
var formButtons = {};
var formButtonIds = [];
if(FormsModule.currentForm) {
for(var i=0; i<FormsModule.currentForm.fields.length; i++) {
var field = FormsModule.currentForm.fields[i];
var fieldId = 'button_' + i;
formButtons[fieldId] = (function (context) {
console.log(context);
console.log(field);
var ui = $.summernote.ui;
var tooltip = 'Insert ' + field.title;
// create button
var button = ui.button({
contents: HelperModule.getTitle(field.title),
tooltip: tooltip,
click: function () {
context.invoke("editor.insertText", '<span clas="field-input-button">#' + field.title + '#</span>');
},
});
return button.render();
});
formButtonIds.push(fieldId);
}
}
$("#form-modal #form-form .wysiwyg").each(function(index, wysiwyg) {
var content = $(wysiwyg).summernote('code');
$(wysiwyg).summernote('destroy');
$(wysiwyg).summernote({
buttons: formButtons,
toolbar: [
["style", ["style"]],
['font', ['bold', 'underline', 'clear']],
//['fontname', ['fontname']],
["color", ["color"]],
["para", ["ul", "ol", "paragraph"]],
["mybutton", formButtonIds],
["table", ["table"]],
["insert", ["link"]],
["view", ["codeview"]],
],
});
$(wysiwyg).summernote('code', content);
})
If I try and pass the field to the formButtons[x] function, it (replaces the context’s value):
formButtons[fieldId] = (function (context) {
console.log(context);
console.log(field);
var ui = $.summernote.ui;
var tooltip = 'Insert ' + field.title;
// create button
var button = ui.button({
contents: HelperModule.getTitle(field.title),
tooltip: tooltip,
click: function () {
context.invoke("editor.insertText", '<span clas="field-input-button">#' + field.title + '#</span>');
},
});
return button.render();
})(field);
The console.log of both field and context are the field value