Эгея и HTML #2

Эгея и HTML #2

Пару недель назад я писал о досадной проблеме при вставке HTML-кода в Эгею. Суть её в том, что эгейский редактор принудительно добавляет в ваш HTML дополнительные абзацные теги <p> и </p>. Если вёрстка простая, это может быть незаметно, но если она чуть посложнее, да ещё и адаптивная, то в результате этих непрошенных правок она может прийти в полную негодность.

Поскольку варианты, предложенные в комментах, задачу не решили (тем не менее, большое спасибо авторам за них!), а поддержки нет, сегодня я специально инвестировал пару часов времени в эксперименты с эгейским редактором, пытаясь с помощью брутфорсного перебора вычислить, в каких конкретно случаях он вставляет свои [censored] абзацные теги, а в каких нет.

Так вот, похоже, мне удалось найти правильный ответ. Эгейскому редактору зачем-то нужно, чтобы каждый ваш тег <img> (т. е. картинка, которую вы вставляете не через drag-n-drop, а в виде ссылки на файл), непременно был завёрнут в теги <p> и </p>. Другие теги, а также символы перевода строки и пробелы его не волнуют. Поэтому если вы вставляете в эгейский редактор

<img href="picture.jpg">

и нажимаете кнопку «Сохранить», то на выходе, в коде страницы, вы получите вот это:

<p>…<img href="picture.jpg">…</p>

Примечательно, что эти добавочные <p> и </p> иногда могут оказаться довольно далеко от вашей картинки. Почему — не знаю, но думаю, что это зависит от синтаксиса вставляемого HTML-кода.

А теперь, Фёдор, о главном. Чтобы обойти эту [censored] редактуру, нужно подсунуть эгейскому редактору то, что он просит. То есть, заранее обернуть каждый ваш <img> в теги <p> и </p>.

В чём же тогда разница, спросите вы? Чем это решение отличается от расклада по умолчанию, при котором эгейский редактор самостоятельно делает то же самое? Отвечаю: разница в том, что когда вы сами оборачиваете ваши <img> в теги <p> и </p>, вы можете поместить их в достаточно произвольном месте, например, вынести их за пределы <div>-контейнера — туда, где лишние абзацные отступы не навредят адаптивной вёрстке:

<p>…<div><img href="picture.jpg"></div>…</p>

К такому коду у эгейского редактора уже не возникает никаких претензий, соответственно, ваш код будет оставлен в неприкосновенности.

Итого

1) Эгейскому редактору требуется, чтобы каждый ваш <img> был завёрнут в теги <p> и </p>.

2) При этом не обязательно, чтобы теги <p> и </p> находились вплотную к <img> : они могут быть размещены достаточно далеко.

3) Чтобы скомпенсировать избыток высоты, вызванный добавлением лишнего элемента <p>, можно снабдить его стилем с отрицательным нижним полем, равным высоте одной строки:

<p style="margin-bottom: -1em;">…</p>


UPD 20.12.2019: Как выяснилось в ходе дальнейшего тестирования, редактор оборачивает в абзацные теги не только <img>, но и некоторые другие теги (см. комментарии).

UPD 02.01.2020: Написал Бирману. Ответ от разработчика получен, баг признан.

UPD 20.06.2020: Воз и ныне там…

Поделиться
Отправить
 108   9 мес   Эгея
7 комментариев
Олег Горбунов 9 мес

Строго говоря, параграф <p> — инлайн-элемент, поэтому при выносе его наружу от блочного <div> происходит немного другое: параграф считается просто закрытым в месте начала нового блочного элемента (теги без закрывающих тегов разрешены в html5) а закрывающий </p> становится осиротевшим, и просто выкидывается. Формально, это формирует структуру <p/><div/> Это можно проверить, скажем, на таком примере, проинспектировав получившееся дерево в инспекторе браузера: https://gist.github.com/gorbunov/885ccb8f674cd809c89c6d6f92581a2c

Лишний отступ тоже возникает немного по другой причине: in-flow инлайн элементы (параграфы, например) схлопывают марджины между собой когда идут подряд: https://css-tricks.com/what-you-should-know-about-collapsing-margins/

Мало ли, вдруг кому-то интересно окажется)

