KEditor-轻量、美观的微信公众号风格富文本编辑器
0 / 0 / 创建于 2天前
kyle-dong 的个人博客
KEditor
轻量、美观的微信公众号风格富文本编辑器。纯前端实现，无任何后端依赖：图片/视频走上传（普通整包 + 大文件分片），一键导入 Markdown 文件/文本转成可编辑 HTML，随时切换 HTML 源码模式查看或改写产物。支持 <script> 直接引入与 Vue 3 安装集成。
- 体积：
dist/keditor.umd.min.js约 192 KB（gzip 61 KB），未压缩版 300 KB（gzip 78 KB），零运行时依赖（含内置高亮器与 Markdown 转换器），样式随 JS 注入 - 版式：677px 正文版心、17px/1.75 行距，与公众号观感一致；宽屏下版心自动生长，两侧留白恒定，不会留出一大块空白
github地址
文档地址
功能
| 分类 | 能力 |
|---|---|
| 排版 | 段落样式面板（正文/标题一/标题二/标题三，带真实字号预览与用途说明）、字号面板（12–32px）、字体颜色与背景高亮（主题色 + 标准色 + 最近使用 + 自定义取色）、粗斜下删、四种对齐、有序/无序列表、引用、表格（网格选择）、代码块（20 种语言可选 + 语法高亮）、分割线、链接、清除格式 |
| 媒体 | 图片/视频本地上传（点击、拖拽、粘贴截图）或直接填网络链接插入（自动校验可访问性）；上传进度与速度、取消、失败重试、多图多选、大图自动压缩、双击看原图、气泡工具条（对齐/宽度/圆角/替换/删除）、选中图片后拖拽右下角把手实时缩放 |
| 上传 | 普通上传与分片上传各自独立配置：uploader（整个文件一次请求）+ chunkUploader（切片并发，只需一个接口，响应里 url 非空即成功）；upload.mode 可选 auto（按体积自动选，默认 5MB 阀值）/ normal / chunk，chunkSize / concurrency / retries / fingerprint 可配；内置 mock、simple 适配器，也可自定义 upload/put 适配器 |
| 源码 | 工具栏右侧常驻「源码」按钮（⌘/Ctrl+Shift+K），进入后正文按钮置灰；格式化缩进、复制、直接编辑并应用（回填自动净化） |
| Markdown 导入 | 尾栏「导入MD」按钮打开导入面板：选文件 / 拖文件 / 粘文本，实时预览 + 结构统计，三种落点（替换全文 / 追加文末 / 插入光标）；把 .md 拖进正文即可转换；围栅代码块语言保留并高亮；未知语言、超大文件、只读、GBK 编码都有兜底 |
| 其他 | 实时字数/词数/图片视频统计、预览（手机/平板/电脑屏宽，API 与可选项）、全屏编辑、撤销重做（保留光标位置）、只读、宽屏版心自适应（两侧留白恒定，不随屏宽放大）、内容区高度默认随内容自动撑开（配了 height 才固定并内部滚动）、窄屏工具栏可左右滑动（常显滚动条 + 边缘渐隐 + 首次引导气泡 + 鼠标拖拽平移）且「导入MD/源码/全屏」固定右端 |
| 自定义按钮 | customButtons 往工具栏加下拉选择按钮：数据可静态配置或从接口读取（url / load），选中后按配置插入跳转链接或直接打开；面板支持搜索、分组、加载/失败重试/空态、缓存与强制刷新；position 可把它放到工具栏任意位置（含右侧吸附尾栏）；也可运行时 addButton / moveButton / removeButton / setButtonOptions |
安装
npm install kyle-editor
# 使用 Vue 组件的项目
npm install kyle-editor vue@^3或直接用 CDN（无需安装）：
<!-- unpkg / jsdelivr 默认入口就是压缩版，下面两种写法等价 -->
<script src="https://unpkg.com/kyle-editor"></script>
<script src="https://unpkg.com/kyle-editor/dist/keditor.umd.min.js"></script>零运行时依赖；样式随 JS 注入，不需要额外引入 CSS。Vue 是可选 peerDependency，只用核心 API 的项目不会被强制安装。
具体详细配置内容请到上述文档中查看
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：