如何实现支持可点击数学结构的富文本交互环境？

我需要开发一个支持可点击数学结构的富文本平台，核心需求包括：

• 可点击数学结构：用户能点击富文本中的分数、根式等特定数学元素
• 动态添加：点击后可将对应数学结构插入富文本，不打断文本流，且能在结构内部输入/插入内容
• 嵌套结构：允许在已有数学结构内添加文字或新的数学元素
  同时需要将富文本内容转换为LaTeX标记，再转为Sympy可处理的代码。

目前采用的方案是让用户输入LaTeX标记，通过matplotlib和PIL实时编译显示，示例输入如下：

1. \lim_{n\to\infty}\sum_{i=1}^n\frac{1}{i^2}
2. \frac{d}{dx}\tan(x)
3. \int\frac{1}{1+\sin(x)}dx

当前的Sympy GUI代码：

import tkinter as tk
import gc
from sympy import *
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
import matplotlib.pyplot as plt
from io import BytesIO
from PIL import Image, ImageTk
import tempfile
import os
import latex2sympy2 as l2s

# Create a tkinter window
window = tk.Tk()
window.title("LaTeX in Tkinter")

entry = tk.Entry(window, width=60)
entry.grid(row=2, column=0, columnspan=5)

# Create initial figures and axes for "Update" and "Calculate" buttons
fig_update, ax_update = plt.subplots(figsize=(10, 2))
fig_calculate, ax_calculate = plt.subplots(figsize=(10, 2))

def update():
    
    try:
        latex_expr = r'${}$'.format(entry.get())

        # Clear the old content and create a new figure
        try:
            ax_update.clear()
            plt.close(fig)
            gc.collect()
        except:
            pass
        fig, ax_update = plt.subplots(figsize=(10, 2))
        ax_update.text(0.5, 0.5, latex_expr, size=12, ha='center', va='center', usetex=True)
        ax_update.axis('off')

        # Save the figure as a temporary image
        temp_dir = tempfile.mkdtemp()
        temp_image_file = os.path.join(temp_dir, "expression.png")
        fig.savefig(temp_image_file, bbox_inches='tight', pad_inches=0, transparent=True)

        # Open and display the temporary image using tkinter
        image = Image.open(temp_image_file)
        photo = ImageTk.PhotoImage(image)

        label = tk.Label(window, image=photo)
        label.image = photo
        label.grid(row=0, columnspan=5)

        window.after(1000, update)
        try:
            ax_update.clear()
            plt.close(fig)
            gc.collect()
        except:
            pass
    except:
        try:
            ax_update.clear()
            plt.close(fig)
            gc.collect()
        except:
            pass
        window.after(1000, update)
update()

def calculate():
    latex_expr = r'${}$'.format(entry.get())
    try:
        ax_calculate.clear()
        plt.close(fig_calculate)
        gc.collect()
    except:
        pass
    if '==' in latex_expr:
        pos_equals = latex_expr.find('==')
        latex_expr_left = latex_expr[:pos_equals]
        latex_expr_right = latex_expr[pos_equals+2:]

        sympy_expr_left = l2s.latex2sympy(latex_expr_left)
        sympy_expr_right = l2s.latex2sympy(latex_expr_right)

        if simplify(sympy_expr_left) == simplify(sympy_expr_right):
            latex_expr = 'True'
        else:
            latex_expr = 'False'
        # Create a new figure and axes for the "Calculate" button
        fig_calculate, ax_calculate = plt.subplots(figsize=(10, 2))
        ax_calculate.text(0.5, 0.5, latex_expr, size=12, ha='center', va='center', usetex=True)
        ax_calculate.axis('off')

        # Save the figure as a temporary image
        temp_dir = tempfile.mkdtemp()
        temp_image_file = os.path.join(temp_dir, "expression.png")
        fig_calculate.savefig(temp_image_file, bbox_inches='tight', pad_inches=0, transparent=True)

        # Open and display the temporary image using tkinter
        image = Image.open(temp_image_file)
        photo = ImageTk.PhotoImage(image)

        label = tk.Label(window, image=photo)
        label.image = photo
        label.grid(row=1, columnspan=5)
    else:
        latex_expr = r'${}$'.format(entry.get())
        latex_expr += '='
        latex_expr += r'${}$'.format(latex(l2s.latex2sympy(entry.get()).doit()))
        # Create a new figure and axes for the "Calculate" button
        fig_calculate, ax_calculate = plt.subplots(figsize=(10, 2))
        ax_calculate.text(0.5, 0.5, latex_expr, size=12, ha='center', va='center', usetex=True)
        ax_calculate.axis('off')

        # Save the figure as a temporary image
        temp_dir = tempfile.mkdtemp()
        temp_image_file = os.path.join(temp_dir, "expression.png")
        fig_calculate.savefig(temp_image_file, bbox_inches='tight', pad_inches=0, transparent=True)

        # Open and display the temporary image using tkinter
        image = Image.open(temp_image_file)
        photo = ImageTk.PhotoImage(image)

        label = tk.Label(window, image=photo)
        label.image = photo
        label.grid(row=1, columnspan=5)
    try:
        ax_calculate.clear()
        plt.close(fig_calculate)
        gc.collect()
    except:
        pass
    


