How to convert multi-line text content into HTML format using a newline character?

In content management, we often encounter situations where we need to enter multi-line text, such as product details, service introductions, company profiles, or contact information.This content is segmented by pressing the Enter key when editing in the background.However, when this content is directly presented on the website's front end, you may find that they are crowded together, with all carriage returns disappeared, which not only affects the reading experience, but also makes the page look disorganized.AnQi CMS is an efficient enterprise-level content management system, of course, it takes this into consideration and provides a variety of elegant solutions, allowing your multi-line text content to be displayed as expected in a beautiful HTML format.

Deep understanding of the storage and display of multi-line text content

In AnQi CMS, multi-line text content usually comes from two places: one is the "document content" field of core content such as articles, products, or single-page details; the other is the "multi-line text" type field you customize in the "content model". In any case, when you enter content in the background and press the Enter key to wrap the line, the system saves the standard newline character in the database (\nHowever, web browsers default to treating these newline characters as spaces, rather than as visual line breaks.Therefore, we need some additional processing to tell the browser where to break or segment.

Skillfully use built-in filters to implement line breaks and paragraph breaks

The Anqi CMS template engine (based on Django syntax) provides powerful filter functions, among whichlinebreaksbrandlinebreaksIt is a tool specifically designed for this kind of scenario.

1. Simple and direct line break: linebreaksbrFilter

If you just want to make the text content simple line breaks according to the input newline character, without needing complex paragraph structure, thenlinebreaksbrThe filter will be your first choice. It will convert every newline character in the text into HTML's\n) directly to HTML's<br />.<br />The tag is used to force a line break, it is very suitable for address information, short lists, poems, or text that does not require complex paragraphs.

For example, your multiline text content is as follows:

公司地址：某某市某某区某某街道123号
联系电话：138XXXXXXXX
电子邮件：[email protected]

In the template, you can call and apply the filter like this:

{# 假设archive.Description是您的多行文本内容字段 #}
<div>
    {{ archive.Description|linebreaksbr|safe }}
</div>

After rendering, the page will display as:

<div>
    公司地址：某某市某某区某某街道123号<br />
    联系电话：138XXXXXXXX<br />
    电子邮件：[email protected]
</div>

2. More semantic paragraph segmentation:linebreaksFilter

If you wish to present the content in a more semantic and structured manner, such as wrapping each natural paragraph with<p>tags, and the single newline within the paragraph remains preserved as<br />thenlinebreaksThe filter would be a better choice. It would wrap continuous text blocks (separated by blank lines) in<p>tags, while converting newline characters between non-empty lines in paragraphs to<br />This is very suitable for articles, product introductions, and other scenarios that require clear paragraph segmentation.

For example, your multiline text content might look like this:

这是一段关于公司文化的长文本。
它包含了一些核心价值观和使命。

这是另一段关于产品特性的描述。
我们将详细介绍产品的优势和功能。

In the template, you can call and apply the filter like this:

{# 假设archive.Content是您的多行文本内容字段 #}
<div>
    {{ archive.Content|linebreaks|safe }}
</div>

After rendering, the page will display as:

<div>
    <p>这是一段关于公司文化的长文本。<br />它包含了一些核心价值观和使命。</p>
    <p>这是另一段关于产品特性的描述。<br />我们将详细介绍产品的优势和功能。</p>
</div>

Key reminder: Do not forget.|safeFilter!

No matter which one you uselinebreaksbrOrlinebreaksThese filters will generate HTML tags (<br />or<p>）。An enterprise CMS template engine, for security reasons, defaults to escaping all output content as HTML entities. This means that the generated<br />or<p>tags may be displayed as<br />or<p>Instead of the actual line breaks or paragraphs parsed by the browser.

To avoid this situation, you need to add it at the end of the filter chain.|safeA filter explicitly tells the template engine that this content is safe, does not need to be escaped, so that the browser can correctly parse and render HTML tags. In the above example,|safeThe use is indispensable.

Advanced method: Using Markdown to achieve richer formatting.

In addition to the above filters, if you are accustomed to using Markdown syntax for content editing and need more rich formatting (such as headings, lists, code blocks, etc.), Anqi CMS also provides a powerful Markdown editor support.

You can enable the Markdown editor in the "Global Settings" -> "Content Settings" on the backend. When you enter in Markdown format on the backend