In AnQi CMS, we often use a powerful rich text editor to create articles with pictures and text. At the same time, the AnQi CMS template engine also provides various filters for flexible content processing, among whichlinebreaksThe filter is used to process text line breaks. Then, when the content generated by the rich text editor goes throughlinebreaksthe filter processing, will they conflict with each other?

To answer this question, we need to first understand the working principles of these two functions.

What is the content of the Anqi CMS rich text editor?

The AnQi CMS built-in rich text editor, such as the content editor used when publishing documents, whose core function is to automatically convert and store the text, images, links, and other elements we input into HTML format. Even if we just input a few lines of text without any formatting, the editor usually defaults to using each paragraph of text with<p>Enclose in tags or insert at a newline<br/>Tags to ensure content is properly segmented on the web

In addition, Anqi CMS also supports Markdown editor.If Markdown mode is enabled, then what we input is Markdown syntax, but the system will automatically convert Markdown to HTML when displaying content.In any case, what ultimately appears in front of the template engine is a structured content that already contains HTML tags.

linebreaksWhat does the filter do?

linebreaksThe design concept of the filter is to convert the natural line breaks in plain text (i.e., the line breaks we generate by pressing the enter key in the text editor) into HTML tags that the web page can recognize. According to the Anqi CMS document description,linebreaksThe filter will replace single newline characters with<br/>tags, and replace consecutive newline characters (indicating paragraph spacing) with a pair of<p>...</p>tags. Another similar filterlinebreaksbrIt is simpler, it simply replaces all newline characters with<br/>tags without adding<p>.

This filter is very suitable for processing plain text data from simple text input boxes (such as user comments, review content), which does not contain any HTML format, but also wants to retain the original paragraph and line break effects on the web page.

The root of conflict: HTML nesting

Now let's go back to the core issue: the content of the rich text editor goes throughlinebreaksWill filtering cause a conflict?

The answer is: it usually causes conflicts and should be avoided.

The root cause of the conflict is: the content output by the rich text editor is already a paragraph.Formatted HTML code. This HTML code itself includes paragraph (<p>), line break (<br/>) and other tags. If we take this already formatted HTML as input, pass it tolinebreaksThe filter processes it, the filter will try again to find newline characters and insert HTML tags.

Imagine the following scenario: A rich text editor's content might look like this:

<p>这是第一段文字。</p>
<p>这是第二段文字。<br>
这里是第二段的换行。</p>

If this content is applied againlinebreaksThe filter will convert the line breaks back into HTML tags. This may result in:

  1. Tag nesting errors:The filter may be applied to the existing<p>Insert again inside the tag<p>Tags, forming invalid or redundant HTML structures, such as<p><p>...</p></p>.
  2. Rendered in chaos:The browser may encounter unpredictable rendering results when parsing these non-standard HTML, which may cause layout confusion, style failure, or abnormal content display.
  3. Performance degradation:The browser takes extra time to correct or parse this incorrect HTML, which may affect page loading and rendering performance.

In short,linebreaksFilters are designed to bePlain textNot designed for, but.The text is already included in the HTML.Designing. Applying a tool for processing plain text to already structured HTML is like trying to tighten a screw with a hammer, though it might be done with difficulty, but the result is often unsatisfactory, and even destructive.

Proper usage posture

To avoid this conflict, when processing the content generated by the rich text editor in the Anqi CMS template, we should follow the following principles:

  1. Rich text editor content: use|safeFilterFor the content generated by the Anqi CMS rich text editor (or Markdown editor converted content), since it is already HTML, we should always use|safefilter.|safeThe filter's role is to inform the template engine that this content is safe HTML and does not require automatic escaping.This way, the HTML structure generated by the editor can be output as is and correctly parsed by the browser. For example:{{ archive.Content|safe }}This preserves all the formatting provided by the editor and avoids potential HTML conflicts and rendering issues.

  2. Use plain text content with caution.linebreaksorlinebreaksbrOnly when the content is indeed plain text (for example, a simple text input box receiving user comments, or a description without any HTML formatting) and you wish to retain the line breaks to improve readability, should you consider usinglinebreaksorlinebreaksbrfilter. For example:{{ guestbook.message|linebreaks }}But please ensure that these contents are indeed plain text, otherwise there is still a risk of conflict.

Summary

The content of AnQi CMS's rich text editor usually already includes HTML tags. It will be processed further.linebreaksFilter processing, most of the time, it will cause conflicts due to the repeated nesting of HTML tags, resulting in abnormal page rendering. The correct approach is to use directly for rich text content|safeThe filter outputs; andlinebreaksThe filter should be reserved for those who need to convert line breaks in plain text to HTML tags.Understanding the respective responsibilities of these two functions can help us better build a stable and beautiful Anqi CMS website.

Frequently Asked Questions (FAQ)

1. The content of my rich text editor looks like plain text, without any obvious HTML tags, I can uselinebreaks?Even if the content looks like plain text, rich text editors usually add HTML tags in the background (such as<p>Tag)。For example, if you enter “Hello World”, the editor may store it as<p>你好</p><p>世界</p>. If you applylinebreaks again, it may still lead tolinebreaksfiltering in the existing<p>tag inserting extra<p>or<br/>Causing HTML structure redundancy and rendering issues. Therefore, it is recommended to use it whenever the content is obtained from a rich text editor, even if it looks like plain text.|safefilter.

2.|safeFilters andlinebreaksWhat are the fundamental differences between filters? |safeThe function of the filter isBlockThe template engine escapes existing HTML content so that it is directly parsed as HTML by the browser. It does not add any HTML tags. AndlinebreaksThe function of the filter isaddHTML tags (<p>and<br/>)，Translate newline characters in plain text to a format recognizable by the browser. They have different design purposes and processing logic, so they cannot be mixed.

3. If I want the line breaks in the rich text editor content to be recognized by the browser but I don't want to use|safe(for security reasons), what are the alternative solutions?The rich text editor should itself handle the HTML tags for line breaks and paragraphs, so the output content already contains this information.If it is not processed correctly, the problem lies in the editor configuration or the content itself.As to the non-use of|safeFor security reasons, this is correct as it will directly output HTML.But rich text editors usually have built-in security mechanisms (such as sensitive word filtering, XSS protection).If you are very worried, other than the richness of the CMS itself,