layui拖拽编辑器搭页面时，公式放哪一层

在 layui拖拽编辑器 里排好标题、卡片与表单后，数学式该怎么放，取决于页面内容是否会变化。拖拽搭建解决区域摆放，公式仍要有自己的呈现方式。固定的说明式可以作为矢量素材放入，随输入变化的表达则需要页面开发者接入数学渲染能力，两条路线的维护工作不同。

固定内容适合先做成独立素材

例如一张介绍圆面积的卡片，式子在发布后基本不变，可以先在公式编辑工具中录入，检查变量和指数，再取得 SVG 文件。到页面侧使用支持该格式的图片区域放入素材，设定显示宽度并保持原始比例。不能只凭文件后缀判断是否兼容，要在最终页面里实测一次。

图片方式将排版工作提前完成，页面无需为这条式子现场解析源码。它的代价是读者通常不能像选正文那样选中式子中的某一个变量，后期改符号也要重新准备素材。图片说明应描述公式含义；需要让读者取得源码时，还应在页面内容设计中另外保留可读文本，不能期待 SVG 自动承担这一职责。

变化的公式要给渲染留出位置

如果用户改变参数，页面就要显示另一条式子，逐个制作图片会越来越难维护。可由开发者使用前端数学渲染库处理源码，先在独立测试区域确认所需命令能显示，再接到页面数据更新流程。仅仅把带反斜杠的字符串放进普通文本框，通常只会显示字符，不会自动形成分式。

前端渲染需要加载对应脚本、样式和字体，这会增加首次访问的资源量。检查时应记录页面显示公式前后的状态，不能只在浏览器已经缓存资源后看结果。还应试较长表达式和多层分数，确认渲染区域会扩展而不会覆盖下一张卡片。可选取文本的效果也要在实际产物中验证，不能把采用渲染库等同于所有复制需求都已经满足。

宽高约束决定页面会不会跳动

无论采用图片还是渲染区域，都要在内容出现前为它预留空间。图片可以根据原始宽高计算比例，设置明确的显示尺寸；渲染区域则按典型公式设置容器高度，并对更高的表达式允许扩展。只有宽度没有合理高度，往往会在资源加载后把下方正文推开。

用一个普通式子和一个高结构分别测试，例如先看 A=πr²，再检查带分式的表达。窄屏下若整条公式过宽，应考虑独立横向区域或在数学意义允许的位置拆式，不能把所有内容压到难以辨认。图片缩放还要保持纵横比例，否则圆括号和字母都会变形。

v=\frac{s}{t}

本站负责准备哪一份输入

采用图片路线时，本站可以编辑公式并导出 SVG 或 PNG；采用源码路线时，可以在 LaTeX 模式写式子并对照预览，供开发者核对表达结构。本站的源码导出是 .tex 文件，不能把它直接当成页面渲染库已经接好的证明。目标页面能否接受命令仍由其渲染环境决定。

完成素材后回到「可视化」再导出，相关操作需登录与会员。上线前的验收应在页面侧进行：刷新后是否保留位置，缩窄窗口是否溢出，替换一条更长的式子会不会挤住按钮。把公式当作有尺寸、有更新规则的内容块，才能和拖拽搭出的其他区域稳定配合。

延伸阅读

• latex编辑器网页版：分清公式预览与完整环境的职责。
• 在线exif编辑器：了解图片信息和图中公式内容的区别。