Java语言 SpringBoot1.4.2+maven 整合 ueditor1.4 及在过程中遇到的一些其他问题
搞了好久才整明白的东西,记录下来,希望对大家能有些帮助,少走些弯路
第一步:先去百度的ueditor官网下载所需要的语言版本 http://ueditor.baidu.com/website/download.html,把完整源码和自己所需的下载下来。
第二步:解压下载的文件,我的解压后是这样
,然后进入
后是一个名为utf8-jsp的文件夹,可以重命名后复制到自己的项目里,如我的
引入之后的目录,里面本应该有个jsp文件夹,因为后续的问题就把它给删除了(可以往下慢慢看)jsp文件夹结构
第三步:我们使用Maven管理项目,所以要把jsp文件夹lib下的jar引入到项目中pom.xml,总共有5个包, 除了
其他都以maven的方式引入,(为了能更好的根据自己的项目进行扩展和修改,我是引入ueditor 源码进行调试修改。当然也可以直接引入ueditor jar 包。但是这种方法无法调试,出了错误也很难定义问题。所以不是太推荐)
第四步:开始引入源码:源码的文件需要去ueditor-1.4.3.3\jsp\src 目录下copy.把src下的所有东西copy到你的项目中的后台代码的位置。这是我引入的目录
第四步:在页面中,定义一个div,使在页面中能够显示出来,当然不要忘记引用相关的js和css文件,
页面使用:ueditor 支持个性化定制。toolbars 是定义你需要的部分。如果不定义,则会调用ueditor.config.js中的toolbars配置。在ueditor.config.js这个文件里有一个window.UEDITOR_HOME_URL的配置,此路径是指你的相关js及css 文件存入的位置。注意请不要弄错,否则页面会报js错误,提示找不到相关文件
到此步骤就是在页面中会出现富文本编辑框,能够写入文字,但是不能插入图片(刚进入页面时会发现当光标定位到富文本编辑框时图片按钮就没有办法点击了)
第五步:图片上传问题
其实图片上传最主要的是ueditor.config.js文件里的serverUrl路径配置及config.json里
的几项配置,里面的注释很清楚清晰,一开始serverUrl路径没有配置正确,以至于总提示【后台配置项返回格式出错,上传功能将不能正常使用!】,最终找到的原因是读取config.json时有问题,官网上的文档不是有说能出现这个的结果则表示正确
我的一开始是出现【配置文件初始化失败】或【 请求后台配置项http错误,上传功能将不能正常使用】提示,然后我按着网上把config.json的文件位置改变了一下放在了最外面,并且把jsp文件夹给删除了,然后写了一个Controller 用于和controller.jsp的功能一样
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.baidu.ueditor.ActionEnter;
/**
* 照着源码里的controller.jsp写的,功能一样,主要是为了获取config.json
* @author yanghr
*
*/
@RestController
@RequestMapping(value = "/ueditor")
public class UeditorController {
@RequestMapping(value = "/upload")
public void config(HttpServletRequest request, HttpServletResponse response) {
try {
response.setContentType("application/json");
response.setHeader("Content-Type" , "text/html");
String rootPath = request.getSession().getServletContext().getResource("/").getPath();
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
又修改了ueditor.config.js中serverUrl的统一入口为
再接着修改ConfigManager文件里的getConfigPath()方法
,这时重新运行项目就会发现图片按钮就可以使用了。
第六步:图片上传后回显问题
我们的项目图片是上传到了OSS里,所以要重新图片上传方法,然后让图片按钮的方法执行自己的方法
后台方法:
页面中方法:
config.json 里面的我没有改动(我们这是图片上传到了其他服务器,图片的访问路径直接就返回了)
,然后再重新试一下图片上传 就可以了 ,一切ok!!!
我遇到个问题 第一次跳转到使用UEditor的界面后,编辑器加载正常,返回后第二次再跳转到这个界面就出现UEditor无法正常加载,解决办法是 在初始化时加上UE.delEditor('_editor');就可以了,具体可以看下源码
UE.getEditor = function (id, opt) { var editor = instances[id]; if (!editor) { editor = instances[id] = new UE.ui.Editor(opt); editor.render(id); } return editor; };
这段可以看到,在调用UE.getEditor(‘_editor’)初始化UEditor时,先从放置编辑器的容器instances中获取,没有实例才实例化一个Editor,这就是引起问题的原因。
在第一次跳转到编辑器界面时,正常的实例化了一个新的编辑器对象,并放入instances,调用editor.render(id)渲染编辑器的DOM;
第二次初始化时却仅从容器中取到实例:var editor = instances[id]; 直接返回了editor对象,而编辑器的DOM并没有渲染。(此段是引用别人的)
我觉得以下几个播客写的很好,对我的帮助很大
https://blog.****.net/github_38823514/article/details/75288505
https://blog.****.net/xiao_yao_ren/article/details/77049907
https://blog.****.net/qq_33745799/article/details/70031641