How to convert multi-line text content into HTML format for display using newline characters?

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.These contents are 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 it is "squeezed" together, with all the line breaks disappearing. This not only affects the reading experience but also makes the page look disorganized.Auto 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 multiline 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 the 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 that you customize in the 'content model'. In either case, when you enter content in the background and use the Enter key to create a new line, the system saves the standard newline character in the database.\n）。However, HTML browsers default to treating these newline characters as spaces, rather than visual line breaks.Therefore, we need some additional processing to inform the browser that line breaks or paragraphs should be used at these places.

Skilfully utilize built-in filters to implement line breaks and paragraph segmentation

The template engine of Anqi CMS (based on Django syntax) provides powerful filter functions,linebreaksbrandlinebreaksThis 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 characters, without complex paragraph structure,linebreaksbrFilter will be your first choice. It will replace every newline character in the text with a single space.\n) directly into HTML's<br />Label.<br />The purpose of the tag is to force a line break, which is very suitable for address information, short lists, poetry, or text that does not require complex paragraphs.

For example, your multi-line text content is as follows:

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

In the template, you can call and apply filters 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 the content to be presented in a more semantic and structured manner, such as each natural paragraph being<p>enclosed in tags, and the individual line breaks within the paragraph are still preserved as<br />so thatlinebreaksThe filter would be a better choice. It would wrap consecutive text blocks (separated by empty lines) in<p>tags, and convert the newline characters between non-empty lines within a paragraph to<br />This is very suitable for scenarios that require clear paragraph division, such as articles and product introductions.

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

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

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

In the template, you can call and apply filters 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 tips: Do not forget.|safeFilter!

No matter which one you uselinebreaksbrOrlinebreaksThese filters will generate HTML tags (<br />or<p>）。Security CMS template engine, for safety, defaults to escaping all output content to HTML entities. This means that the tags might be displayed as<br />or<p>标签可能会被显示为<br />or<p>This is rather than the newline or paragraph that the browser actually parses.

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

Advanced methods: Using Markdown to achieve more rich formatting.

除了上述过滤器，如果您的内容编辑习惯使用Markdown语法，并且需要更丰富的格式化（如标题、列表、代码块等），安企CMS也提供了强大的Markdown编辑器支持。

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