How to format user input plain text content (including newline characters) into HTML paragraphs and newline characters?

In website content management, we often encounter such needs: when users input a block of plain text content in the background, it may contain natural breaks and line feeds. We hope that these breaks and line feeds can be correctly rendered as paragraphs in the HTML of the website front-end.<p>Labels) and newline(<br/>Label), rather than simply being clumped together or ignored by the browser.The Anqi CMS provides a very convenient and powerful template filter to solve this problem, allowing plain text content to be presented elegantly on the web page.

Understanding the default appearance of plain text on web pages

Firstly, we need to understand the default handling of newline characters by browsers in plain text. In HTML, a single carriage return newline character (\n) Usually, it is treated as a space by the browser and will not automatically generate a new paragraph or force a line break.Only when two consecutive newline characters appear will the browser visually create a new blank line, but this is still not structured HTML paragraph.This may cause the neat formatting entered by the user in the background to become disordered when displayed on the front end, affecting the reading experience.

Security CMS Solutions: Text Processing Filter

Security CMS Template Engine provides powerful content processing capabilities,linebreaksandlinebreaksbrThese two filters are the key to solving this problem. They can intelligently convert newlines in plain text into tags that comply with HTML standards.

1. UselinebreaksThe filter handles paragraph and newline processing

linebreaksThe filter can intelligently parse plain text content and convert consecutive two newline characters (usually indicating the start of a new paragraph) into HTML's<p>...</p>Paragraph tag. A single newline character will be converted to<br/>Labels, implemented for forced line breaks within paragraphs. This method is very suitable for articles, blog posts, and other content that requires clear paragraph structure.

Example call:

Assuming your plain text content is stored in a variable namedarchive.Contentyou can call it in the template like this:

{{ archive.Content|linebreaks|safe }}

Key points:

• |linebreaks: This is to convert line breaks in plain text to<p>and<br/>的核心过滤器。
• |safe：这个过滤器至关重要。由于linebreaks会生成HTML标签，而模板引擎默认为了安全会转义所有输出的HTML（例如将<with<).|safeThe role of auto is to inform the template engine that this content is safe HTML that can be output directly without escaping. If it is not added|safe, what you see on the page will be<p>...</p>Such original label text.

2. UselinebreaksbrFilter performs forced line break processing

If your requirements are more simple, you just want to convert all line breaks (whether single or consecutive) in the text to<br/>tags without generating separate<p>paragraphs, thenlinebreaksbrThe filter would be a better choice.This style is suitable for those who only want to force line breaks in text without additional paragraph spacing, such as displaying address information, poetry, product specifications, etc.

Example call:

If your content is address information, stored incontact.Addressa variable:

{{ contact.Address|linebreaksbr|safe }}

Key points:

• |linebreaksbr: Convert all newline characters directly to<br/>.
• |safe: It is also indispensable for ensuring the correct rendering of HTML tags.

When to choose which filter?

• Chooselinebreaks:When your content is articles, comments, long descriptions, etc. that require clear paragraph divisions and spacing. It can better simulate traditional article layout.
• Chooselinebreaksbr:When your content is a short list, address, poem, code snippet, or any other text where you only want forced line breaks and not extra paragraph spacing.It provides a more compact display method.

Actual Operation: Content Entry and Template Invocation

To achieve the above effect, when entering content in the Aiqi CMS backend, you need to input the text into the plain text field, ensuring that the content is original and contains no HTML tags automatically added by a rich text editor.Then, find the area in your template file where you need to display this plain text content and apply the above filter.

For example, on the document details page (such asarchiveDetail.html), you may need to display document content or customized plain text fields:

<div class="article-content">
    {% archiveDetail articleContent with name="Content" %}
    {{ articleContent|linebreaks|safe }}
</div>

<div class="custom-text-info">
    {% archiveDetail customInfo with name="YourCustomTextField" %}
    {{ customInfo|linebreaksbr|safe }}
</div>

Precautions

• |safeFilter Security:Use|safeFilter the content carefully, be sure to note the source.It will indicate that the template engine outputs the content as unprocessed HTML.Therefore, please ensure that the source of the text content being processed is reliable. If the content comes from user input and has not been strictly filtered, it is recommended to perform appropriate security checks on the content to avoid potential cross-site scripting (XSS) attack risks.
• Rich Text Editor vs. Plain Text:If the content field you use is itself a rich text editor (such as the powerful editor provided by AnQiCMS), it has already generated a rich text with the content when saving.<p>/<div>Tags such as HTML structure. At this time, it is usually not necessary to uselinebreaksorlinebreaksbrfilter, otherwise it may insert additional HTML structure into the existing<p>or<br/>，resulting in abnormal display of the page.
• Markdown content:The CMS also supports Markdown editor. If your content is input in Markdown format and you want it to be rendered as HTML, the system usually handles it automatically, or you may need to userenderfilters (for example{{ archive.Content|render|safe }}）。This is a different scenario and filter from handling pure text line breaks.

Summary

By flexibly utilizing the features provided by the Anqi CMS,linebreaksandlinebreaksbrFilter, you can easily display user input plain text content in a structured HTML format on the website, whether it is neat paragraph articles or simple forced line break text, it can be perfectly presented.This not only improves the readability of the content, but also ensures the neatness and professionalism of the website layout, making your content operation work more proficient.

---

Common Questions (FAQ)

1. Why did I use it, butlinebreaksFilter, but there is still no paragraph effect on the page, just the text is connected together?答：最常见的原因是你忘记在过滤器链的最后加上 English|safe。如果未添加 English|safe，模板引擎会转义所有由`linebreaks English