Vue.js集成BEE Plugin时如何正确传入JSON格式模板对象？

可用模板填充方案 #

你可以根据自己的使用场景选择以下任意一种方式填充template变量：

• 场景1：使用空白模板初始化
  这是BEE认可的最小可用模板结构，加载后会显示空白编辑画布，你可以直接拖拽组件编辑：

var template = {
  "page": {
    "rows": [],
    "body": {
      "background-color": "#ffffff",
      "content-width": 600
    }
  }
}

• 场景2：使用带基础内容的预设模板
  你可以直接按照BEE的结构规范自定义初始内容，以下是带一个文本模块的示例：

var template = {
  "page": {
    "rows": [
      {
        "columns": [
          {
            "modules": [
              {
                "type": "text",
                "text": "<p>欢迎使用邮件编辑器</p>",
                "style": {
                  "color": "#333333",
                  "font-size": "16px",
                  "text-align": "center"
                }
              }
            ],
            "width": 100
          }
        ]
      }
    ],
    "body": {
      "background-color": "#f5f5f5",
      "content-width": 600
    }
  }
}

• 场景3：加载历史保存的模板
  如果你之前通过onSave回调存储过生成的jsonFile内容，直接把对应的JSON对象赋值给template即可恢复之前的编辑进度：

// 示例：从你自己的业务接口/本地存储获取历史模板
// const savedTemplate = await fetchYourSavedTemplateApi()
// var template = savedTemplate

注意事项 #

• 传入的必须是标准JS对象，不能是JSON字符串，如果你从接口/本地存储拿到的是序列化后的字符串，需要先调用JSON.parse()转换后再赋值
• 模板必须包含page根字段，缺少该字段会直接触发编辑器初始化报错
• 你可以先随便填充一个简单模板跑通流程，之后在编辑器中手动拖拽组件编辑，触发onSave后把控制台打印的layout_json复制出来，就是符合规范的模板结构，可以直接复用

内容的提问来源于stack exchange，提问作者T dhanunjay