wangEditor编辑器自定义上传图片入门

最新推荐文章于 2025-03-04 17:26:03 发布

微笑的鱼_

最新推荐文章于 2025-03-04 17:26:03 发布

阅读量1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_30907845/article/details/113727177

版权

本文介绍了如何在jsp页面中使用wangEditor编辑器，并实现本地图片上传功能。通过在js代码中添加`editor.config.uploadImgServer='/upload-img';`来配置服务器接口，实现了本地上传图片的入口。同时，可以设置`editor.config.showLinkImg=false;`关闭网络图片上传功能。感谢wangEditor团队提供的简洁易用的编辑器。

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

wangEditor编辑器自定义上传图片入门

初次入坑，首先被界面所吸引，其次轻量级使用，真香

从官网进去下载js源码，CDN 链接 https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js
事情是这样的：我们项目需要在jsp一个弹窗页面引入，同事之前尝试用UEeditor,没搞好，让我帮忙，一看，那界面…最主要的是只能全局引入才能生效，果断劝退我。。。

开撸

html代码：

<div id="div1">
   <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>

js代码：

<script src="<%=basePath%>/js/wangEditor.min.js"></script>
<script type="text/javascript">
	var E = window.wangEditor;
	var editor = new E('#div1');
	editor.create();
</script>

贴代码刷新，打开页面很满意~~~
然后继续试下上传图片。。额。。。什么情况，心慌。。看下图
在这里插入图片描述
只能上传网络图片啊，可我们要上传本地图片。。果断翻文档，尝试。。。。。。最后这样，完美

在上面js代码加一行代码就行了，这行代码作用是：配置服务端接口，加了后会显示本地上传图片的入口

editor.config.uploadImgServer = '/upload-img';

ps：这是两种上传图片共存的，如果不想使用上传网络图片功能可再加一句：

editor.config.showLinkImg = false;

最后感谢此贡献此框架的所有前辈

官网：https://www.wangeditor.com/