- 前端
- UI组件
- 富文本
【免费下载链接】ueditor
rich text 富文本编辑器
UEditor 是由百度前端团队开发的所见即所得富文本 Web 编辑器,本仓库(README.md)随包提供的 changelog.md 完整记录了从 1.0(2011 年 7 月)到 1.5.0 的每一次迭代:新增功能、bug 修复、前后端交互重构与配置项演进。本文将这份变更记录作为主线,逐版本梳理 UEditor 的核心能力如何一步步成型,并对照仓库源码(_src/、ueditor.config.js、Gruntfile.js等)验证关键条目背后的真实实现,帮助读者理解各配置项的来源与用途,在二次开发、选型升级或排查历史 bug 时快速定位依据。
版本演进总览:一部富文本编辑器功能史
从 changelog 的版本序列可以清晰看到 UEditor 的三条演进主线:
- 编辑体验线:表格编辑(1.2.5 整体重构)→ 粘贴过滤(1.2.6 黑白名单重写)→ Word/Excel 兼容(1.3.6)→ 拖拽上传、截图粘贴(1.3.5)→ 消息提示、右键菜单开关(1.4.x);
- 前后端交互线:文件上传从 swfupload/自研 flash 方案 → 1.4.2 统一为 webuploader,并重构为"后端统一配置、前端自动打通";
- 工程化线:目录结构精简(1.1)→ grunt 打包(1.3.5)→ UI 与编辑器桥接层独立为
adapter目录(1.4.2)。
下表为各里程碑版本的核心定位:
| 版本 | 核心主题 | 代表性能力 |
|---|---|---|
| 1.0 | 功能首发 | 完成基础编辑功能开发 |
| 1.1.x | 基础打磨 | 锚点、首行缩进、右键菜单、插入代码、格式刷、tab 键、多级列表、自定义样式、图片边距 |
| 1.2.x | 能力爆发 | 表格重构、自动保存、查找替换正则、list 重写、过滤机制重写、路径自动识别、远程图片抓取、附件上传、自动排版 |
| 1.3.x | 兼容与体验 | 视频上传、自动保存、数据可视化、目录大纲、表格排序、qq 截图粘贴上传、w3cRange 统一、grunt 打包 |
| 1.4.x | 架构重构 | 上传统一 webuploader、后端统一配置、serverparam、jsonp 跨域、新配置开关、消息提示 |
| 1.5.0 | 收尾修复 | 嵌套 span 样式修复 |
1.4.x:前后端交互重构与新配置开关
1.4.2 上传体系重构:webuploader 与后端统一配置
1.4.2 是 changelog 中改动最重的一个版本,其核心是重构前后端交互:
- 前端上传模块统一改用 webuploader(仓库 third-party/webuploader/ 下提供了 webuploader 全系列构建,包括 flash 与 html5only 版本);
- 文件上传配置方式整体重构,改为统一在后端配置、前后端自动打通;
- 各上传模块提交地址统一,通过
action参数区分类型; - 提供
serverparam命令,可在提交时追加任意参数; - 统一后端返回数据格式、在线附件预览与插入、列表分组加载;
- 增加点击直接选择文件上传图片插件,优化粘贴图片的 loading 与出错提示;
- 增加 jsonp 跨域请求支持。
其中serverparam命令在 _src/plugins/serverparam.js 中有完整实现(该插件声明@since 1.2.6.1,说明命令本身在 1.2.6.1 已存在,1.4.2 将其纳入统一上传链路)。其execCommand支持四种用法:
// 1. 不传参:清空全部附加参数 editor.execCommand('serverparam'); // 2. 传 key(无 value):删除指定项 editor.execCommand('serverparam', 'name'); // 3. 传 key + value:添加单项 editor.execCommand('serverparam', 'name', 'hello'); // 4. 传对象:批量覆盖 editor.execCommand('serverparam', {'name': 'hello'}); // 5. 传函数:动态生成参数 editor.execCommand('serverparam', function(editor){ return {'key': 'value'}; }); // 查询当前附加参数 editor.queryCommandValue('serverparam'); // 返回 {'key': 'value'}“后端统一配置”的机制对应 _src/core/loadconfig.js:编辑器初始化后会通过getActionUrl("config")向服务端config接口发起请求(跨域时自动降级为 jsonp),成功后把返回的配置utils.extend(me.options, config)合并进前端配置,并触发serverConfigLoaded事件;isServerConfigLoaded()与afterConfigReady()则用于判定/等待服务端配置加载完成。这也是 changelog 1.4.3 第 12 条“后端配置项没正常加载时禁用上传功能”的实现基础。
1.4.x 新增配置项:三个实用开关
1.4.2 新增了三个可由开发者直接配置的开关,均可在 ueditor.config.js 中取消注释修改,或在实例化时传入:
| 配置项 | 默认值 | 作用 | 源码位置 |
|---|---|---|---|
enableContextMenu | true | 右键菜单总开关,置false时插件直接 return 不再构建菜单 | _src/plugins/contextmenu.js |
disablePInList | false | 指定产出的列表中是否嵌套 P 标签;置true时通过addOutputRule在导出时把 li 内的 p 标签拆掉 | _src/plugins/list.js |
retainOnlyLabelPasted | false | 粘贴时“只保留标签”模式,剥离标签所有属性;置true时走getPureHtml()处理(仅保留 img 的 src 等极少数属性) | _src/plugins/paste.js |
retainOnlyLabelPasted的实现值得细看:在 paste.js 中,filter()完成粘贴内容清洗后,若me.getOpt("retainOnlyLabelPasted") === true,则插入的是getPureHtml(htmlContent),该函数会把 span、div 标签整体剥离,其余标签只保留src/href/name三个属性,用于粘贴来自 Word 等富文本来源时得到最干净的标签骨架。
1.4.3 / 1.4.4:安全修复与细节优化
1.4.3(16 项修复)中的重点:
- 修复提交 jsonp 请求时
callback参数的 XSS 漏洞(安全类修复); - 修复
hasContents在非 IE 下只有空格时误判为有内容的问题; - 修复粘贴 Word 内容时误将
cm、pt文本命中为 px 的问题(对应 _src/core/filterword.js 的度量单位过滤逻辑); - 新增 jsp 后台多种服务器配置下的路径定位;
- 把遗漏在代码中的配置项整理进
ueditor.config.js; - 新增消息提示功能(冒泡提示),对应 _src/adapter/message.js;
- 优化上传功能提示:后端配置未正常加载时禁用上传;
- 修复单图上传按钮与 jqueryValidate 的兼容,简化结合操作(参见 _examples/jqueryValidation.html);
- 修复删除编辑器后再次创建时丢失原 id 的问题;
- 修复查找替换在一些块节点中替换错误。
1.4.4(7 项修复)中的重点:
- 产出数据中的 color 自动从 rgb 格式转为 16 进制(对应 _src/plugins/defaultfilter.js 的
rgb2Hex输出规则,默认true); - 过滤掉 Word 粘贴的 a 标签被误命中为锚点;
- 扩展的 UI 组件需配置
toolbars参数才可显示(README 中 dev-1.5.0 二次开发说明亦强调:自定义插件的 uiname 必须加入 toolbars 数组且必须小写); - ASP 创建目录 bug 修复、JSP 默认上传路径错误修复;
- 添加链接前缀白名单,白名单内的前缀不加
http://(对应ueditor.config.js中的allowLinkProtocols注释项,默认建议['http:', 'https:', '#', '/', 'ftp:', 'mailto:', 'tel:', 'git:', 'svn:'])。
1.5.0:嵌套 span 样式修复
1.5.0 是 changelog 记录的最后一个版本,仅一条修复:修复对嵌套的 span 标签设置样式时,被嵌套的标签不能正确设置上给定样式的问题。该问题与编辑器对行内元素(inline)的样式写入逻辑相关——setStyle在嵌套 span 场景下需要正确处理父子节点的 style 合并,属于样式命令(如 _src/plugins/basestyle.js)的边界修复。
1.3.x:粘贴兼容、自动保存与数据可视化
1.3.6:Word/Excel 粘贴误命中的治理
1.3.6 的 15 项修复高度聚焦“从外部文档粘贴”这一高频场景:
- Word 列表自动转 list 标签默认关闭:新增
autoTransWordToList配置项(默认false),开发者可酌情开启。源码实现在 _src/plugins/list.js 与 list.js 的 beforepaste 规则——开启后会对MsoListParagraph段落按序号正则(如^\d+\.、^[\u4E00...])识别并转换为 ol/ul; - 禁止表格嵌套:新增
disabledTableInTable配置项(默认true),解决 Excel 粘贴进来的冗余嵌套表格问题。源码见 defaultfilter.js:当 table 位于 td 内且配置开启时,该嵌套 table 被替换为纯文本; - 过滤 Excel 表格粘贴到 IE 中的 bitmap 冗余占位图片;
- 其他修复包括:预览窗口无滚动条、IE6/7 自动寻址、ff 图片拖拽不触发 contentchange、注释被删除、源码模式下 setContent 不可用、IE11 宽度 100% 不自适应、IE67 destroy 报错、插入代码模式下 IE9+ 键盘操作失效等。
1.3.6 同时新增视频上传插入功能,支持多浏览器自适配播放器(对应 _src/plugins/video.js 与 third-party/video-js/、dialogs/video/)。
1.3.5:自动保存、数据可视化与工程化
1.3.5 新增 9 项能力、优化 14 项,其中对后续版本影响深远的有:
新增:
- ASP 后台支持;
- 本地自动保存——对应 _src/plugins/autosave.js,默认
enableAutoSave: true、saveInterval: 500(毫秒)。其机制是:编辑器 ready 后以"协议+主机+路径+容器id"生成唯一saveKey,监听contentchange事件延迟saveInterval毫秒执行保存,内容写入 LocalStorage/UserData,并提供getlocaldata、clearlocaldata、drafts三个命令(drafts即工具栏上的"草稿箱"按钮); - 数据可视化展示功能(对应 _src/plugins/charts.js 与 dialogs/charts/,基于 third-party/highcharts/);
- 编辑器实例新增
isFocus、blur方法; - Chrome 下图片拖拽调整宽高;
- 高端浏览器下 qq 截图粘贴上传、拖拽图片到编辑器上传;
- 表格插入列标题功能;
- 设置表格可排序,支持表格在预览页排序——对应 _src/plugins/table.sort.js(
sortTable内置orderbyasc、reversebyasc、orderbynum、reversebynum等比较函数,按data-sort-type标记排序方式)与_parse/table.js; - 生成目录功能(对应 _src/plugins/section.js)。
优化:
- IE8 以上统一使用 w3cRange(见 _src/core/Range.js 中
browser.w3crange分支); - 使用 grunt 作为打包工具——本仓库根目录 Gruntfile.js 即其完整实现:读取
_examples/editor_api.js中的依赖列表 concat 成ueditor.all.js,再 uglify 成ueditor.all.min.js,并支持--server(php/asp/jsp/net)与--encode(utf8/gbk)参数控制打包产物; - 过滤规则对 script/style 内容的转码处理;
- 自动寻址功能重构;
- 图片上传路径可配置,增加前后端路径验证;
- uparse 拆分重构(见 ueditor.parse.js 与 _parse/ 下的 parse、table、video、list 等模块);
- 背景颜色功能重构,可在预览页显示背景;
- 重写查找替换插件,解决 ff 下
window.find失效——新实现在 _src/plugins/searchreplace.js,完全基于 Range 遍历文本节点实现,不再依赖浏览器原生 find。
1.2.x:功能爆发期,多数核心能力在此定型
1.2.6 / 1.2.6.1:过滤机制重写与路径自动识别
1.2.6(11 项)中最具架构意义的是第 2 条:重写过滤粘贴机制,采用黑白名单,开发者可以书写符合自己需求的过滤规则,“甚至可以完全定义标签的属性、style 上的某个属性及其数值”。这套机制沉淀为 _src/core/filternode.js + _src/core/filterword.js + _src/plugins/defaultfilter.js 三层:
defaultfilter.js定义默认的输入/输出过滤规则(div→p 转换、script/style 转 cdata 存储、img 的_src标记、bookmark 清理、rgb2Hex 等);- 开发者通过
filterInputRule/filterOutputRule/filterRules扩展自定义规则(见 _src/plugins/paste.js 中me.options.filterRules的应用); - 同一版本还支持黑白名单配置,并默认
allowDivTransToP: true(见 defaultfilter.js)。
1.2.6 其他要点:编辑器路径可自动识别(不再手动设置)、数据同步改为失去焦点即执行(autoSyncData)、字体边框、backspace/del 优化、插入代码支持 tab 与回车(对应 _src/plugins/insertcode.js)、表格排序与隔行显示、closure 压缩工具、undo/redo 优化。
1.2.6.1(19 项)的关键增量:
- 查找替换支持正则表达式(延续至 1.3.5 的重写);
- 类似 Word 的快捷菜单(默认关闭),对应 _src/ui/shortcutmenu.js;
allowDivTransToP提供配置开关(默认true);- 手动加载语言文件,避免 IE 下 "not import language file" 错误;
- 工具栏支持指定位置折行:
'|'表示分隔符、'||'表示折行; - 表格操作升级,支持 IE6+ 的拖拉与双击操作;
initialStyle传入的 css 优先级最高,其次是指定外部 css 文件;- 修复编辑器禁用状态下仍可拖动表格边框、分割线不可删除、初始化内容多时编辑器不自动长高等问题。
1.2.5:table 整体重构与字数统计
1.2.5 共 20 项新增、5 项优化,是表格能力的奠基版本:
- table 整体重构:插入表头/标题、拷贝、任意调整宽高、任意前插后插行列、键盘操作仿 Word、平均分布行列、单元格对齐、选中部分删除、重写表格/单元格属性 dialog——对应 _src/plugins/table.action.js(内含
maxColNum: 20、maxRowNum: 100、defaultCols: 5、defaultRows: 5等表格默认参数)与 _src/plugins/table.cmds.js; - 粘贴支持纯文本、源码、纯标签三个模式选择;
- 字数统计:新增
getContentLength接口与wordcount事件——见 _src/plugins/wordcount.js,它监听contentchange与输入停顿(keyup 后 200ms)触发wordcount事件,配合ueditor.config.js中wordCount、maximumWords(默认 10000)、wordCountMsg、wordOverFlowMsg使用; - 图片上传支持参数动态绑定;
- list 重写,支持
一、、一)、、(一)、1)、、(1)、——等新列表标签(见 _src/plugins/list.js 的customStyle与insertorderedlist/insertunorderedlist配置),调整 list 中 tab 键逻辑,新增maxListLevel限制列表层级; - 全屏快捷键
ALT+Z; - 新增 uparseplugin.js 展示页加载器(ueditor.parse.js)。
1.2.4 / 1.2.3 / 1.2.2:皮肤、容器缩放与国际化
1.2.4新增:官网 API 文档、CSS 按 UI 结构模块化拆分(对应 themes/default/_css/ 下的 button.css、combox.css、dialog.css 等分模块样式)、皮肤切换功能(theme配置项)、编辑器容器拖动缩放(scaleEnabled、minFrameWidth、minFrameHeight)、音乐插件(dialogs/music/)、源码模式全屏按钮、UE.getEditor工厂方法、jquery 与 jqueryValidation 配合 demo、初始化宽高配置(initialFrameWidth、initialFrameHeight)。
1.2.3新增:国际化支持(lang/ 下 zh-cn/en 语言包)、涂鸦功能(dialogs/scrawl/)、大小写功能、getAllHtml方法(配合allHtmlEnabled配置)、插入模板、背景功能、UE.instants全局对象、Editor.ready方法、topOffset配置(AutoFloat 时工具栏距顶部高度)、sourceEditorFirst配置、表格内实例化编辑器 demo、getDialog接口。
1.2.28 项修复:不可编辑时可配置可用功能(如全屏)、table 边框为 0 用虚线显示、附件上传成功显示初始文件名、图片上传超时提示、自动排版对 H1 不生效、超链接含 script 标签时预览执行 script 的安全问题。
1.2.1:多实例与表单集成
1.2.1 共 23 项,其中与“多实例 + form 提交”相关的能力成为后续版本一直沿用的基础:
- 按住 CTRL 连续插入表情、CTRL+Enter 提交表单;
readonly属性,实例上新增setEnabled/setDisabled;getPlainTxt方法(保留段落格式的纯文本);initialContent赋值顺序修正:标签内容优先,其次 initialContent;insertHtml命令添加过滤机制;getContent将 转空格;- 与后台交互的路径整体调整,提供 jsp 版本;
- 重写 ui 与编辑器交互层,dialog 改为显示时创建,整体代码减少 22k;
- 多实例使用一个 name 作为 form 提交键值,后台都可取到;
- 新增配置项:
autoClearEmptyNode(是否删除空 inline 节点,默认 true,见 Editor.defaultoptions.js)、isShow+ 实例setShow/setHide; - 图片上传对话框可自定义默认 Tab。
1.2.0:远程图片抓取与自动排版
1.2.0 共 27 项,代表性新增:
- 远程图片抓取:对应 _src/plugins/catchremoteimage.js,开启后粘贴/输入中所有非本地域名的图片会被抓取为本地图片(
catchRemoteImageEnable默认false,1.2.0 时期即引入,抓取成功后触发catchremotesuccess事件并返回成功/失败列表); - 服务器图片在线管理、附件上传、自动排版(对应 _src/plugins/autotypeset.js,配置项
autotypeset内含mergeEmptyline、textAlign、imageBlockLine、indentValue等,其选项在 1.4.2 起保存到 localStorage/UserData); - baidu 图片搜索插入、浮动工具栏重写(混乱模式滚动);
- 新增
contentchange事件(此后大量插件——自动保存、字数统计等——都依赖它作为内容变更信号); - 重写 autoheight 插件,去掉 setInterval 方案;
- 插入视频可预览、界面加入视频搜索;
- ie 截屏功能、单元格属性编辑、行间距展示方式修改、段前距/段后距;
- 状态反射优化:获得焦点才触发查询(对应 _src/adapter/editorui.js 的查询逻辑)。
1.1.x:早期奠基,从 iframe.css 到编辑器容器
1.1.x 系列验证了"配置化 + 容器化"的核心设计:
- 1.1.7.2/1.1.6.1:去掉了 iframe.css,改为在配置文件中配置(现为 ueditor.config.js 中的
iframeCssUrl: URL + 'themes/iframe.css'与iframeJsUrl),避免 css 找不到;使用script 标签代替 textarea 作为编辑器容器,简化前后端转码配置(README 的 demo 即script id="container" type="text/plain"写法); - 1.1.5:右键菜单改为"只显示选区内可操作的条目";整合浮动 toolbar 为 autofloat 插件(对应 _src/plugins/autofloat.js);配置项全部集中到配置文件;list 放弃原生改为手动实现;
- 1.1.2:格式刷、上下标互斥、form 提交支持、
focus初始化属性、autolink 支持(非 IE 输入链接自动加 a 标签)、google 地图支持; - 1.1:删除链接机制改为可一次删除多个超链接;改变目录结构方便部署,大大减少引入的 js 数量(为后续
_src模块化 + grunt concat 打包奠定基础)。
构建与部署:如何从源码产出可用版本
changelog 1.3.5 引入 grunt 打包后,仓库的构建链路由 Gruntfile.js 定义:
- 读取 _examples/editor_api.js 中
[ ... ]标注的 js 依赖清单(Util.fetchScripts),concat 生成dist/<encode>-<server>/ueditor.all.js; - cssmin 压缩 themes/default/_css/ueditor.css(含
@import的各分模块样式); - uglify 生成
ueditor.all.min.js与ueditor.parse.min.js; - copy 复制 html、themes、dialogs、lang、third-party 以及对应后端目录(php/asp/jsp/net,由
--server参数决定); - 根据后端类型改写
ueditor.config.js中的serverUrl(php→controller.php、net→controller.ashx 等)与文件编码(--encode gbk时 utf-8→gbk、asp 使用 936)。
部署体验可直接参考 README.md 的入门章节:npm install后执行grunt default,再按 demo.html 模板引入ueditor.config.js与ueditor.all.js并用UE.getEditor('container')实例化;实例化时可传参覆盖配置(如autoHeight: false),配置项全集见 ueditor.config.js(含serverUrl、toolbars、initialFrameWidth/Height、enableContextMenu、catchRemoteImageEnable、autotypeset、maximumWords、allowLinkProtocols等 60 余项,且所有注释项均为默认值,升级时旧配置可无缝沿用)。
结语:changelog 是理解 UEditor 的最佳入口
纵观 changelog.md,UEditor 的演进脉络高度清晰:早期(1.0~1.1.x)解决“能用”,中期(1.2.x~1.3.x)解决“好用”——表格、列表、粘贴过滤、自动保存、查找替换等高频能力全部定型于这一时期;后期(1.4.x)则聚焦架构健康度——上传体系统一、前后端配置打通、跨域支持、安全加固。对于二次开发者而言,这份 changelog 不仅是版本说明书,更是一份"配置项考古地图":文中每个新配置项(enableContextMenu、disablePInList、retainOnlyLabelPasted、autoTransWordToList、disabledTableInTable、rgb2Hex、maxListLevel、scaleEnabled、allowLinkProtocols等)都能在_src/plugins/或ueditor.config.js中找到对应的源码实现与默认值,可直接对照排查问题或按需开启能力。
- 前端
- UI组件
- 富文本
【免费下载链接】ueditor
rich text 富文本编辑器
相关推荐
bootstrap-table 版本演进全解读:从 CHANGELOG 看 1.0 到 1.27 的架构变迁与技术路线
bootstrap table 版本演进全解读:从 CHANGELOG 看 1.0 到 1.27 的架构变迁与技术路线 导读 :bootstrap table
前端UI组件Thrust 版本演进全解读:从 CHANGELOG 看 1.0 到 2.x 的架构变迁、破坏性变更与性能优化
Thrust 版本演进全解读:从 CHANGELOG 看 1.0 到 2.x 的架构变迁、破坏性变更与性能优化 本篇文章以 Thrust 官方 CHANGELO
科学计算ant-design-x-vue 版本演进全解读:从 CHANGELOG 看 v0.1.3 到 v1.6.0 的功能里程碑与升级指南
ant design x vue 版本演进全解读:从 CHANGELOG 看 v0.1.3 到 v1.6.0 的功能里程碑与升级指南 本文以仓库根目录的 CHA
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考