Гем Redcarpet добавляет проанализированную уценку за пределы охватывающего диапазона.

В моем приложении Rails у меня есть текстовое поле, в котором я хочу, чтобы люди могли использовать уценку. Драгоценный камень redcarpet отлично работает для целей рендеринга уценки, но добавляет его после охватывающего диапазона. Это портит мой дизайн; верхняя часть абзаца должна появиться между значком «воспроизведение» и значком «карандаш» (так же, как заголовок на этом рисунке):

введите здесь описание изображения

Вот html.erb с вызовом markdown. Как видите, он полностью заключен в тег <span>:

<p class="user_desc">
  <span class="glyphicon glyphicon-play"></span>&nbsp;&nbsp;
  <span class="glyphicon glyphicon-pencil"></span>
  <span id="user_title_text"><%= markdown(@user.description) %></span>
</p>

Вот как HTML отображается с помощью ERb и Redcarpet:

<p class="user_desc">
  <span class="glyphicon glyphicon-play"></span>&nbsp;&nbsp;
  <span class="glyphicon glyphicon-pencil"></span>
  <span id="user_title_text"></span></p>
<p>
  Hi! I started <a href="https://www.startthis.org" rel="nofollow" 
  target="_blank">StartThis.org</a>. My background is in philosophy (Ph.D., 
  Ohio State, 2000). I like ideas and thinking them through. I also like 
  organizing things online, especially educational and reference projects.
</p>
(etc.)

Другими словами, метод markdown называется (и я ожидал, что он будет интерполирован) span#user_title_text, на самом деле он был добавлен после диапазона.

Каков наилучший способ исправить это? Искал похожие проблемы, но не нашел. Я думаю, я мог бы подготовить HTML в виде строки во вспомогательном методе и передать его отдельно в представление (возможно? Нет, я только что попробовал, и он имеет тот же эффект!), но какова наилучшая практика/решение для этого? Извините, если это очевидно, я нуб во всем этом.

Подумав еще немного, учитывая, что предварительная подготовка проанализированного уценки в контроллере имеет тот же эффект, может быть, проблема в том, как rails/ERb выполняет интерполяцию?

ТИА

ОБНОВЛЕНИЕ: обратите внимание на <p> в приведенном выше коде. Это окружало диапазон, который окружал вызов уценки... который генерирует теги <p>!

Также обратите внимание на &nbsp;&nbsp; в приведенном выше коде. После исправления тегов <p> (изменил их на <div>s), благодаря совету Мэтта, я попытался удалить объекты html... и затем это было исправлено. Почему?!

ТИА снова.


ruby-on-rails html markdown redcarpet
person globewalldesk    schedule 01.11.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы смотрите на визуализированный исходный код в инспекторе браузера?

Я думаю, что происходит то, что HTML отображается так, как вы ожидаете, что приводит к чему-то вроде:

<p class="user_desc">
  <span class="glyphicon glyphicon-play"></span>&nbsp;&nbsp;
  <span class="glyphicon glyphicon-pencil"></span>
  <span id="user_title_text"><p>Hello, here is some markdown.</p>

<p>Here is another paragraph.</p>
</span>
</p>

Однако это недопустимый HTML, так как он содержит <p> внутри другого <p>, поэтому браузер исправляет его при анализе. Он делает это, добавляя все необходимые закрывающие теги перед следующим открывающим тегом <p>, и в результате вы видите то, что вы видите в браузере.

Чтобы исправить это, вам нужно убедиться, что ваш шаблон приведет к правильному HTML независимо от того, какую уценку вводит пользователь. В частности, здесь вам нужно изменить окружающий p, а также (поскольку p не допускается в качестве дочернего элемента span) вам нужно будет изменить последний <span>. Замена их обоих на divs может сработать для вас:

<div class="user_desc">
  <span class="glyphicon glyphicon-play"></span>&nbsp;&nbsp;
  <span class="glyphicon glyphicon-pencil"></span>
  <div id="user_title_text"><%= markdown(@user.description) %></div>
</div>

Так как это создает элементы p, которые являются дочерними элементами divs, они остаются действительными и не изменяются браузером.

person matt    schedule 01.11.2017
comment
С вашей помощью я все исправила! Да, я просматривал визуализированный исходный код в инспекторе браузера, который, как я теперь понимаю, менее полезен, чем исходный код. Спасибо за указатели на включение ‹p› в ‹p› и в ‹span›. Итак, я починил эту штуку. Но он все еще не работал - точно такая же проблема. Я не мог понять, почему. Затем я заметил два &nbsp; html-объекта и по наитию попытался их удалить. Это исправило это! - person globewalldesk; 02.11.2017
comment
Исправление <p> было определенно необходимо (я проверял это отдельно). Но с какой стати эти html-объекты могут быть частью проблемы?! Я добавлю больше деталей к своему первоначальному вопросу, и если вы объясните в своем ответе, я обязательно проверю его как правильный. - person globewalldesk; 02.11.2017