Does the `linebreaks` filter affect the display of images or links embedded in multiline text?

In the template development of AnQi CMS,linebreaksA filter is a commonly used tool, mainly used to convert line breaks in plain text content of multi-line text into HTML paragraph tags (\n) into HTML paragraph tags (<p>) and line break tags (<br/>)，Thus, better to present content on the web. So, when multiline text includes images or links and other HTML tags, linebreaksHow will the filter handle, and will it affect their normal display? This is a concern for many content operators and template developers.

To understand deeplylinebreaksHow it works and its impact on embedded HTML, we first need to clarify one of the core features of the AanQi CMS template engine:Automatic escaping.To ensure website security and prevent issues such as cross-site scripting attacks (XSS), Anqi CMS defaults to escaping all variable content output in templates.<img src="..." />or<a href="..."></a>Such HTML tags, and you use them directly{{ content | linebreaks }}Then these tags in<It will be converted into<,>It will be converted into>Commas are also escaped, which ultimately leads to images and links not rendering normally, but instead appearing as plain text code on the page.

Therefore, when you are dealing with text content that includes images or links and other multimedia elements,it must be used in conjunction.|safeFilter.|safeThe filter is used to explicitly inform the template engine that this content is "safe", and does not require HTML entity escaping. It can be directly output as HTML code. It is only marked as|safeafter,linebreaksfilter can normally perform its function of processing line breaks without damaging the original HTML structure.

When|safeAfter the filter is applied correctly,linebreaksThe filter focuses on processing the line break logic in the text. Its specific behavior is:

1. Converts two or more consecutive line breaks (i.e., blank lines) into HTML paragraph tags<p>...</p>.This means that if you leave a blank line before or after an image or link, it may be wrapped by respective<p>tags or wrapped together with adjacent plain text content inside a<p>in the tag.
2. Convert a single newline (\n) to an HTML newline tag<br/>.If an HTML image or link tag is adjacent to one or more newline characters in plain text, these newline characters will be converted to<br/>Thus, it produces a visual line break on the page.

For example, let's assume you have some content like this:

这是一段文本。

<img src="path/to/image.jpg" alt="示例图片">
这是一个链接：<a href="https://en.anqicms.com">安企CMS官网</a>
这是图片和链接之后的文本。

新段落开始。

When this content is output through{{ content | safe | linebreaks }}The general effect will be something like this:

<p>这是一段文本。</p>

<p><img src="path/to/image.jpg" alt="示例图片"><br/>
这是一个链接：<a href="https://en.anqicms.com">安企CMS官网</a><br/>
这是图片和链接之后的文本。</p>

<p>新段落开始。</p>

This example shows thatlinebreaksThe filter itself does not modify<img src="..."/>or<a href="..."></a>the internal structure or attributes of these tags. It only adds line breaks around these HTML elements based on the text.<p>and<br/>Labels, to achieve paragraph and line break layout that is more in line with web page reading habits.

Of course, AnQi CMS also provides other similar filters, such aslinebreaksbr.linebreaksbrwithlinebreaksThe difference lies in that it will only convert newline characters to<br/>and will not add anything extra<p>Label.This may be more applicable to those who wish to have finer control over paragraph structure, or whose content has already been generated with paragraph tags through other means (such as rich text editors).

In summary,linebreaksThe filter will insert<p>and<br/>Tags to format the display of multiline text. When images or links and other HTML tags are embedded in the text, as long as youuse correctly|safeFilterto avoid automatic escaping,linebreaksIt will not destroy the display function of these HTML tags, but will insert paragraph and line break tags around them in an "adaptive" way, thereby affecting their layout on the page.

Frequently Asked Questions (FAQ)

1. Why is it that even though I have inserted images into my article content, but after usinglinebreaks, the images do not display and only a string of code is visible?

This is likely because you forgot to uselinebreaksbefore the filter|safeFilter. The AnQi CMS, for security reasons, defaults to escaping all output HTML content, converting</>to</>. If you do not|safeTell the system that these HTML is safe, and it will escape the tags of images or links as plain text, so they will not display normally. The correct usage is usually{{ content | safe | linebreaks }}.

2.linebreaksandlinebreaksbrWhat are the differences between the filters? Which one should I choose?

The main difference lies in the way they handle paragraphs.linebreaksThe filter will convert consecutive two or more newline characters (i.e., blank lines) into HTML's<p>...</p>paragraph tags, and a single newline character into<br/>HoweverlinebreaksbrThe filter is relatively simple, it will only convert all newline characters to<br/>tags, it will not add them automatically<p>tags. If you want the content to automatically form an HTML paragraph (<p>Label), and empty lines can be separated into new paragraphs, thenlinebreaksIs a better choice. If you prefer to manually control paragraphs (for example, the content is already generated by a rich text editor and comes with<p>Label), or perhaps a simple inline break is more suitable.linebreaksbrMaybe this is more appropriate.

3. If my article content is edited through a rich text editor and it contains complex image layouts, I should also uselinebreaksfilter?

Content edited through a rich text editor typically generates structurally complete and styled HTML code including<p>tags,<img>Tags and various styles. In this case, using againlinebreaksFilters may introduce additional<p>and<br/>Tags can cause layout chaos or not meet expectations. Usually, the content output by rich text editors is used directly when output.|safeFilter it out (for example){{ rich_text_content | safe }}), no need to use it again.linebreaksHandle the line breaks of plain text, because its content is no longer plain text. However, under a few special requirements, if the HTML output of a rich text editor still needs to handle the line breaks of plain text, it can be considered to be verified in a test environment.|safeand|linebreaksThe effect of combining use.