简介面向Web前端开发与内容管理系统搭建者的富文本编辑器集成包围绕UEditor与kityformula-plugin数学公式插件组合解决后台编辑器无法便捷录入、展示数学公式的问题可用于教学课件、技术文档、题库与在线教育平台等场景。压缩包共747个文件约3.43MB涵盖js脚本、css样式、html示例页面以及png、gif、jpg等界面与公式图标素材另有字体、swf等兼容资源目录分层清晰便于按模块查阅和二次调整。已有1463人学习下载具备一定参考热度。读者可直接获得一套可运行的编辑器静态资源与公式插件整合结构便于快速嵌入现有后台、对照样式表与前端脚本完成配置并在此基础上扩展公式编辑、内容排版与兼容性排查思路。1. 公式插件版 UEditor老编辑器为什么还得靠它撑数理内容教育题库、工科课件、化学教案这类后台最难受的从来不是排版而是让富文本编辑器接受并正确处理一行\frac{-b\pm\sqrt{b^2-4ac}}{2a}。普通编辑器把它当纯文本运营看到的是一串反斜杠换成 Markdown 编辑器写惯 Word 的编辑又不肯学语法。这个带公式插件的 UEditor 编辑器要解决的就是这一步工具栏多出一个公式按钮点开是可点选的公式面板写出来的公式以图片形式进入正文原始 LaTeX 挂在标签属性上后续还能取回来二次编辑。它适合手上已经有一套老后台、不想推翻编辑器架构、但必须支持数学或化学公式录入的团队也适合只想找个“能存公式、能导出、不挑浏览器”方案的个人项目。它不是新东西优势在于链路完整、坑都被人踩过一遍。2. 把公式按钮挂上工具栏包结构、注册时机与三处必改配置拿到包先别急着往项目里塞。这类编辑器包的目录结构基本固定真正决定“公式能不能用”的只有五六个文件剩下的是主题、语言包和第三方依赖。我见过太多人把整个目录拷进去结果按钮不显示、弹窗 404、公式字体加载不出来最后怀疑是包有问题——九成是自己少拷了一个third-party或者UEDITOR_HOME_URL少了个斜杠。这一章先把文件认清楚再把注册链路和配置对齐最后用一个最小页面十分钟内验证插件是否正常工作。2.1 先认清包里哪几个文件在起作用不要整个目录盲拷也别手工挑文件。正确做法是整个ueditor目录一起进静态资源然后只改下面这几处。表格里“动不动”这一列是我自己的习惯凡是标“不动”的出问题优先怀疑它没拷全而不是去改它。路径作用动不动ueditor.config.js工具栏、路径前缀、上传入口、标签白名单必改ueditor.all.js/ueditor.all.min.js核心逻辑加插件打包产物二选一别同时引dialogs/formula/formula.html公式弹窗页面内含公式排版引擎一般不动third-party/公式引擎目录LaTeX 解析与渲染、字体文件不动但必须能访问到themes/default/css/ueditor.css按钮图标样式加图标时改lang/zh-cn/zh-cn.js按钮悬停文案建议改这里有个反直觉的点ueditor.all.js和ueditor.all.min.js不是“源码版和压缩版”的搭配关系而是同一个东西的两份产物。两个都引等于把编辑器初始化两遍症状是工具栏出现两组按钮、或者点公式按钮弹两个窗。上线用 min排查用不带 min 的那份改完再换回来。third-party那层尤其容易被忽略。有人为了减小体积只拷dialogs结果弹窗能打开预览区却是一堆方块——公式字体 404。字体不是可选项它是公式渲染的一部分。2.2 注册公式按钮registerUI 与弹窗 iframe公式按钮不是ueditor.config.js里写个名字就自动出现的它需要在编辑器加载时注册一段 UI 逻辑。常见做法是在ueditor.all.js末尾追加或者单独放一个plugins/formula.js再在配置里用plugins引入。两种都行关键是执行时机必须早于UE.getEditor()。// ueditor.all.js 末尾追加或独立 plugins/formula.js在 config 的 plugins 里引入 UE.registerUI(formula, function (editor, uiName) { // 1. 弹窗本体iframe 指向包内页面父子页面靠 editor 实例通信 var dialog new UE.ui.Dialog({ iframeUrl: editor.options.UEDITOR_HOME_URL dialogs/formula/formula.html, editor: editor, name: uiName, title: 插入公式, cssRules: width:640px;height:480px;, buttons: [cancel, ok] // ok 的点击行为在弹窗内部接管 }); // 2. 每次点击先把编辑器实例挂到 window供 iframe 内取用 return function () { window.__formulaEditor editor; dialog.render(); dialog.open(); }; }, 0); // 第三个参数是插入工具栏的索引0 表示排在最前面registerUI的第三个参数是按钮插入位置第四个参数可以限定只在某个editorId上生效——一个页面里放多个编辑器、只有富文本主编辑器需要公式按钮时用这个参数比写 if 判断干净。返回值那个函数就是按钮的 click handler。为什么非要用 iframe 弹窗而不是自己在页面里画一个浮层因为公式排版引擎有自己的 CSS 和字体塞进正文所在的 document 会污染全局样式最常见的事故是公式面板的字体规则把正文行高改了。iframe 的代价是父子通信只能靠挂window或者window.parent所以上面那行window.__formulaEditor editor是必要的一步别嫌它不优雅。2.3 ueditor.config.js 里必须对齐的三项配置项不多但每一个错了都能让公式功能废掉一半。下面这份是最小可用集注释里写了每项为什么必须这么写。window.UEDITOR_CONFIG { // 结尾必须带斜杠否则会拼成 /static/ueditordialogs/formula/formula.html UEDITOR_HOME_URL: /static/ueditor/, serverUrl: /api/ueditor/upload, // 关键toolbars 里不写 formula按钮永远不会出现插件写了也白写 toolbars: [[ source, bold, italic, underline, fontsize, forecolor, justifyleft, justifycenter, justifyright, insertimage, inserttable, formula, preview, fullscreen ]], // 缺了这行鼠标悬停显示的是英文 key formula labelMap: { formula: 公式 }, // 公式图是 img关掉远程图自动转存避免它被当成外链图去抓取 catchRemoteImageEnable: false, initialFrameHeight: 420 };UEDITOR_HOME_URL那个斜杠是最高频的翻车点没有之一。少一个斜杠路径就变成.../ueditordialogs/formula/formula.html弹窗白屏Console 报 404看起来像“插件没打包进去”。catchRemoteImageEnable这行值得单独说。默认开启时编辑器会把内容里的远程图片抓回本站公式图如果是 base64 或者走独立图片服务可能被这个逻辑干扰。关掉它公式图的 src 就归你自己管。labelMap不影响功能但影响可维护性。改完发版运营在群里问“那个 fx 按钮是干嘛的”你就知道这行没白写。2.4 最小验证页十分钟确认插件是否正常工作配置改完别急着往业务页面里接先起一个纯静态页跑通。这个页面除了编辑器什么都不放一旦出问题变量只有编辑器本身。!DOCTYPE html html head meta charsetutf-8 title公式编辑器最小验证页/title /head body !-- id 必须和下面 getEditor 的参数一致 -- script ideditor typetext/plain stylewidth:100%;height:420px;/script script src/static/ueditor/ueditor.config.js/script !-- all.js 与 all.min.js 二选一调试期用不带 min 的 -- script src/static/ueditor/ueditor.all.js/script script var ue UE.getEditor(editor); ue.ready(function () { ue.focus(); }); /script /body /html验证顺序按这个走打开页面看工具栏有没有公式按钮 → 点按钮看弹窗能不能出来 → 在弹窗里敲一个a^2b^2c^2看预览区有没有渲染 → 点确定看正文里有没有插进一张图 → 打开 F12 的 Elements 面板检查那张 img 上有没有>// dialogs/formula/formula.html 内的确定回调简化版 function insertFormula(latex, imgSrc) { var editor window.parent.__formulaEditor; // 1. LaTeX 里带反斜杠、引号、尖括号直接拼进属性会把标签截断 var safe encodeURIComponent(latex); var html img src imgSrc >// 方式 a在白名单里给 img 补>// server/formula.js —— 公式图片落盘 const fs require(fs); const path require(path); const crypto require(crypto); module.exports function saveFormula(req, res) { const { latex, base64 } req.body; // 1. 用 LaTeX 的哈希当文件名同一公式只存一份天然去重 const hash crypto.createHash(md5).update(latex).digest(hex).slice(0, 16); const name formula_${hash}.png; const abs path.join(__dirname, ../public/formula, name); if (!fs.existsSync(abs)) { // 2. 去掉 data:image/png;base64, 前缀再写盘 const buf Buffer.from( base64.replace(/^data:image\/\w;base64,/, ), base64 ); fs.writeFileSync(abs, buf); } // 3. 返回相对路径别写死域名换环境时不用洗数据 res.json({ errno: 0, url: /formula/${name} }); };errno: 0这个字段是 UEditor 上传接口的约定少了它或者值不为 0前端会直接提示上传失败哪怕图片已经存好了。这个坑我第一次接的时候找了两个小时一直以为是接口没通。文件名用哈希而不是时间戳还有一个隐性好处内容相同的公式不会重复占用空间也不会出现“同一道题两个不同版本的图”。如果业务需要保留公式的修改历史那就别用哈希改成articleId 序号各取所需。4.4 回显与导出图片能带走源文带不走回显分两种场景处理方式不一样。只读的详情页直接渲染 img 就行>import re import urllib.parse IMG re.compile(rimg\b[^]*, re.I) ATTR re.compile(r([\w-])\s*\s*([^]*)) def audit(html): 返回 (公式图总数, 缺源文的图片地址列表) missing, total [], 0 for tag in IMG.findall(html or ): attrs dict(ATTR.findall(tag)) # 只认带 ue-formula 类的图避免误伤正文配图 if ue-formula not in (attrs.get(class) or ): continue total 1 latex attrs.get(data-latex) if not latex: missing.append(attrs.get(src, )) return total, missing for row in fetch_ p a hrefhttps://download.csdn.net/download/qq_33769914/10651871 stylecolor:#ec7500;font-size:14px; 本文还有配套的精品资源点击获取 /a img altmenu-r.4af5f7ec.gif srchttps://csdnimg.cn/release/wenkucmsfe/public/img/menu-r.4af5f7ec.gif stylewidth:16px;margin-left:4px;vertical-align:text-bottom;cursor:text; /p 
长河君 · 2026/10/23 17:39:45 · 阅读 1.2k UEditor公式插件：LaTeX插入、data-latex保存与回显
简介面向Web前端开发与内容管理系统搭建者的富文本编辑器集成包围绕UEditor与kityformula-plugin数学公式插件组合解决后台编辑器无法便捷录入、展示数学公式的问题可用于教学课件、技术文档、题库与在线教育平台等场景。压缩包共747个文件约3.43MB涵盖js脚本、css样式、html示例页面以及png、gif、jpg等界面与公式图标素材另有字体、swf等兼容资源目录分层清晰便于按模块查阅和二次调整。已有1463人学习下载具备一定参考热度。读者可直接获得一套可运行的编辑器静态资源与公式插件整合结构便于快速嵌入现有后台、对照样式表与前端脚本完成配置并在此基础上扩展公式编辑、内容排版与兼容性排查思路。1. 公式插件版 UEditor老编辑器为什么还得靠它撑数理内容教育题库、工科课件、化学教案这类后台最难受的从来不是排版而是让富文本编辑器接受并正确处理一行\frac{-b\pm\sqrt{b^2-4ac}}{2a}。普通编辑器把它当纯文本运营看到的是一串反斜杠换成 Markdown 编辑器写惯 Word 的编辑又不肯学语法。这个带公式插件的 UEditor 编辑器要解决的就是这一步工具栏多出一个公式按钮点开是可点选的公式面板写出来的公式以图片形式进入正文原始 LaTeX 挂在标签属性上后续还能取回来二次编辑。它适合手上已经有一套老后台、不想推翻编辑器架构、但必须支持数学或化学公式录入的团队也适合只想找个“能存公式、能导出、不挑浏览器”方案的个人项目。它不是新东西优势在于链路完整、坑都被人踩过一遍。2. 把公式按钮挂上工具栏包结构、注册时机与三处必改配置拿到包先别急着往项目里塞。这类编辑器包的目录结构基本固定真正决定“公式能不能用”的只有五六个文件剩下的是主题、语言包和第三方依赖。我见过太多人把整个目录拷进去结果按钮不显示、弹窗 404、公式字体加载不出来最后怀疑是包有问题——九成是自己少拷了一个third-party或者UEDITOR_HOME_URL少了个斜杠。这一章先把文件认清楚再把注册链路和配置对齐最后用一个最小页面十分钟内验证插件是否正常工作。2.1 先认清包里哪几个文件在起作用不要整个目录盲拷也别手工挑文件。正确做法是整个ueditor目录一起进静态资源然后只改下面这几处。表格里“动不动”这一列是我自己的习惯凡是标“不动”的出问题优先怀疑它没拷全而不是去改它。路径作用动不动ueditor.config.js工具栏、路径前缀、上传入口、标签白名单必改ueditor.all.js/ueditor.all.min.js核心逻辑加插件打包产物二选一别同时引dialogs/formula/formula.html公式弹窗页面内含公式排版引擎一般不动third-party/公式引擎目录LaTeX 解析与渲染、字体文件不动但必须能访问到themes/default/css/ueditor.css按钮图标样式加图标时改lang/zh-cn/zh-cn.js按钮悬停文案建议改这里有个反直觉的点ueditor.all.js和ueditor.all.min.js不是“源码版和压缩版”的搭配关系而是同一个东西的两份产物。两个都引等于把编辑器初始化两遍症状是工具栏出现两组按钮、或者点公式按钮弹两个窗。上线用 min排查用不带 min 的那份改完再换回来。third-party那层尤其容易被忽略。有人为了减小体积只拷dialogs结果弹窗能打开预览区却是一堆方块——公式字体 404。字体不是可选项它是公式渲染的一部分。2.2 注册公式按钮registerUI 与弹窗 iframe公式按钮不是ueditor.config.js里写个名字就自动出现的它需要在编辑器加载时注册一段 UI 逻辑。常见做法是在ueditor.all.js末尾追加或者单独放一个plugins/formula.js再在配置里用plugins引入。两种都行关键是执行时机必须早于UE.getEditor()。// ueditor.all.js 末尾追加或独立 plugins/formula.js在 config 的 plugins 里引入 UE.registerUI(formula, function (editor, uiName) { // 1. 弹窗本体iframe 指向包内页面父子页面靠 editor 实例通信 var dialog new UE.ui.Dialog({ iframeUrl: editor.options.UEDITOR_HOME_URL dialogs/formula/formula.html, editor: editor, name: uiName, title: 插入公式, cssRules: width:640px;height:480px;, buttons: [cancel, ok] // ok 的点击行为在弹窗内部接管 }); // 2. 每次点击先把编辑器实例挂到 window供 iframe 内取用 return function () { window.__formulaEditor editor; dialog.render(); dialog.open(); }; }, 0); // 第三个参数是插入工具栏的索引0 表示排在最前面registerUI的第三个参数是按钮插入位置第四个参数可以限定只在某个editorId上生效——一个页面里放多个编辑器、只有富文本主编辑器需要公式按钮时用这个参数比写 if 判断干净。返回值那个函数就是按钮的 click handler。为什么非要用 iframe 弹窗而不是自己在页面里画一个浮层因为公式排版引擎有自己的 CSS 和字体塞进正文所在的 document 会污染全局样式最常见的事故是公式面板的字体规则把正文行高改了。iframe 的代价是父子通信只能靠挂window或者window.parent所以上面那行window.__formulaEditor editor是必要的一步别嫌它不优雅。2.3 ueditor.config.js 里必须对齐的三项配置项不多但每一个错了都能让公式功能废掉一半。下面这份是最小可用集注释里写了每项为什么必须这么写。window.UEDITOR_CONFIG { // 结尾必须带斜杠否则会拼成 /static/ueditordialogs/formula/formula.html UEDITOR_HOME_URL: /static/ueditor/, serverUrl: /api/ueditor/upload, // 关键toolbars 里不写 formula按钮永远不会出现插件写了也白写 toolbars: [[ source, bold, italic, underline, fontsize, forecolor, justifyleft, justifycenter, justifyright, insertimage, inserttable, formula, preview, fullscreen ]], // 缺了这行鼠标悬停显示的是英文 key formula labelMap: { formula: 公式 }, // 公式图是 img关掉远程图自动转存避免它被当成外链图去抓取 catchRemoteImageEnable: false, initialFrameHeight: 420 };UEDITOR_HOME_URL那个斜杠是最高频的翻车点没有之一。少一个斜杠路径就变成.../ueditordialogs/formula/formula.html弹窗白屏Console 报 404看起来像“插件没打包进去”。catchRemoteImageEnable这行值得单独说。默认开启时编辑器会把内容里的远程图片抓回本站公式图如果是 base64 或者走独立图片服务可能被这个逻辑干扰。关掉它公式图的 src 就归你自己管。labelMap不影响功能但影响可维护性。改完发版运营在群里问“那个 fx 按钮是干嘛的”你就知道这行没白写。2.4 最小验证页十分钟确认插件是否正常工作配置改完别急着往业务页面里接先起一个纯静态页跑通。这个页面除了编辑器什么都不放一旦出问题变量只有编辑器本身。!DOCTYPE html html head meta charsetutf-8 title公式编辑器最小验证页/title /head body !-- id 必须和下面 getEditor 的参数一致 -- script ideditor typetext/plain stylewidth:100%;height:420px;/script script src/static/ueditor/ueditor.config.js/script !-- all.js 与 all.min.js 二选一调试期用不带 min 的 -- script src/static/ueditor/ueditor.all.js/script script var ue UE.getEditor(editor); ue.ready(function () { ue.focus(); }); /script /body /html验证顺序按这个走打开页面看工具栏有没有公式按钮 → 点按钮看弹窗能不能出来 → 在弹窗里敲一个a^2b^2c^2看预览区有没有渲染 → 点确定看正文里有没有插进一张图 → 打开 F12 的 Elements 面板检查那张 img 上有没有>// dialogs/formula/formula.html 内的确定回调简化版 function insertFormula(latex, imgSrc) { var editor window.parent.__formulaEditor; // 1. LaTeX 里带反斜杠、引号、尖括号直接拼进属性会把标签截断 var safe encodeURIComponent(latex); var html img src imgSrc >// 方式 a在白名单里给 img 补>// server/formula.js —— 公式图片落盘 const fs require(fs); const path require(path); const crypto require(crypto); module.exports function saveFormula(req, res) { const { latex, base64 } req.body; // 1. 用 LaTeX 的哈希当文件名同一公式只存一份天然去重 const hash crypto.createHash(md5).update(latex).digest(hex).slice(0, 16); const name formula_${hash}.png; const abs path.join(__dirname, ../public/formula, name); if (!fs.existsSync(abs)) { // 2. 去掉 data:image/png;base64, 前缀再写盘 const buf Buffer.from( base64.replace(/^data:image\/\w;base64,/, ), base64 ); fs.writeFileSync(abs, buf); } // 3. 返回相对路径别写死域名换环境时不用洗数据 res.json({ errno: 0, url: /formula/${name} }); };errno: 0这个字段是 UEditor 上传接口的约定少了它或者值不为 0前端会直接提示上传失败哪怕图片已经存好了。这个坑我第一次接的时候找了两个小时一直以为是接口没通。文件名用哈希而不是时间戳还有一个隐性好处内容相同的公式不会重复占用空间也不会出现“同一道题两个不同版本的图”。如果业务需要保留公式的修改历史那就别用哈希改成articleId 序号各取所需。4.4 回显与导出图片能带走源文带不走回显分两种场景处理方式不一样。只读的详情页直接渲染 img 就行>import re import urllib.parse IMG re.compile(rimg\b[^]*, re.I) ATTR re.compile(r([\w-])\s*\s*([^]*)) def audit(html): 返回 (公式图总数, 缺源文的图片地址列表) missing, total [], 0 for tag in IMG.findall(html or ): attrs dict(ATTR.findall(tag)) # 只认带 ue-formula 类的图避免误伤正文配图 if ue-formula not in (attrs.get(class) or ): continue total 1 latex attrs.get(data-latex) if not latex: missing.append(attrs.get(src, )) return total, missing for row in fetch_ p a hrefhttps://download.csdn.net/download/qq_33769914/10651871 stylecolor:#ec7500;font-size:14px; 本文还有配套的精品资源点击获取 /a img altmenu-r.4af5f7ec.gif srchttps://csdnimg.cn/release/wenkucmsfe/public/img/menu-r.4af5f7ec.gif stylewidth:16px;margin-left:4px;vertical-align:text-bottom;cursor:text; /p