calculate = tk.Button(window,width=12,height=4,text="calculate",command=calculate)
calculate.grid(row=3, column=0)

# Run the tkinter main loop

window.mainloop()

实现方案 #

一、替换静态图片渲染，改用可交互富文本组件 #

当前用matplotlib生成静态图片的方式无法实现点击交互，必须替换为支持富文本渲染与交互的组件：

• 桌面端优先选择PyQt的QTextEdit：支持HTML+MathML渲染，能直接显示数学公式，且每个元素可绑定交互事件；若坚持用Tkinter，可使用tkinter.Text配合自定义标签，或集成tkinterweb组件（支持MathML）
• 核心思路：把分数、根式等数学结构封装成可点击的交互单元，每个单元对应一段LaTeX模板，点击时触发插入逻辑。

二、实现可点击数学结构的交互逻辑 #

1. 数学结构组件化封装

为每种数学结构（分数、根式、求和、积分等）创建可复用的交互模块：

• 比如分数组件：包含分子、分母的可编辑区域，点击插入时自动生成\frac{分子占位符}{分母占位符}的LaTeX片段
• 每个组件绑定点击事件，触发时将LaTeX模板插入到富文本的当前光标位置，并自动把光标定位到第一个可编辑占位符（比如分子位置）

2. 动态插入与文本流维护

• 监听富文本组件的光标位置，插入数学结构时，调用组件的insert方法将LaTeX模板插入到当前光标处
• 插入后自动替换占位符为空白，并将光标聚焦到该区域，保证用户可以直接输入内容，且不打断原有文本流

3. 嵌套结构支持

• 让每个数学结构的可编辑区域（分子、被开方数、求和下标等）支持再次插入其他数学组件
• 维护LaTeX语法树逻辑：当在某个数学结构内部插入新组件时，将新组件的LaTeX片段嵌入到父结构的对应位置，例如在分数分子中插入根式，生成\frac{\sqrt{被开方数}}{分母}的完整LaTeX代码

三、LaTeX转Sympy的优化 #

保留当前latex2sympy2的转换方案，同时优化兼容性与稳定性：

• 提取富文本中的完整LaTeX代码，清理空占位符（比如\frac{}{}这类无效结构）
• 调用l2s.latex2sympy()将LaTeX转换为Sympy表达式，再执行计算、化简等操作
• 添加异常捕获：若LaTeX语法错误，弹窗提示用户，避免程序崩溃

四、当前代码的过渡优化 #

如果需要先优化现有方案再逐步迁移，可做以下调整：

• 复用同一个fig和ax，避免每次刷新都创建新的绘图对象，减少内存占用
• 使用tempfile.NamedTemporaryFile(delete=True)创建临时文件，用完自动删除，替代手动创建临时目录
• 将update函数的定时刷新改为监听输入框的<<Modified>>事件，只有当用户输入变化时才触发渲染，减少不必要的计算

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