ueditor调用上传图片和附件

最新推荐文章于 2025-04-02 12:34:52 发布

firstcode666

最新推荐文章于 2025-04-02 12:34:52 发布

阅读量902

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

原文链接：https://blog.youkuaiyun.com/u013373006/article/details/86768733

javascript 专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何外部调用百度富文本编辑器UEditor的多图上传和附件上传功能，实现独立的插件，节省开发成本。通过监听编辑器的插入动作，经过源码研究，成功实现这一目标，适用于网站内容管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说到百度富文本编辑器ueditor（下面简称ue），我不得不给它一个大大的赞。我们在网站建设、前端开发时，网站的内容管理就使用了它。对于它的多图片上传和附件上传，个人感觉很好用，我就琢磨着是否可以外部调用多图上传和附件上传组件为自己所用，并封装成一个插件，节省单独开发的成本。

有了这个想法后，着手操作，理下实现思路，得出实现的关键在于监听这两个组件在编辑器里的插入动作。打开源码，苦心研究，皇天不负苦心人，终于摸索出解决方法，现在分享出来，给拥有同样想法的小伙伴，为网站建设届尽一份力。

注：本文基于UEditor1.4.3.3版本。

1、引入ue相关文件，写好初始代码

为了更好的封装整一个单独的插件，这里我们要做到示例化ue后隐藏网页中的编辑窗口，并移除焦点。

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>外部调用UEditor的多图上传和附件上传</title>
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
<style>
ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
li{list-style-type: none;margin: 5px;padding: 0;}
</style>
</head>
<body>
<h1>外部调用UEditor的多图上传和附件上传示例</h1>

<button type="button" id="j_upload_img_btn">多图上传</button>
<ul id="upload_img_wrap"></ul>

<button type="button" id="j_upload_file_btn">附件上传</button>
<ul id="upload_file_wrap"></ul>


<textarea id="uploadEditor" style="display: none;"></textarea>


<script type="text/javascript">

// 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。
var uploadEditor = UE.getEditor("uploadEditor", {
isShow: false,
focus: false,
enableAutoSave: false,
autoSyncData: false,
autoFloatEnabled:false,
wordCount: false,
sourceEditor: null,
scaleEnabled:true,
toolbars: [["insertimage", "attachment"]]
});

// todo::some code

</script>
</body>
</html>