Александр Токарев 9 мес

Безусловно, интересно. Но Олег, вы уверены, что параграф — это инлайн (т. е. строчный) элемент? По моим сведениям, параграф <p> — один из самых ярких представителей блочных (block) элементов. Если, конечно, не превращён в строчный с помощью CSS-свойства display:inline.
С помощью «margin-bottom: -1em» я пытаюсь убрать не поля абзаца (которые, действительно, схолпываются с верхним полем последующего блочного элемента), а вертикальное пространство, равное высоте одной строки, появившееся вследствие принудительного добавления этого лишнего <p>.

Игорь 9 мес

Если вы уже полезли в дебри, то посмотрите как работает Neasden (your_blog/system/neasden/neasden.php) и его расширения. Там можно увидеть и подредактировать, как обрабатывается текст, ссылки и прочее.

Александр Токарев 9 мес

Спасибо, Игорь. Увы, не смогу воспользоваться вашим советом, поскольку я не программер и абсолютно ничего не понимаю в PHP. Поэтому — открыл, посмотрел и закрыл от греха подальше. Впрочем, если вы разбираетесь, может, предложите свой вариант, где там чего можно подкрутить, чтобы Эгея не приписывала к img свои абзацные теги?

Игорь 9 мес

Можно попробовать такое решение в лоб) https://prnt.sc/qdgolv
Вроде работает.
Это файл .../system/neasden/neasden.php

Александр Токарев 9 мес

Игорь, большое спасибо! Для непрограммеров типа меня совершенно необходимо краткое пояснение :)

  1. Это neasden из Эгеи версии 2.8 ? (У меня-то Эгея 2.7)

2. Фрагмент кода, выделенный красной рамкой, — это изменения оригинального кода neasden (т. е. код был, но вы его исправили) или полностью новая вставка-дополнение в него (т. е. этого куска там вообще не было)?

  1. В переводе на человеческий язык, что конкретно делает этот фрагмент кода?
Игорь 9 мес

1) Да, это фрагмент из моей версии 2.8, но думаю там не сильно поменялось что-то.
2) Это уже измененный рабочий фрагмент, то что закоментировано ниже — так было.
3) Как было: скрипт брал строку и оборачивал ее передаваемым тегом. Стало: если в строке нет «<img», то есть ручная вставка картинки, то оборачиваем тегом, как раньше, если такой текст есть — то не надо.

Александр Токарев 9 мес

Попробовал переписать ваш код со скриншота и вставить в свой neasden. Получил ошибку парсинга, сайт перестал грузиться. Можете выложить или прислать neasden с вашей доработкой?

Игорь 9 мес

Скорее всего где-то скобку забыли.
https://mopsicus.ru/neasden.php.zip

Александр Токарев 9 мес

Игорь, я попробовал. Ваш код работает! :) Спасибо большое!

Однако, похоже, Нисден не так прост. При дальнейшем изучении выяснилось, что он оборачивает в абзацные теги не только IMG, но и некоторые другие теги — напр., открывающий <a> и закрывающий </a>, в некоторых случаях — тег <aside>. То есть, иногда оборачивает, а иногда нет. По какому принципу — остаётся только гадать.
Моя гипотеза такова: Нисден находит тег, который ему кажется невалидным или потерянным (stray tag) и заключает его в абзацные теги, — поскольку думает, что это не тег, а обычный текст.
Так или иначе, чтобы это проверить, нужна ваша помощь. Можно ли скорректировать ваш код, чтобы запретить Нисдену оборачивать в абзацы не только IMG, но вообще все, любые открывающие и закрывающие теги?

Игорь 9 мес

Можно попробовать, но я такой себе пхпшик если честно:). Попробую сделать, если получится, напишу вам.
А лучше напишите Бирману, он отвечает.

Олег Горбунов 9 мес

Да, извиняюсь, пока пытался перефразировать комментарий, поклеилось вовсе не то, что хотел написать. Да, он блочный, конечно, но участник phrasing-content, и теги, формирующие новые блоки текста, обрывают его. Список тегов, которые это делают, можно тут: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p (Tag Omission)

Александр Токарев 9 мес

Спасибо за уточнение, мне так и показалось, что произошла опечатка )

Популярное