Layout Widget Error: "You were unable to take control of the document"

Question

你好撇号 CMS 向导

我正在阅读此处找到的教程：https://apostrophecms.org/docs/tutorials/getting-started/layout-widgets.html

它说：

An alternative to contextualOnly, skipInitialModal lets you skip the widget manager modal when the widget is created (like contextualOnly) but preserves the Edit UI for later use. This is useful for widgets that have secondary configuration, like setting a background color.

这正是我想为我的用户公开的那种功能。我已经构建了上面要点中的代码的更复杂版本，但更简单的版本仍然有我遇到的相同错误，因此我在此处包含该代码。

基本上，我想为我的自定义布局小部件提供一个编辑对话框，允许他们更改背景颜色、决定是否添加背景图像、决定背景图像的显示方式，所有这些都无需触摸代码。

问题

保存对我的自定义小部件的更改后，您无法对我的小部件区域内的内容进行更改。相反，它吐出一个错误告诉你 You were unable to take control of the document.

如果刷新页面，您可以恢复所需的功能，但显然这并不理想。

我在这里错过了什么？

示例代码

您会注意到下面的代码只是对上面教程页面的示例代码稍作修改。

这是简单小部件的 widget.html 文件：

<div class="two-column">
    <div class="column-left">
        {{ apos.area(data.widget, 'areaLeft', {
            widgets: {
                'apostrophe-images': {}
            }
        }) }}
    </div>
    <div class="column-right">
        {{ apos.area(data.widget, 'areaRight', {
            widgets: {
                'apostrophe-images': {}
            }
        }) }}
    </div>
</div>

这里是简单小部件的 index.js 文件：

module.exports = {
    extend: 'apostrophe-widgets',
    label: 'Double Content',
    skipInitialModal: true,
    addFields: [
      {
        name: 'areaLeft',
        type: 'area',
        label: 'Left Area',
        contextual: true
      },
      {
        name: 'areaRight',
        type: 'area',
        label: 'Right Area',
        contextual: true
      }
    ]
  };

更新 1

按照建议，我克隆了 this repo 并修改了 One Column 小部件以匹配上述设置。为了完整起见，我在此处包含了对代码的更改。我没有对回购代码进行任何其他更改。

module.exports = {
  extend: 'apostrophe-widgets',
  label: 'One Column',
  // contextualOnly: true, // removed
  skipInitialModal:true, // added
  addFields: [
    {
      name: 'one',
      type: 'area',
      contextual:true, // added
    }
  ]
};

结果

还是有同样的问题。

如果有帮助，上面 repo 中使用的 ApostropheCMS 版本是：2.58.0

看看这个

我是新来的，所以实际上不允许在此处嵌入图像，但这应该仍然有效。看看：

screen capture gif of failure

更新 2

有了新的 update，一切似乎都已修复！

Answer 1

报告的原始问题已在此提交 https://github.com/apostrophecms/apostrophe/pull/1430 中修复。目前在 master 中，将在一周左右的时间内发布到 npm。

Answer 2

针对这个挥之不去的问题的修复已作为 Apostrophe 2.59.0 发布到 npm。这个新版本解决了在通过模式编辑小部件并且也在页面上发生上下文嵌套编辑的情况下的这个问题。

Layout Widget Error: "You were unable to take control of the document"