gpt4 book ai didi

css - 应该如何处理 bbcode 中的换行符?

转载 作者:太空宇宙 更新时间:2023-11-04 12:15:10 25 4
gpt4 key购买 nike

我正在使用 PECL bbcode 扩展来定义一组允许用于论坛的标签。我已经实现了 http://www.bbcode.org 中描述的几乎所有标签。 .

论坛用户已经开始期望当他们在输入字段中换行时,他们的帖子也会换行。我正在努力实现这一目标。

nl2br()方式

nl2br()非常适合让浏览器在用户键入时采用换行符,因为它会找到换行符并抛出 <br />那里的标签使浏览器也换行。但这会给一些更复杂的标记带来麻烦。

例如:

[ul]
[li]list item 1[/li]
[li]list item 2[/li]
[/ul]

结果

<ul><br />
<li>list item 1</li><br />
<li>list item 2</li><br />
<ul>

它会在任何地方抛出空白。出于同样的原因,表格也有类似的问题。此外,任何实际显示空白的标签(例如 <pre><code>code goes here</code></pre> )都会变成双倍行距。恶心。

CSS 方式

CSS 有 white-space在这些情况下可以派上用场的规则。如果我们将所有论坛帖子放在 .bbcode 中元素,然后只包含样式表规则

.bbcode {
white-space: pre-line;
}

然后浏览器将保留换行符、折叠其他空格并换行。这听起来很理想。但是,列表项等仍然会出现双倍行距问题,因为浏览器会在每个 </li> 之后显示换行符。 .

我们可以通过定义以下内容来解决一些问题:

.bbcode {
white-space: pre-line;
}
.bbcode * {
white-space: normal;
}

这减轻了列表和表格中的问题。但是,现在换行符只出现在帖子的根元素中,所以换行符例如表格单元格不起作用。

我该怎么做?方式

我真正想要的是两种效果的结合:

  • 当源代码在所有标签之外换行时,浏览器换行
  • 当源代码换行时浏览器换行不是在 block 级或结构标签关闭或打开之后立即

理想情况下,我认为[li]some\ntext[/li]应该导致两行,[li]sometext[/li]\n应该只会产生一行,并且 [i]sometext[/i]\n应该导致两行。

这样的事情是怎么做到的?或者更确切地说,人们通常在使用 bbcode 的论坛中做什么?我可能会写一个函数,在其中定义所有 <br /> 的情况。应该插入,这有强烈的重新发明许多轮子的味道。

最佳答案

我现在确定的是

nl2br-str_replace方式

$html = nl2br(bbcode_parse($handler, htmlentities($bbcode_string)));
$html = str_replace(
array('</div><br />', '<tr><br />', '</tr><br />', '<th><br />', '</th><br />', '<td><br />', '</td><br />', '<ul><br />', '</ul><br />', '<ol><br />', '</ol><br />', '<li><br />', '</li><br />', '</pre><br />'),
array('</div>', '<tr>', '</tr>', '<th>', '</th>', '<td>', '</td>', '<ul>', '</ul>', '<ol>', '</ol>', '<li>', '</li>', '</pre>'), $html);
return $html;

和 CSS:

.bbcode pre br {
display: none;
}

这是怎么回事?我不是定义我想要换行符的位置,而是定义我知道它们会在哪里但我想要它们的位置。

CSS 防止 pre 中的双倍行距元素(并且您需要添加任何其他从空格中获取换行符的元素)。 PHP 摆脱了由用户在例如之间放置换行符引起的换行符。 [li]stuff[/li]元素。

这很脆弱:如果用户在 [/li] 之后和换行符之前键入一个空格,<br />不会被删除。我或许可以使用正则表达式来查找 [tag][whitespace]<br />但我不认为这是一个大问题。


我现在接受这个答案,因为它是我在过去几天能够想到或找到的最好答案。如果其他人知道更好的解决方案,请发布,我很乐意接受。

关于css - 应该如何处理 bbcode 中的换行符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28778928/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com