Currently, I am working on developing dynamic custom buttons for my summernote wysiwygs. However, I have encountered an issue. My goal is to pass the data that I am iterating through to the button's render function. Unfortunately, since the context is already being passed as a parameter, I am a bit stuck in figuring out the best approach.
Below is the relevant code snippet:
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);
})
In an attempt to pass the field value to the formButtons[x] function without replacing the context's value, I tried the following:
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);
After exploring this option, the console output for both field and context displayed the correct field value.