UEditor 二次开发富文本编辑器
参考资料
UEditor 二次开发富文本编辑器
UEditor 二次开发富文本编辑器
简介
UEditor 是由百度前端团队开发的富文本编辑器,基于 JavaScript,支持多浏览器,提供丰富的文本编辑功能,可嵌入网页使用。
最新更新时间
2023年(官方维护已停止,但社区仍有更新)
新增功能(社区版)
支持 Markdown 编辑模式
优化图片上传(支持粘贴上传)
增强表格编辑功能
适配移动端编辑
修复已知安全漏洞
主要功能
✅ 文本编辑:加粗、斜体、下划线、字体、字号、颜色
✅ 段落排版:对齐方式、缩进、列表(有序/无序)
✅ 多媒体插入:图片、视频、音频、表格、链接
✅ 代码高亮:支持多种编程语言
✅ 全屏编辑:最大化编辑区域
✅ 自动保存:防止内容丢失
✅ 多语言支持:中文、英文等
下载方式
官方 GitHub(已归档,可下载历史版本):
https://github.com/fex-team/ueditor社区维护版(推荐):
https://github.com/ueditorx/ueditor
语法说明
1. 基础调用
var editor = UE.getEditor('editorContainer');
2. 自定义配置
UE.getEditor('editorContainer', { toolbars: [ ['bold', 'italic', 'underline'], ['insertimage', 'insertvideo'] ], autoHeightEnabled: false, initialContent: '默认内容' });
3. 常用方法
方法 | 说明 |
---|---|
getContent() | 获取编辑器 HTML 内容 |
setContent(html) | 设置编辑器内容 |
destroy() | 销毁编辑器实例 |
focus() | 让编辑器获取焦点 |
安装示例
1. 引入 JS 文件
<script src="ueditor.config.js"></script> <script src="ueditor.all.min.js"></script>
2. 添加编辑器容器
<div id="editorContainer" style="width: 800px; height: 400px;"></div>
3. 初始化编辑器
<script> var editor = UE.getEditor('editorContainer'); </script>
二次开发建议
🔹 修改配置:调整 ueditor.config.js
🔹 自定义插件:扩展新功能(如 Markdown 支持)
🔹 UI 优化:修改 CSS 适配项目风格
🔹 安全增强:过滤 XSS 攻击,限制上传文件类型
注意事项
⚠ 官方已停止维护,建议使用社区版或替代方案(如 TinyMCE、CKEditor)
⚠ 兼容性问题:部分新浏览器可能不支持旧版 UEditor
⚠ 安全性:需自行处理 XSS 防护