带浮点数的 apostrophe-cms 工具栏

Question

我一直在用 apostrophecms 构建一个网站，但是我已经到了这样的地步，其中一种布局不能很好地播放。

内容是 p 和 img 标签的简单混合（向左或向右浮动）

向左浮动的图像的工具栏没问题，但任何向右浮动的图像的工具栏位于文档的错误一侧。

有没有一种无需以不同方式构建布局即可解决此问题的好方法？

或者我可以使用富文本编辑器，但是富文本模块中的图像项只允许使用来自 URL 的图像，并且不包括直接上传图像的方法进入系统（我可以看到）。

感谢您的帮助！

Sample screenshot of what's happening.

  &#story-detail {

.wrapper-relative {
    section {
      overflow: visible;
      max-width: none!important;
       text-align: left;
       q {display: block; font-size: 1.3em; margin: 1em auto;}
       q, p, h5 {width:60%; margin:1em auto; z-index:5}
       div {overflow: visible;}
       img {
        position: relative;
        &.left {float:left; margin-left: 5%; padding-right: 20px; padding-bottom: 30px; max-width: 400px }
        &.right {float:right; margin-right: 5%;  padding-left: 20px; padding-bottom: 30px;  max-width: 400px}
        &.full { margin:0; width: 100%;  }
       }
}

}

<section class="{{ data.widget.animationType }}">
    {{ apos.area(data.widget, 'areaMain', {
      widgets: {
        'apostrophe-rich-text': {
            toolbar: ['Bold', 'Italic', 'Split',  'Link', 'Unlink']
        },
        'simple-image': {}
      }
    }) }}
</section>

Answer 1

您想浮动整个小部件，而不仅仅是视觉内容 (img)。为您的小部件提供一个自定义 class，它利用一个架构为您自己提供不同的小部件修饰符。

在您的小部件架构中添加

{
  name: 'float',
  label: 'Float',
  type: 'select',
  choices: [
    { label: 'None', value: 'none' },
    { label: 'Left', value: 'left' },
    { label: 'Right', value: 'right' }
  ]
}

然后在lib/modules/simple-image-widgets/index.js

module.exports = {
  construct: function (self, options) {
    self.getWidgetWrapperClasses = function (widget) {
      return ['simple-image--' + widget.float];
    };
  }
};

现在您的整个包装器将有一个知道浮动的 class，控件应该与容器一起使用。

带浮点数的 apostrophe-cms 工具栏

apostrophe-cms toolbar with floats

apostrophe-cms