布局小部件：将下拉列表添加到小部件控件 UI 栏

Question

我觉得我已经在文档中的某处看到它描述了如何执行此操作，但我终究找不到它。

我有什么：

我有一个实现网格系统的布局小部件，允许编辑器创建 2、3 和 4 列布局。您无需为每个布局使用不同的模块，而是 select 在小部件的编辑器模式中使用您想要的布局。 columns-widget的index.js如下：

var textOptions = {
  widgets: {
    'apostrophe-rich-text': {
      toolbar: [ 'Styles', 'Bold', 'Italic', 'Subscript', 'Superscript', 'Link', 'Unlink', 'Anchor', 'BulletedList', 'NumberedList', 'Blockquote', 'Table', 'Split'
      ],
      styles: [
        { name: 'Featured Intro', element: 'h1'},
        { name: 'Section Heading', element: 'h2'},
        { name: 'Label', element: 'h3' }
      ]
    },
    'apostrophe-images': {
      minSize: [400, 300]
    }
  }
};

module.exports = {        
  extend: 'apostrophe-widgets',        
  label: 'Columns',
  skipInitialModal: true,
  addFields: [
    {
      type: 'select',
      name: 'gridCols',
      label: 'Columns',
      choices: [
        {
          value: 'twoTwo',
          label: '50 | 50'
        },
        {
          value: 'threeOne',
          label: '75 | 25'
        },
        {
          value: 'oneThree',
          label: '25 | 75'
        },
        {
          value: 'fourCols',
          label: '4 Columns',
          showFields: ['colThree', 'colFour']
        },
        {
          value: 'threeCols',
          label: '3 Columns',
          showFields: ['colThree']
        }
      ]
    },
    {
      name: 'colOne',
      label: 'Column One',
      type: 'area',
      contextualOnly: true,
      options: textOptions
    },
    {
      name: 'colTwo',
      label: 'Column Two',
      type: 'area',
      contextualOnly: true,
      options: textOptions
    },
    {
      name: 'colThree',
      label: 'Column Three',
      type: 'area',
      contextualOnly: true,
      options: textOptions
    },
    {
      name: 'colFour',
      label: 'Column Four',
      type: 'area',
      contextualOnly: true,
      options: textOptions
    }
  ],
  construct: function (self, options) {
    var superPushAssets = self.pushAssets;
    self.pushAssets = function () {
      superPushAssets();
      self.pushAsset('stylesheet', 'grid');
      self.pushAsset('stylesheet', 'editor', { when: 'user' });
    }
  }
};

我想做什么：

我认为为布局小部件设置模式真的没有意义，您所做的只是 select 您想要的布局类型，我认为在小部件/区域中有一个下拉菜单 ui 的控制组将是理想的，但目前还没有关于此类内容的文档。

目前，我正在使用 skipInitialModal，所以它以两列开头，因为我还不能使用 contextualOnly，因为我还没有弄清楚下拉部分。

如果我要扩展 apostrophe-area，那么我只需要超级 widgetControlGroups，或使用 addWidgetControlGroups 添加按钮，但由于这是一个布局小部件，而且我'扩展 apostrophe-widgets，我有点迷路了。我也没能在 Github 上的其他项目中找到好的例子。

Answer 1

这方面的一些规定刚刚落入 Apostrophe，但它是一个非常具体的实现。

使用 apostrophe-personas 的小部件配置作为此 https://github.com/apostrophecms/apostrophe-personas/blob/master/lib/modules/apostrophe-personas-widgets/index.js

的指南

布局小部件：将下拉列表添加到小部件控件 UI 栏

Layout Widget: Add dropdown to widget control UI bar

apostrophe-cms

我有什么：

我想做什么：