Mac+IDEA+百度富文本UEditor

最近，我在项目中需要嵌入一个富文本编辑器，考虑到百度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行：

, serverUrl: URL + "jsp/controller.jsp"

修改为：

// 服务器统一请求接口路径, serverUrl: URL + "../../controller.jsp"

因为之前请求的是jsp下的controller.jsp。我们在第四步已经将其移动，因此需要修改。这是解决图片上传提示后端服务器配置错误的另一个方法。

06

启动项目，访问index.jsp。

在index.jsp中，注意修改引入js、css的路径，其他部分保持不变，测试UEditor是否可用。

至此，在项目中引入百度UEditor富文本编辑器的工作就完成了，具体的使用API可以参考UEditor官网的详细说明。

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

回答开头提出的问题：

1. 完成引入，但启动后，页面没有显示富文本编辑器

原因可能是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电脑在命令行直接输入：

find ~ -name "tomcat"

可以查到Tomcat相关的文件夹。恰巧有一个出现在IntelliJIdea文件夹下，就是它了。

去找：

/Users/电脑用户名/Library（中文名字：资源库）/Caches/IntelliJIdea2019.2/tomcat/Unnamed_项目名/conf/Catalina/localhost/ROOT.xml

最后追查到一个ROOT.xml文件，查看它：

嘿，看见没，path就是上面设置的Application context的值，docBase就是发布后的项目路径，它就在你的项目所在地的target文件夹，target下一级目录就是你的项目名，逐步可查到你配置的imagePathFormat的路径。

/Users/电脑用户名/develope/workspace/ideaworkspace/项目名/target/项目名/ueditor/jsp/upload/image/20200225/1582639912741024173.jpeg 

至此，就找到了UEditor富文本编辑器图片等资源在IDEA下发布的默认路径。（Oh，yeah，开心）

注意：一定要保证前后配置路径的一致性，这样才能使所有功能正常。它们都是前呼后应的！！！

备注：${user.home}在Windows系统下就是C:/用户/xxx。这个我没测试，只提供一个思路。

现在你对百度富文本编辑器UEditor是不是有了更深的认识呢。都是边学边长见识，第一次遇见不会，就去查别人的，然后记住，第二次会了就可以啦。加油。

原创码字不易

以上就是Mac+IDEA+百度富文本UEditor的详细内容，更多请关注php中文网其它相关文章！