Question

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

        });

Answer 1

您必须在自定义组件定义的脚本部分上定义javascript逻辑（侦听单击，ajax调用等）。查看此链接：components and 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
    },
}),

在Grapes.js Modal中跟踪按钮的单击事件

1 个答案: