百度富文本编辑器UEditor的使用(Mac+IDEA)

标签: JavaWeb  web  java

百度富文本编辑器 UEditor 的使用

用博客记录成长,用分享链接同道中人。欢迎进一步交流,微信:MLL145692。

​近期,手下有一个项目。需要嵌入一个富文本编辑器,基于大厂的光环,选择了百度富文本 UEditor,之前都是 Windows+Eclipse ,转到 Mac+IDEA 后,发现差别还是有的,不管大小,即使有一点不对,都不符合预期效果。鼓捣了一下午,记录分享一下。

环境:Mac + IDEA + UEditor
基于 Maven+SSM项目

▌问题1 :自我认为完成了,但启动后,页面没有富文本页面。

▌问题2 :点击图片上传,显示后端路径配置错误。

▌问题3 :默认上传的图片存在了哪里?

01

下载 UEditor

官网自主下载。链接:UEditor官网

02

将UEditor移入项目,放在webapp下的目录即可。我的放在了 static 文件夹下。结构整体如图:(index.html 已被我移走放在了 webapp 第一级子目录下,改为了 index.jsp。为啥这样做? 当然是便于访问啦。

项目结构图

03

将 UEditor -> jsp -> lib 文件夹下的 jar 拷出放在 WEB-INF -> lib 中,亦或 maven 在 pom.xml 中引入对应的依赖也可。

☉ commons-codec-1.9.jar

☉ commons-fileupload-1.3.1.jar

☉ commons-io-2.4.jar

☉ json.jar

☉ ueditor-1.1.2.jar

移动 jar 包

04

将 UEditor -> jsp 下的 config.json 和 controller.jsp 移出,放在 web-app 的第一级子目录下,亦就是和 static 、WEB-INF 、index.jsp 处于同一级目录。
移动 config.json 和 controller.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 官网十分详细。

回答开头提出的问题

1 完成了引入,但启动后,页面没有富文本页面

原因可能是 index.jsp 页面中没有修改 js、css 的路径。

修改 js、css 路径

2 点击图片上传,显示后端路径配置错误

仔细操作观察第四步和第五步,我的就靠这么解决的。

或者配置 config.json 中的 imageUrlPrefix。

配置方法:

如果你的项目在浏览器访问时,需要输入项目名,则在此将 imageUrlPrefix 的值改为你的项目名;

如果你已经设置了项目在浏览器访问时,不需要项目名字,此处 imageUrlPrefix 的空着就可以。

是否需要输入项目名的设置在 IDEA 右上角的 edit configuration -> Application context :
启动时项目名字如何修改

3 默认上传的图片存在了哪里?

首先我们看配置文件 config.json ,就是那个之前被你揪出来放在外面的一个 json 文件。
在这里插入图片描述
如果该文件报错,可能是其中中文的问题。干掉所有中文注释就没问题了,简单粗暴。

imagePathFormat 就是基于项目发布后的路径,在后面继续添加的具体路径。

那么问题来了,基于 IDEA + 自己配置 Tomcat 的项目发布在哪儿?

一顿搜索,很多都说在 ${user.hone}/.IntelliJIdea/system/tomcat 下面。

在 IDEA 中配置的 tomcat,在运行时 IDEA 不会把项目放到 tomcat 路径下,而是复制一份足够的配置文件到
${user.hone}/.IntelliJIdea/system/tomcat,各个项目互不干扰。
(原来这样,互不打扰,各自安好)

我并未找到(原因可能这是 Win 下的路径),但这给了一个思路,在 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是不是有了更深的认识呢。都是边学边长见识,第一次遇见不会,就去查别人的,然后记住,第二次会了就可以啦。加油。

过程中有问题,可以随时与我沟通。

公众号:iBroPro。未经授权严禁转载,违者必究。

版权声明:本文为weixin_39609665原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39609665/article/details/104512894