Эгея и HTML

Эгея и HTML

Граждане эгейцы, очень нужна помощь зала. Требуется вставить в произвольное место эгеевской заметки HTML-код. Когда я вставляю его через эгеевский редактор, он оборачивает теги <img> и <a> в абзацные теги <p> и </p>. Это, естественно, добавляет в вёрстку ненужные переводы строки, в результате чего она разваливается. (С вставляемым HTML-кодом всё ок, я проверял его в валидаторе и если его залить в обход эгейского редактора с линком на используемые CSS, он прекрасно работает на всех браузерах.)

В хелпе Эгеи есть упоминание про дополнительные пользовательские блоки на PHP. Однако, насколько я понимаю, такой блок можно добавлять лишь в заранее определённые автором движка места (напр., начало заметки или конец) и, главное, этот блок будет добавлен во все заметки сразу. Мне же требуется добавить HTML лишь в некоторые заметки, причём так, чтобы эгеевский редактор этот HTML никоим образом не модифицировал. Если вы знаете, как это сделать, пишите, буду очень признателен.


UPD: Пример, поясняющий суть проблемы:

Вот фрагмент кода, который я вставляю в текст заметки в окне эгейского редактора:

<div><a href="all/o-vyraschivanii-2"><img src="files/growing-poster-02.jpg"><div><p>#2: Инициация</p><p>Поиски самоназвания, тайна инициации и дальнейшие приключения тайского перца</p></div></a></div>

После нажатия кнопки «Сохранить изменения» я просматриваю код страницы в браузере и вижу это:

<div><P><a href="all/o-vyraschivanii-2"><img src="files/growing-poster-02.jpg"></P>
<div><p>#2: Инициация</p>
<p>Поиски самоназвания, тайна инициации и дальнейшие приключения тайского перца</p>
</div><P></a></P>
</div>

Заглавными буквами P обозначены ненужные <p>-элементы, принудительно вставленные в код эгейским редактором. Добавление этих P и составляет суть проблемы: из-за них адаптивная вёрстка разъезжается и не работает как задумано.

Поделиться
Отправить
2 декабря   Эгея
5 комментариев
Дима

Может проще подстроить верстку элемента под теги <p> селекторами?

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

Дима, HTML, про который я веду речь, использует дополнительный (мой собственный) CSS-файл, в котором довольно много селекторов. Можешь уточнить, что конкретно имеется в виду — и если можно, с примером?

Дима

Сложно уточнить не видя примера :) Я имел в виду дописать в CSS-файл свойства для встраиваемого элемента, с учётом тега родительского элемента <p> Эгеи.

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

См апдейт с примером.

Сурин Алексей

ХТМЛ
В тексте заметок можно использовать любой ХТМЛ:
<iframe ...> ... </iframe>
В разделе форматирование текста есть это упоминание
https://docs.google.com/document/d/1uLYj2bE2KltgDV8EoeYVbL0Zn1EWuDcFBuoqWPuRack/edit#

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

Алексей, я пробовал вставлять HTML через iframe. Получается редкостное уродство: вставленный HTML отображается внутри фрейма, который не растягивается по всей своей высоте. То есть, он виден в узеньком окошке с полосой прокрутки.

Дима

Проблема в том, что у вас внутри тега <а> очень много элементов, не будем спорить насчёт валидности и высоких материях, но Эгее это явно не по душе и она зачем-то оборачивает ваш закрывающий тег </a> в <p> и все получается супер-криво. Поэтому я на вашем месте убрал бы тег div внутри <a> и сделал бы его блочным как в этом примере: https://jsfiddle.net/q7wg9z26/1/

Ещё мне непонятно, зачем у вас внутри тега <a> тег <p>?

В конечном варианте я бы сделал вот так:
<div>
<a href=«all/o-vyraschivanii-2»>
<img src=«files/growing-poster-02.jpg»>
</a>
<a href=«all/o-vyraschivanii-2»>#2: Инициация</a>
<a href=«all/o-vyraschivanii-2»>Поиски самоназвания, тайна инициации и дальнейшие приключения тайского перца</a>
</div>

И Эгея такой вариант не перекорчевывает, создается только одного родителя перед <a>:
<div>
<p>
<a href=«all/o-vyraschivanii-2»><img src=«/files/growing-poster-02.jpg»></a>
<a href=«all/o-vyraschivanii-2»>#2: Инициация</a>
<a href=«all/o-vyraschivanii-2»>Поиски самоназвания, тайна инициации и дальнейшие приключения тайского перца</a>
</p>
</div>

Ну а дальше в CSS, для задания стилей своим <a>, просто используйте селектор p > a, ну и самой <p> созданной Эгее можно стили присвоить

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

Дима, спасибо за хелп. Буду пробовать, смотреть, что получится.
Отвечаю на вопрос «зачем внутри тега <a> тег <p>»: на самом деле, внутри <a> находится <div> . В нём — картинка и ещё один <div> , в котором содержатся два <p> с разными стилями. Почему они в <div>? Потому что мне нужно, чтобы эти три элемента находились в одном блоке, который целиком был бы ссылкой.

Кстати, а как присвоить стиль <p>-элементу, созданному Эгеей? Его же в редакторе вообще не видно, он виден исключительно в коде страницы?

Дима

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

Рекомендую посмотреть этот пример, все намного проще можно через CSS сделать без лишних оборачиваний: https://jsfiddle.net/q7wg9z26/1/

«как присвоить стиль <p>-элементу, созданному Эгеей?»

Именно конкретному <p> будет сложно что-то присвоить, так как их на странице много, но можно так:
.e2-published > p

Всем <p> внутри класса e2-published присвоить то и то (e2-published это класс элемента с заметкой).

Если этого мало, то можно взять нужный нам <p> через селектор :nth-child() https://www.w3schools.com/cssref/sel_nth-child.asp

Популярное