富文本编辑器ueditor的使用实践

最新推荐文章于 2025-05-03 14:26:21 发布

小熊猫爱Code

最新推荐文章于 2025-05-03 14:26:21 发布

阅读量574

点赞数

分类专栏：技术学习工具类文章标签： ueditor java jsp

本文链接：https://blog.youkuaiyun.com/xxmeng2012/article/details/76066896

版权

12 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍了富文本编辑器ueditor的使用步骤，包括从官网下载，将其导入到jsp项目，配置功能及上传设置，解决运行过程中遇到的问题。针对上传功能，重点强调了imagePathFormat和imageUrlPrefix的配置。最后提到了解决UEditor未加载完成导致的错误方法。

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

1.ueditor官网

解压后导入到java项目中，本人的项目目录如下，供参考

jsp/lib文件夹中的jar包，因为是maven项目，我选择从maven服务器获取配置后，加在pom文件中，如下

在jsp页面中添加

<script id="editor" type="text/plain"></script>

运行，即可看到该富文本编辑器

ueditor提供了非常多功能，但实际使用中可能并不需要，此时只要在ueditor.config.js中选择性删除即可

此时，点击上传图片，发现提示报错“后端配置项没有正常加载，上传插件不能正常使用！”，或者配置后提示上传失败，不能正常显示上传图片等。

网上查找后，发现是配置问题，主要是上传路径imagePathFormat 与显示路径前缀imageUrlPrefix 的配置，这些配置都存放在/jsp/config.json文件中。

通过一步步跟踪查看源码（如有过程需要，可以单独写一篇贴出来），修改配置如下（与editor文件目录一致）：

其他配置类似，即可实现上传与显示。

页面使用UEditor.setContent() 时报错， Uncaught TypeError: Cannot set property 'innerHTML' of undefined 错误

经查，是由于UEditor未加载完成导致，使用如下方式即可

var ue = UE.getEditor('editor');
ue.ready(function() {
    ue.setContent('<b>this is the content</b>');
});

感谢看到此处的你，有问题欢迎讨论！❤❤❤