How to automatically convert line breaks in the multi-line text entered by the user to HTML's `
` tag?

When using AnQi CMS to publish content, we often encounter such situations: when entering text in the content editing box, if it contains multiline information, but when displayed on the front-end page, these line breaks disappear, causing the text to be cramped together and resulting in a poor reading experience. This is usually because HTML defaults to replacing line breaks in text with\n) is treated as a regular space. However, Anqi CMS provides a very convenient template filter that can help us easily solve this problem, allowing multiline text to maintain its original formatting on the web page.

Core function:linebreaksbrFilter

When we need to convert the newline characters in the multi-line text entered by the user (\n) directly to HTML's<br>tags in the template,linebreaksbrThe filter is our preferred tool. Its function is very direct, which is to replace each line break in the text with a line break tag that the browser can recognize.<br/>.

The method of use is very intuitive, just add it after the variable you need to process|linebreaksbrYou can. For example, if you have a variable calledarchiveContentIt contains the multi-line text content you fetch from the backend, so you can use it in the template like this:

{# 假设 archiveContent 是从文档内容中获取的多行文本变量 #}
{{ archiveContent|linebreaksbr|safe }}

Please note, in addition to|linebreaksbrbesides, we also added an extra one|safeFilter. This is a very critical step becauselinebreaksbrThe filter will generate HTML tags (<br/>）。To ensure that the newly generated HTML tags are parsed correctly by the browser and not displayed as plain text (for example, displayed directly), we must use<br>）to display them on the page, we must use|safeTell the template engine that this content is safe HTML and can be output as is.

We usually display the multi-line content entered by users in the background text editor on the front page in this way, to maintain the original layout of the content.

UnderstandlinebreaksFilter: Another option

exceptlinebreaksbr, Anqi CMS also provideslinebreaksThis filter works similarly, but it goes further, using text segments (consisting of consecutive non-empty lines, separated by blank lines) to<p>Enclosed in tags, and with line breaks inserted within paragraphs<br/>.

If you want multiline text to be presented in paragraph form, and with<p>the default styles and semantics brought by the tags, thenlinebreaksIt would be a more suitable choice. For example, it would convert:

第一行文本
第二行文本

第三行文本

to:

<p>第一行文本<br/>第二行文本</p><p>第三行文本</p>

If you simply want each newline to become a single<br/>without any additional<p>tag wrapping, thenlinebreaksbrMore concise, more in line with direct conversion and line break requirements.

UselinebreaksThe way the filter is alsolinebreaksbrsimilarly, it also requires|safeCoordinated:

{{ archiveContent|linebreaks|safe }}

Applied in Anqi CMS template in practice

These two filters belong to the built-in 'Filter' function of the Anqi CMS template system, which means they need to be in your template file (usually.htmlfile, such as the article detail page'sdetail.htmlCalled within, acts on any variable containing multiline text that you retrieve from the background.

For example, when displaying document details, you may obtain the article content througharchiveDetailtags:

{# 假设您正在展示一篇文档的详情页，并且文档内容变量名为 articleContent #}
{% archiveDetail articleContent with name="Content" %}
<div class="document-content">
    {# 这里应用过滤器，将用户输入的换行符转换为 <br/> 标签 #}
    {{ articleContent|linebreaksbr|safe }} {# 或根据需求使用 |linebreaks|safe #}
</div>
{% endarchiveDetail %}

By flexible applicationlinebreaksbrorlinebreaksFilter, users of Anqi CMS can easily keep the text content input on the back-end beautiful and well-formatted on the front-end page, greatly enhancing the display effect of the website content and the user reading experience.This is not only the optimization of technical details, but also an important aspect that cannot be ignored in content operation.

Frequently Asked Questions (FAQ)

1. Why did I uselinebreaksbrorlinebreaksAfter, the newline character still doesn't work, or the page directly displays it.<br>The text of the label?

This common problem may occur if you forget to add after using these filters.|safe.|safeThe filter tells the template engine that this content is safe HTML and does not need to be escaped. If it is missing|safe, the template system will escape it for safety reasons<br>such HTML tags to escape as<br>This causes the text to be displayed directly on the page without the actual line break effect. Please make sure that your code includes|safe.

2.linebreaksbrandlinebreaksHow should I choose between these two filters?

Choose which filter to use depends on the final layout effect of the multiline text on the page.

• If you just want to make each newline character entered by the user simply become an HTML line break tag (<br/>), without adding additional paragraph tags (<p>Thenlinebreaksbrit is a more concise and direct choice.
• If you want to split multiline text automatically into HTML paragraphs (<p>tags), and add a newline within these paragraphs<br/>thenlinebreaksIt would be a better choice, it can provide stronger structured semantics for your content.

3. Besides the article content, where else can these filters be used?

Any that is obtained from the Anqi CMS backend and is expected to retain line breaksMultiline text fieldCan use these filters. This includes but is not limited to:

• Article or product modelsDescription(Introduction) field.
• A 'Multi-line text' field defined in the custom content model.
• Single page management (pageDetail) in theContentfield.
• Even some comment forms (guestbook)Submit content, if needed, retain user input line breaks.In short, for any content entered by the user in the multi-line text box in the background, if you encounter a problem with missing line breaks when displayed on the front end, you can consider applying these filters.