如何为Flask-CKEditor添加LaTeX按钮并解决渲染冗余字符问题

一、给Flask-CKEditor添加免费LaTeX编辑按钮（基于MathJax） #

MathJax是完全免费的开源LaTeX渲染工具，适配Flask-CKEditor的实现步骤如下：

1. 配置CKEditor启用MathJax插件并添加工具栏按钮
   在post.html中修改CKEditor的配置代码，指定加载MathJax库并将公式编辑按钮加入工具栏：

{{ ckeditor.load() }}
{{ ckeditor.config(
    name='create_content',
    toolbar=[
        ['Bold', 'Italic', 'Underline'],
        ['NumberedList', 'BulletedList'],
        ['Mathjax', 'Link', 'Unlink'],
        ['Source']
    ],
    mathJaxLib='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'
) }}

配置完成后，CKEditor工具栏会出现公式按钮，点击即可输入LaTeX语法的数学公式。

2. 展示页面加载MathJax渲染公式
   在显示文章内容的模板中，添加MathJax初始化脚本，确保公式能正常渲染：

<script>
    MathJax = {
        tex: {
            inlineMath: [['$', '$'], ['\\(', '\\)']]
        },
        svg: {
            fontCache: 'global'
        }
    };
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

二、解决渲染{{ post.content }}时的冗余字符问题 #

CKEditor默认会生成 和空<p>标签，可通过以下两种方式清理：

方法1：后端内容清理（推荐） #

使用BeautifulSoup库在保存或渲染前处理内容：
首先安装依赖：

pip install beautifulsoup4

编写清理函数：

from bs4 import BeautifulSoup
import re

def clean_ckeditor_content(content):
    if not content:
        return ""
    # 解析HTML结构
    soup = BeautifulSoup(content, 'html.parser')
    # 删除仅含空格或 的空p标签
    for p in soup.find_all('p'):
        if p.get_text(strip=True) in ('', '\xa0'):
            p.decompose()
    # 替换 为普通空格并去除多余空白
    cleaned_content = str(soup).replace(' ', ' ')
    cleaned_content = re.sub(r'\s+', ' ', cleaned_content).strip()
    return cleaned_content

在保存文章时调用该函数（同时修正你代码中的拼写错误）：

if form.validate_on_submit():
    content_form = form.create_content.data
    cleaned_content = clean_ckeditor_content(content_form)
    # 修正拼写错误：contnet → content
    post_db = db.session.execute(db.select(Post).filter_by(content=cleaned_content)).scalar_one_or_none()
    if not post_db:
        # 修正未定义变量：text_form → cleaned_content
        add_post_content = Post(content=cleaned_content)
        db.session.add(add_post_content)    
        db.session.commit()
        flash('你已成功创建新文章内容。')
    # 后续跳转逻辑...

也可以注册Jinja过滤器，在模板中直接使用：

@app.template_filter('clean_ckeditor')
def clean_ckeditor_filter(content):
    return clean_ckeditor_content(content)

模板中调用：

{{ post.content|clean_ckeditor|safe }}

方法2：前端JavaScript处理 #

在展示页面添加脚本动态清理：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const contentBox = document.getElementById('post-content');
        if (!contentBox) return;
        // 删除空p标签
        contentBox.querySelectorAll('p').forEach(p => {
            if (p.textContent.trim() === '' || p.textContent.trim() === '\xa0') {
                p.remove();
            }
        });
        // 替换&nbsp;为空格
        contentBox.innerHTML = contentBox.innerHTML.replace(/&nbsp;/g, ' ');
    });
</script>

渲染内容时给容器加id：

<div id="post-content">
    {{ post.content|safe }}
</div>

现有代码错误修正 #

1. models.py中类定义缺少冒号：class Post(UserMixin, db.Model):
2. routes.py中filter_by(contnet=content_form)拼写错误，应为content
3. routes.py中Post(content=text_form)的text_form未定义，需替换为content_form或清理后的内容

内容的提问来源于stack exchange，提问作者ifjhrrhg