【发布】UEditor Markdown 增强版：语雀式编辑 + 代码高亮 + 本地 LaTeX 公式 + 前台渲染一体

大家好，这里分享一款基于 UEditor 4.5.0 深度增强的富文本 / Markdown 编辑器。它在保留 UEditor 全部原有能力（表格、图片、视频、附件、全屏等）的同时，补齐了现代写作最需要的几块短板：像语雀一样边写边选标签、真正的 Markdown 分栏编辑、带主题的代码高亮、不依赖外网的本地 LaTeX 公式，并附带一个可在任意页面展示已保存内容的前台渲染器。

整包开箱即用、无框架依赖，MIT 许可，欢迎试用、反馈与二次开发。

一、亮点速览

二、功能详解

1. 像语雀一样边写边选标签

空行输入 /、或点击行首的 +，弹出分组标签菜单：标题、列表、任务、引用、代码块、公式块、表格、分割线、提示块、目录，以及粗体 / 斜体 / 高亮 / 上下标 / 行内公式 / 链接 / 脚注等行内标记，和图片 / 视频 / 音频 / 附件 / 表情等插入项。支持拼音首字母快速过滤（bt、h2、bg、gs、code），↑↓ / Enter / Esc 键盘操作。富文本与 Markdown 两种模式都生效。

2. 真正的 Markdown 分栏编辑

进入 Markdown 模式后是「左源码 + 右预览」分栏，预览栏就是编辑器本体 iframe（不移动、不重载），两侧都能直接编辑；也可切换成纯源码或纯预览（类 Typora）。源码与预览防抖双向同步、两栏各自独立撤销、窄屏自动上下堆叠。退出模式零转换损失，并彻底修复了「在 Markdown 模式直接点发布丢稿」的问题。

3. Markdown 模式下工具栏不再置灰

颜色、背景色、字体、字号、对齐、首行缩进、行距等命令在 Markdown 模式下全部可用：作用于预览栏时走原生命令，作用于源码栏时自动输出 Markdown 标记或安全内联 HTML。另有选区气泡工具条与快捷键（Ctrl+B/I/U/K、Ctrl+Shift+C 代码、Ctrl+Shift+M 公式）、列表/引用回车续写、Tab 缩进。

4. 代码块：语法高亮 + 主题 + 复制

内置 highlight.js 11（58 种语言）与 10 套主题：GitHub、GitHub Dark、One Light/Dark、Monokai、Dracula、Nord、Tokyo Night、VS Code Dark+、Solarized Light。光标进入代码块时右上角浮出工具条，可换语言、换主题、应用到全部、一键复制。Markdown 围栏支持 ```js theme=monokai 写法。编辑器内着色不改动 DOM，旧浏览器只是无色、不影响编辑。

5. 本地 LaTeX 公式，不再依赖外网图片

公式改用本地 KaTeX 渲染（含 mhchem 化学式），支持 $…$、$$…$$、\(…\)、\[…\]、```math。重写的公式对话框提供实时预览、行内/块级切换与模板面板（分式、根式、上下标、求和、积分、极限、矩阵、方程组、希腊字母、关系符、箭头、化学式）。双击公式即可再次编辑。公式以文本定界符存储，即使被服务端过滤剥掉 class，前台仍能渲染。

6. Markdown 扩展语法

==高亮==、GitHub 提示块（> [!NOTE] / [TIP] / [IMPORTANT] / [WARNING] / [CAUTION]）、脚注 [^1]、[TOC] 目录、emoji 短码、任务列表，编辑与前台观感一致，双向往返不丢失。

7. 保真转换与安全消毒

富文本 ↔ Markdown 双向保真转换：样式、对齐块、图片尺寸/浮动、音视频、合并单元格表格等保留为内联 HTML，需要纯净 Markdown 时可一键切换。消毒采用 CSS 属性白名单 + 值校验，拦截 expression、url(javascript:)、@import、反斜杠转义等常见注入向量。

8. 前台内容渲染器

附带 LryContentRender，在文章 / 论坛 / 评论等任意展示页渲染已保存的编辑器 HTML：代码高亮 + 主题 + 复制按钮、KaTeX 公式（含裸文本定界符扫描）、提示块 / 脚注 / 目录样式。按需懒加载，内容里没有代码或公式就不加载相应库。

三、界面预览

发布前请把下面占位图替换为你自己的实际截图。

四、快速上手

把包内 plugin/、js/、css/ 拷进站点静态目录，保持相对布局，然后：

<link rel="stylesheet" href="plugin/ueditor/themes/default/css/ueditor.css">
<script src="plugin/ueditor/ueditor.config.js"></script>
<script src="plugin/ueditor/ueditor.all.js"></script>
<script src="plugin/ueditor/lang/zh-cn/zh-cn.js"></script>

<script id="editor" type="text/plain" style="width:100%;height:420px;"></script>
<script>
  UE.getEditor('editor', {
    slashMenu: true,       // 语雀式「/」菜单
    codeTheme: 'github',   // 代码默认主题
    codeHighlight: true,   // 编辑器内高亮 + 代码工具条
    formulaConfig: { local: true, mhchem: true }  // 本地 KaTeX
  });
</script>

展示已保存内容（前台渲染器）：

<link rel="stylesheet" href="css/lry-content-render.css">
<script src="js/lry-content-render.js"></script>
<script>LryContentRender.auto('.article-body, .post-content');</script>

包内附通用、无框架依赖的 PHP 上传后端与可选消毒函数，php -S localhost:8000 -t . 后打开 examples/index.html 即可跑全部演示与自动断言。详细配置见包内 README.zh-CN.md。

五、包内内容与质量

• plugin/ueditor/ 编辑器本体；plugin/highlight/、plugin/katex/ 公共库；js/+css/ 前台渲染器；server/php/ 可选消毒；examples/ 演示；test/ 测试。
• 自动化验证：转换核心 193 条断言、服务端消毒 51 条断言、浏览器全链路 33 条断言，全部通过。
• 浏览器：现代常绿浏览器均可；编辑器内代码着色用 CSS Custom Highlight API，旧浏览器仅无色、不影响功能。

六、下载与安装

发布前请填写附件与解压信息。

• 附件：[在此上传加密压缩包附件]
• 解压密码：[联系作者： contact@lirongyaoper.com]
• 安装：解压后按「快速上手」拷贝静态目录即可；无需数据库改动。

七、反馈与联系

发布前请把方括号占位内容替换为你自己的信息。

• 作者：[轩鸿青]
• 邮箱：[ contact@lirongyaoper.com]
• 个人网站/博客：[https://lirongyaoper.com]

Bug 反馈、功能建议与版本更新请直接在本帖回复，或邮件联系作者。觉得好用欢迎回帖支持一下。[https://lirongyaoper.com/forum/index/show/id/6.html]

八、许可

增强部分与打包以 MIT 许可发布；捆绑的 UEditor（百度 fex-team）、highlight.js（BSD-3）、KaTeX（MIT）等保留各自许可，详见包内 LICENSE 与 THIRD_PARTY_NOTICES.md。

附件下载：

登录后可免费下载！