Заменить теги абзацев из абзацев только одним плавающим изображением с этим изображением - PullRequest
Новая
       21

Заменить теги абзацев из абзацев только одним плавающим изображением с этим изображением

0 голосов
/ 06 января 2020

Я пытаюсь компенсировать мой WYSIWYG, который окружает отдельные изображения тегом абзаца, когда он не является частью абзаца другого содержимого. Это ломает мои поплавки. Я хотел бы удалить теги абзаца, содержащие only a single image и только если изображение имеет встроенный атрибут css float в теге img. Я видел примеры, но, похоже, они не предназначены именно для этого и могут нарушить остальную часть моего контента.

Я использую Modx, но jQuery, вероятно, будет проще (я запускаю v3), чем создание Пользовательский модификатор вывода в php.

Итак: 

<p><img src="uploads/image.jpg" style="float: right; width: 235px; height: 225px; margin: 0px 0px 10px 10px;" alt="Description" width="235" height="225" class="d-none d-md-block"></p>

Становится: 

<img src="uploads/image.jpg" style="float: right; width: 235px; height: 225px; margin: 0px 0px 10px 10px;" alt="Description" width="235" height="225" class="d-none d-md-block">

1 Ответ

4 голосов
/ 07 января 2020

Это был бы быстрый и легкий выстрел, используя простую ваниль Javascript: 

[...document.querySelectorAll('p')] // get all <p> as an array using spread syntax
  .filter(p => // so we can use array filter function on the list 
    p.children.length === 1 // only those that have exactly one child element
    && // AND
    p.firstElementChild.tagName === 'IMG' // which must be an <img>
    && // AND
    p.firstElementChild.style.float // and needs to have an inline float
  )
  .forEach(p => p.replaceWith(p.firstElementChild)) // and replace each p with its only child
p {
  border: 10px solid red;
}
<p>
  <img src="uploads/image.jpg" style="float: right; width: 235px; height: 225px; margin: 0px 0px 10px 10px;" alt="Description" width="235" height="225" class="d-none d-md-block">
</p>

<br />

<p>
  <img src="uploads/image.jpg" style="float: right; width: 235px; height: 225px; margin: 0px 0px 10px 10px;" alt="Description" width="235" height="225" class="d-none d-md-block">
  <span>More than only the img</span>
</p>

<br />

<p>
  <img src="uploads/image.jpg" style="width: 235px; height: 225px; margin: 0px 0px 10px 10px;" alt="image not floating" width="235" height="225" class="d-none d-md-block">
</p>

<br />

<p><b>No img inside p</b></p>
...