最近,我在项目中需要嵌入一个富文本编辑器,考虑到百度ueditor的强大功能,决定使用它。然而,从windows+eclipse环境转到mac+idea后,遇到了几个问题。经过一番努力,终于解决了这些问题,现分享我的经验。
环境:Mac + IDEA + UEditor
基于 Maven+SSM项目
▌问题1:自我认为已完成配置,但启动后,页面没有显示富文本编辑器。
▌问题2:点击图片上传时,显示后端路径配置错误。
▌问题3:默认上传的图片存储在哪里?
01
下载 UEditor
从官网下载UEditor。链接:https://www.php.cn/link/26e12e8ce3cf76d35b5ab714143378cd
02
将UEditor放入项目中,我将其放在了webapp下的static文件夹中。结构如下图所示:(index.html已被我移至webapp的第一级子目录,并重命名为index.jsp。这样做的原因是便于访问。
03
将UEditor -> jsp -> lib文件夹中的jar文件复制到WEB-INF -> lib中,或者在pom.xml中添加相应的Maven依赖。
commons-codec-1.9.jar
commons-fileupload-1.3.1.jar
commons-io-2.4.jar
json.jar
ueditor-1.1.2.jar
04
将UEditor -> jsp中的config.json和controller.jsp移动到webapp的第一级子目录,与static、WEB-INF、index.jsp同级。
为什么要这样做?在Windows+Eclipse中不需要这一步,但在Mac+IDEA中必须如此(Windows+IDEA可能也需要)。原因之一是IDEA的静态资源文件加载方式不同。其他原因我目前还不清楚,欢迎进一步讨论。
执行此步骤后,图片上传不再提示后端配置错误。
05
在移动controller.jsp时,注意控制台可能会出现阻止移动的提示。(但实际上文件已经移动)移动后,打开ueditor文件夹下的ueditor.config.js(如果出现阻止移动的提示,也会提示打开此文件)。在第32和33行:
修改为:
因为之前请求的是jsp下的controller.jsp。我们在第四步已经将其移动,因此需要修改。这是解决图片上传提示后端服务器配置错误的另一个方法。
06
启动项目,访问index.jsp。
在index.jsp中,注意修改引入js、css的路径,其他部分保持不变,测试UEditor是否可用。
至此,在项目中引入百度UEditor富文本编辑器的工作就完成了,具体的使用API可以参考UEditor官网的详细说明。
回答开头提出的问题:
- 完成引入,但启动后,页面没有显示富文本编辑器
原因可能是index.jsp中没有修改js、css的路径。
2. 点击图片上传时,显示后端路径配置错误
仔细操作观察第四步和第五步,我就是这样解决的。
或者配置config.json中的imageUrlPrefix。
配置方法:
如果你的项目在浏览器访问时需要输入项目名,则在此将imageUrlPrefix的值改为你的项目名;
如果你已经设置了项目在浏览器访问时不需要项目名,此处imageUrlPrefix可以留空。
是否需要输入项目名的设置在IDEA右上角的edit configuration -> Application context:
3. 默认上传的图片存储在哪里?
首先查看配置文件config.json,就是之前被你移出的那个json文件。
imagePathFormat就是基于项目发布后的路径,在后面继续添加的具体路径。
那么问题来了,基于IDEA + 自己配置Tomcat的项目发布在哪里?
经过一番搜索,很多人说在${user.home}/.IntelliJIdea/system/tomcat下面。
在IDEA中配置的Tomcat,在运行时IDEA不会把项目放到Tomcat路径下,而是复制一份足够的配置文件到${user.home}/.IntelliJIdea/system/tomcat,各个项目互不干扰。
(原来如此,互不干扰,各自安好)
我并未找到
(可能是因为这是Windows下的路径),但这提供了一个思路,在IntelliJIdea的Tomcat文件夹下应该有。Mac电脑在命令行直接输入:
可以查到Tomcat相关的文件夹。恰巧有一个出现在IntelliJIdea文件夹下,就是它了。
去找:
最后追查到一个ROOT.xml文件,查看它:
嘿,看见没,path就是上面设置的Application context的值,docBase就是发布后的项目路径,它就在你的项目所在地的target文件夹,target下一级目录就是你的项目名,逐步可查到你配置的imagePathFormat的路径。
至此,就找到了UEditor富文本编辑器图片等资源在IDEA下发布的默认路径。(Oh,yeah,开心)
注意:一定要保证前后配置路径的一致性,这样才能使所有功能正常。它们都是前呼后应的!!!
备注:${user.home}在Windows系统下就是C:/用户/xxx。这个我没测试,只提供一个思路。
现在你对百度富文本编辑器UEditor是不是有了更深的认识呢。都是边学边长见识,第一次遇见不会,就去查别人的,然后记住,第二次会了就可以啦。加油。
原创码字不易