When using the Grapesjs Editor, I needed a modal with a form inside it. Upon clicking the submit button, I wanted to trigger a Function that would make an ajax call.
To achieve this, I attempted to create a custom component by extending it from the default component and then loading it as a block. While I was successful in getting the modal with the form to display, I faced difficulties in tracking the form submit button event.
Here is a snippet of my code:
const domc = editor.DomComponents;
const defaultType = domc.getType('default');
const defaultModel = defaultType.model;
const defaultView = defaultType.view;
domc.addType("test-type", {
model: defaultModel.extend(
{
defaults: Object.assign({}, defaultModel.prototype.defaults, {
type : "test-type",
id:"popup",
droppable : false,
resizable : true,
tagName:"popup",
}),
getAttrToHTML: function() {
var attr = defaultType.model.prototype.getAttrToHTML.apply(this, arguments);
delete attr.onmousedown;
var testmarker = this.get("testmarker");
if(testmarker)
attr.testmarker = testmarker;
console.log(attr)
return attr;
}
}),
view: defaultType.view.extend({
tagName: "button",
events: {
"dblclick": "openModal",
},
initialize: function(o) {
defaultType.view.prototype.initialize.apply(this, arguments);
this.listenTo(this.model, "change:testmarker", this.updateMarker);
this.listenTo(this.model, "dblclick active", this.openModal);
},
updateMarker: function() {
var testmarker = this.model.get("testmarker");
console.log(this.$el.byId)
console.log(this.$el._events);
this.$el.attr("testmarker", testmarker);
},
openModal: function(e) {
const modal = editor.Modal;
console.log(modal)
modal.open({
title: '<br>Create Identity<br>',
content: `
<div class="container">
<form onsubmit="formSubmit()">
<div class="form-group">
<label>URL</label>
<input type="text" class="form-control" id="url" placeholder="http://test-data/" name="url">
</div>
<div class="form-group">
<label>Identity </label>
<input type="text" class="form-control" id="address" placeholder="Enter Identity Address" name="address">
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</form>
</div>`,
});