在撇号cms

Question

我已经在Apostrophe CMS中构建了两个小部件：

已应用flexbox类的多列窗口小部件，并提供了一个添加列窗口小部件，而该列又提供了富文本格式等，旨在通过插入多列窗口小部件中的许多添加列来进行扩展。问题是这一切都变得有些时髦。编辑器UI的水平布局有点疯狂，拖放有时会重复并失去内容，您必须非常努力地了解所选择的内容。

使用这种版式是否有任何工具或提示？

index.js for multiple-column widget
======================================
module.exports = {
extend: 'apostrophe-widgets',
label: 'Multiple Column Layout',
contextualOnly: true,
addFields: [
    {
      name: 'multiColContainer',
      type: 'area',
      label: 'Multiple Column Container',
    }
  ]
};

widget.html for multiple-column-widget
======================================
<div class="multiple-column">
  {{ apos.area(data.widget, 'multiColContainer', {
        widgets: {

    'add-column': {}
        }
    }) }}

</div>

index.js for add-column-widget
==============================
module.exports = {
extend: 'apostrophe-widgets',
label: 'Add Column',
contextualOnly: true,
addFields: [
{
  name: 'addColumn',
  type: 'area',
  label: 'Column',
}
]
};

widget.html for add-column-widget
=================================
    <div class="add-column">
    {{ apos.area(data.widget, 'addColumn', {
        widgets: {
            'apostrophe-images': {},
            'link': {},
            'apostrophe-video':{},
            'apostrophe-rich-text': {
            toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink', 'Table', 'BulletedList', 'Blockquote', 'Strike',  'Subscript', 'Superscript'],
            styles: [
                { name: 'Heading', element: 'h1' },
                { name: 'Subheading', element: 'h2' },
                { name: 'Title', element: 'h3' },
                { name: 'Small Title', element: 'h4' },
                { name: 'Paragraph', element: 'p' }
                ]
            }
        }
    }) }}
</div>

changes to site.less for displaying flex and to help out during editing
=======================================================================
.multiple-column {
  .apos-area-widgets, // proper context for logged-in user
  .apos-area { // proper context for logged-out user
  display: flex;
  justify-content: space-around;
 }

.apos-area-widget-wrapper {
   flex-grow: 1;
   flex-basis: 0;
  }

}
// try and help to identify what is what
.multiple-column {
  .apos-area-widgets{
    :hover{border:1px dashed red;}

  .add-column{
    :hover{border:1px dashed greenyellow;}
   }
 }
}