带浮动的撇号-cms 工具栏

Question

我一直在用撇号组合一个网站，但是我发现其中一种布局不能很好地发挥作用。

内容是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)。为您的小部件提供一个自定义类，该类利用一个架构为您自己提供不同的小部件修饰符。

在您的小部件架构中添加

{
  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];
    };
  }
};

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