панель инструментов apostrophe-cms с поплавками - PullRequest
Новая
       8

панель инструментов apostrophe-cms с поплавками

0 голосов
/ 24 августа 2018

Я собираю сайт с апострофом, однако я подошел к одному из макетов, где он просто не очень хорошо играет.

Контент представляет собой простую смесь pи теги img (плавающие влево или вправо)

Панели инструментов для изображений, плавающих влево, в порядке, но панель инструментов для любых плавающих справа изображений расположена на изнаночной стороне документа.

Есть ли хороший способ решить эту проблему, не создавая компоновку другим способом?

В качестве альтернативы я мог бы использовать редактор форматированного текста, однако элемент изображения в модуле форматированного текста позволяет толькоиспользование изображения из URL, и не включает в себя способ загрузки изображения непосредственно в систему (что я вижу).

Спасибо за вашу помощь!

Пример скриншота происходящего. 

  &#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>

1 Ответ

0 голосов
/ 26 августа 2018

Вы хотите разместить весь виджет, а не только визуальный контент (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];
    };
  }
};

Теперь у всей вашей обёртки будет класс, который знает, что он должен плавать, элементы управления должны идти с контейнером.

...