How to automatically convert multi-line text input by users into HTML paragraphs in AnQi CMS?

In Anqi CMS, automatically converting user input multiline text to HTML paragraphs is a very common requirement for content display.Whether it is the main content of the article, the category description, or the custom multi-line text field, we hope to maintain the text formatting structure so that it can be presented in a more friendly HTML paragraph format on the web.AnQi CMS provides various flexible ways to achieve this goal, mainly depending on the way you input your content.

Use the built-in Markdown editor to process rich text content

Many core content input areas of AnQi CMS, such as document content, category content, single page content, and tag descriptions, are built-in with rich text editors.In the background configuration, you can also choose to enable the Markdown editor mode (usually in "Global Settings" -> "Content Settings").<p>Paragraph tags.

When calling this type of content in a template, to ensure that Markdown can be correctly rendered as HTML, you need to pay special attention to adding the corresponding template tags.render=trueparameters. For example, when you call the article content on the document detail page, you can usearchiveDetailtags, and cooperaterender=trueto ensure that its Markdown format is correctly parsed:

{# 默认情况下，如果内容是通过Markdown编辑器输入的，render=true会将其转换为HTML #}
<div>
    {%- archiveDetail articleContent with name="Content" render=true %}
    {{articleContent|safe}}
</div>

Hererender=truetell the Anqi CMS to processContentField performs Markdown to HTML conversion. At the same time,|safeThe filter is crucial, it indicates that the template engine will treat the output content as safe HTML and no longer escape it. If not|safe, such as HTML tags (like<p>It may be displayed as text instead of being parsed by the browser.

Similarly, for category content, single-page content, and tag content, you can use tags separately and follow the samecategoryDetail/pageDetailandtagDetailtags and follow the samerender=trueand|safePattern.

Convert a custom multiline text field to an HTML paragraph.

In addition to the built-in rich text area, you may also customize some "multi-line text" fields in the content model to collect users' plain text input, such as product feature lists, contact information descriptions, etc.These fields are usually not processed through a rich text editor, they only save the original multi-line text.In this case, the template filter of Anqi CMS can come in handy.

You can uselinebreaksorlinebreaksbrFilter to automatically convert line breaks in text to HTML tags.

1. linebreaksFilterThis filter will convert a single newline character to<br/>tags, while converting two or more consecutive newline characters (usually indicating a new paragraph) to<p>and</p>A paragraph enclosed in tags. This is the closest way to meet our daily 'multi-line text to HTML paragraph' needs.

   Suppose you have a custom field named in your content model.custom_descriptionYou can call and convert it like this in the template:

   {# 假设'custom_description'是您自定义的多行文本字段名 #}
   <div>
       {%- archiveDetail customDesc with name="custom_description" %}
       {{customDesc|linebreaks|safe}}
   </div>
   

2. linebreaksbrFilterIf you just want to simply convert each newline character to<br/>tags without generating<p>paragraph tags, thenlinebreaksbrThe filter will be more suitable. It will replace all newline characters with<br/>.

   {# 假设'custom_notes'是您自定义的另一个多行文本字段名 #}
   <div>
       {%- archiveDetail customNotes with name="custom_notes" %}
       {{customNotes|linebreaksbr|safe}}
   </div>
   

SelectlinebreaksOrlinebreaksbrdepending on the paragraph structure you want to display on the page. Typically,linebreaksit is more in line with the semantics of standard HTML paragraphs.

Summary

The AanqiCMS helps you convert multi-line text to HTML paragraphs in two main ways: for content entered through the built-in rich text/Markdown editor, its built-in rendering mechanism combinesrender=trueParameters can be implemented; while for plain text obtained from the custom 'multi-line text' field, it can be converted throughlinebreaksorlinebreaksbrthe filter. In both cases, be sure to use them in conjunction.|safeA filter to ensure that HTML content is correctly parsed and displayed by the browser.By these methods, your multi-line text content will be elegantly presented on the website in clear, structured HTML paragraph form.

Frequently Asked Questions (FAQ)

Q1: Why are HTML tags (such as<p>) not parsed and displayed directly after converting multiline text in the template?

A1: This is usually because you did not use it when outputting the template|safeFilter.The SafeCMS defaults to escaping all content output through template tags with HTML entities for security purposes, to prevent cross-site scripting attacks (XSS).<p>Will be escaped to<p>. When you are sure that the output content is safe and needs to be parsed as HTML by the browser, be sure to add the variable after it|safesuch as{{myContent|linebreaks|safe}}.

Q2: Can I uselinebreaksfilters with other filters?

A2: Of course you can.The AnQi CMS template filter supports chained calls, and you can connect multiple filters as needed.{{myContent|truncatechars:100|linebreaks|safe}}It should be noted that the order of the filters may affect the final result, please arrange the call sequence according to your needs.

Q3: How can I remove only the blank lines from the text without converting it to an HTML paragraph?

A3: If your goal is simply to remove blank lines from multiline text without generating any HTML tags, thenlinebreaksandlinebreaksbrThe filter may not be **the choice. For pure text processing, you may need to consider usingreplaceA filter to replace specific newline patterns, or to clean up at the background processing level. For example, you can use{{myContent|replace:"\n\n, "|safe}}(Replace two consecutive newlines with a space) or{{myContent|replace:"\n,"}}(Replace all newline characters with spaces or empty strings). The specific replacement pattern needs to be adjusted according to the specific representation of blank lines in your text.