时间戳

首页 > 解决方案 > 在grapesjs Modal中跟踪一个按钮的点击事件

javascript - 在grapesjs Modal中跟踪一个按钮的点击事件

问题描述

在 Grapesjs 编辑器中，我想要一个包含表单的模式。单击提交按钮时，我想调用一个将执行 ajax 调用的函数。

我尝试编写一个从默认组件扩展的自定义组件并将其作为块加载。我可以通过表单获得模态。我不知道如何跟踪表单提交按钮事件。

我的代码：

 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>`,

        });

标签： javascriptbootstrap-4bootstrap-modalgrapesjs

解决方案

您必须在自定义组件定义的脚本部分定义您的 javascript 逻辑（监听点击、ajax 调用...）。查看此链接：组件和 js

更新： 如果您坚持在视图部分使用这种方法，请遵循以下步骤：

view: defaultType.view.extend({
    events: {
        click: 'handleClick',
    },
    createContent() {
        const content = document.createElement('div');
        content.style = 'position: relative';
        content.innerHTML = `
                <div class="container"> 
                  <form>
                      <div>
                          <label>URL: </label>
                           <input type="text" id="url" placeholder="http://test-data/" name="url">
                      </div>
                      <div>
                          <label>Identity: </label>
                           <input type="text" id="address" placeholder="Enter Identity Address" name="address">
                      </div>
                  </form>
                </div>
    <button style="
      position: absolute;
      top: 0; right: 0;
      background-color: #fff;
      font-size: 1rem;
      border-radius: 3px;
      border: none;
      padding: 10px 20px;
      cursor: pointer
    ">
         Submit
    </botton>
  `;

        return content;
    },
    handleClick: function (e) {
        var modal = editor.Modal;
        var content = this.createContent()
        var btn = content.children.length === 2 && content.children[1];
        btn.addEventListener('click', this.applyChanges)
        modal.open({
            title: '<br>Create Identity<br>',
            content: content
            ,
        });
    },
    applyChanges() {
      // DO YOUR AJAX STUFF HERE
    },
}),

推荐阅读