Joe 编辑器插件 – WordPress 写文章神器，54 个排版按钮 + 20+ 短代码组件
Typecho Joe 主题内置 Markdown 编辑器移植版 | 让 WordPress 写文章变成 Markdown 体验
- 插件名称：Joe 编辑器
- 插件版本：v1.0.0
- 适用平台：WordPress 5.2+（推荐 6.x）/ PHP 7.2+
- 作者：主题源码阁:小熊猫
- 官方网站：https://www.zhuticode.com
插件简介
Joe 编辑器是把 Typecho 经典主题 Joe（v7.7.1 二开版）内置的 CodeMirror 6 Markdown 编辑器完整移植到 WordPress 的插件。启用后自动替换 WordPress 经典编辑器界面，写文章时获得与 Typecho Joe 完全一致的 Markdown 写作体验：工具栏一键插入、实时预览、表情、短代码组件全部可用。
纯净版说明：本插件已剔除原作者（执念）平台绑定与网易云音乐组件，无任何外部平台依赖，安装即用。
功能特色
一、编辑器核心
- CodeMirror 6 内核：与原版 Joe 完全一致的编辑体验，Markdown 语法高亮、行号显示
- 54 个工具栏按钮：标题、加粗、斜体、删除线、行内代码、代码块、表格、链接、图片、引用、列表、分割线、任务列表等，一键插入
- 实时分栏预览：工具栏一键开启/关闭右侧 Markdown 渲染预览（HyperDown 引擎）
- 快捷发布：工具栏直接「发布文章 / 保存草稿」，与 WordPress 原生按钮等效
二、图片与媒体
- 粘贴即传：在编辑器内直接 Ctrl+V 粘贴图片，自动上传至 WordPress 媒体库并插入
 - 原生媒体库打通：「添加媒体」按钮点击打开 WordPress 媒体库，选图后以 Markdown 语法插入编辑器光标处
- 与主题弹窗共存：主题的「添加付费隐藏内容 / 添加内容组件」弹窗仍调用原生编辑器（TinyMCE），互不干扰
三、短代码组件（20+ 种）
| 组件 | 短代码 | 说明 |
|---|---|---|
| 灯泡 | {lamp/} | 强调提示 |
| 小标题 | {mtitle 文字/} | 行内标题 |
| 按钮 | {abtn 属性/} | 彩色按钮/下载按钮 |
| 提示 | {anote 属性/} | 多种样式提示框 |
| 虚线框 | {dotted 属性/} | 虚线边框容器 |
| 消息 | {message 属性/} | 消息提示条 |
| 进度条 | {progress 属性/} | 百分比进度条 |
| 云标签 | {cloud 属性/} | 标签云 |
| 复制 | {copy 属性/} | 一键复制文本 |
| 音乐 | {mp3 属性/} | APlayer 音乐播放 |
| B 站视频 | {bilibili 属性/} | 嵌入 B 站视频 |
| 视频播放 | {dplayer 属性/} | 原生播放器，支持 mp4 / m3u8(HLS) |
| 默认卡片 | {card-default 属性}内容{/card-default} | 卡片容器 |
| 描述卡片 | {card-describe 属性}内容{/card-describe} | 带描述卡片 |
| 列表卡片 | {card-list 属性}内容{/card-list} | 列表型卡片 |
| 标签页 | {tabs 属性}内容{/tabs} | Tab 切换 |
| 时间轴 | {timeline 属性}内容{/timeline} | 时间线展示 |
| 折叠面板 | {collapse 属性}内容{/collapse} | 手风琴折叠 |
| 警告框 | {alert 属性}内容{/alert} | 警告/成功提示 |
| 网格 | {gird 属性}内容{/gird} | 多列网格布局 |
| 回复可见 | {hide}内容{/hide} | 登录用户可见，未登录提示回复 |
| 任务列表 | {x} 、{ } | 勾选/未勾选复选框 |
组件属性（如标题、颜色、图标等）与原版 Joe 一致，写法参考 Typecho Joe 主题文档。
四、前台渲染
- 文章发布后按 Markdown 标准渲染：标题、加粗、斜体、列表、引用、表格、代码块、链接、图片全部支持
- Prism 代码高亮：代码块自动着色（支持常见编程语言）
- 138 张 OwO 表情：输入
::(滑稽)、:@(高兴)等语法自动转表情图片（泡泡/阿鲁两套） - 短代码组件前台正常渲染，与 Typecho Joe 效果一致
五、稳定性与兼容
- 已适配 WordPress 自动保存、字数统计、发布预览、全高度编辑器模式
- 与 classic-editor、wpjam-tinymce 等插件无冲突
- 已修复：Markdown 自动链接 XSS、短代码属性注入等安全隐患
安装方法
- 下载插件压缩包并解压，得到
joe-editor文件夹 - 将
joe-editor上传至wp-content/plugins/目录 - 在 WordPress 后台「插件」中启用 Joe 编辑器
- 建议同时启用 Classic Editor（经典编辑器） 插件，并把默认编辑器设置为「经典编辑器」（本插件替换的是经典编辑界面）
- 进入「设置 → Joe 编辑器」可配置：前台渲染开关、移除添加媒体按钮、预览默认开启等
使用说明
- 在后台「写文章 / 编辑文章」页面，内容区即为 Joe Markdown 编辑器
- 写作内容为 Markdown 源码；发布/保存后由前台按 Markdown 渲染（请勿在后台切换到可视化模式查看，那是给经典编辑器用的）
- 主题的「添加付费隐藏内容」「添加内容组件」弹窗功能照常使用（弹窗内为原生编辑器）
常见问题
Q：启用后写文章页空白怎么办？
A：先 Ctrl+F5 强制刷新；确认插件文件完整上传（至少包含 assets/editor/ 下 7 个文件与 assets/owo/ 目录）；若仍有问题请反馈并附控制台报错截图。
Q：图片粘贴后没上传？
A：确认已登录且有上传权限；上传接口使用 WordPress 原生 media_handle_upload，成功后自动插入媒体库，图片显示在「媒体库」中。
Q：为什么不支持古腾堡编辑器？ A：本插件定位为替换经典编辑器（Markdown 写作），与古腾堡是两套体系，启用后请在经典编辑器环境下使用。
Q：网易云音乐组件怎么没了？
A：应作者要求已移除 {music-list} / {music} 组件，残留的短代码会自动清理。
更新日志
v1.0.0（2026-09）
- 首发：Typecho Joe 编辑器完整移植 WordPress
- 替换经典编辑器界面，54 按钮 + 实时预览
- 图片粘贴自动上传媒体库
- 前台 Markdown 渲染 + 20+ 短代码组件 + 表情 + 代码高亮
- 剔除执念平台绑定、移除网易云音乐组件
- 与主题弹窗 TinyMCE 共存，自动保存/字数统计适配
