介绍
本篇文章为大家展示了UEditor怎么在SpringBoot中使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
因为项目使用的SpringBoot框架,而UEditor对于java后端的支持仅仅是给了一个jsp文件,因此,需要对该文件进行一下处理,修改为面向SpringBoot的统一控制器。
@ controller
@ transactional
静态/共同/ueditor @RequestMapping (“//jsp")
public class JSPController {
@RequestMapping才能(“/controller")
@ResponseBody才能
public 才能;void getConfigInfo (HttpServletResponse HttpServletRequest 请求;响应){
,,,response.setContentType(“应用程序/json");
,,,String rootPath =, request.getSession () .getServletContext ()
,,,,,,,.getRealPath (“/?;
,,,try {
,,,,,String exec =, new ActionEnter(请求,,rootPath) .exec ();
,,,,,PrintWriter writer =, response.getWriter ();
,,,,,writer.write(执行);
,,,,,writer.flush ();
,,,,,writer.close ();
,,,},catch (IOException |, JSONException e), {
,,,,,e.printStackTrace ();
,,,}
以前,,} 如上所述,该项目即支持来自/静态/共同/ueditor/jsp/控制器的上传请求了。
<强>前端请求
在前端添加ueditor支持。即:将整个uediotr包进行项目引入,并且在使用该控件的地方进行js的导入。
项目引入,我的对应代码结构如下:
& lt; script 类型=拔谋?javascript", charset=皍tf-8", th: src=https://www.yisu.com/zixun/癅{/静态/共同/ueditor/ueditor.config.js} ">
<脚本type=" text/javascript“charset=" utf - 8 " th: src=" @{/静态/共同/ueditor/ueditor.all。js} ">
实例化UEditor编辑器即可,下面是我的初始化参数,仅做参考。
//实例化编辑器
var 才能;ue =, UE.getEditor (& # 39; & # 39; + id, {
,,,工具栏:,
,,,,,(
,,,,,,,& # 39;fontfamily& # 39;,,//字体
,,,,,,,& # 39;字形大小# 39;,,//字号
,,,,,,,& # 39;撤销# 39;,,//撤销
,,,,,,,& # 39;重做,,,//重做
,,,,,,,& # 39;| & # 39;
,,,,,,,& # 39;情感# 39;,,//表情
,,,,,,,& # 39;字体颜色# 39;,,//字体颜色
,,,,,,,& # 39;背景色# 39;,,//背景色
,,,,,,,& # 39;大胆# 39;,,//加粗
,,,,,,,& # 39;强调# 39;,,//下划的线
,,,,,,,& # 39;删除线# 39;,,//删除线
,,,,,,,& # 39;| & # 39;
,,,,,,,& # 39;justifyleft& # 39;,,//居左对齐
,,,,,,,& # 39;justifyright& # 39;,,//居右对齐
,,,,,,,& # 39;justifycenter& # 39;,,//居中对齐
,,,,,,,& # 39;| & # 39;
,,,,,,,& # 39;链接# 39;,,//超链接
,,,,,,,& # 39;拆开# 39;,,//取消链接
,,,,,,,& # 39;simpleupload& # 39;,,//单图上传
,,,,,,,& # 39;insertimage& # 39;,,//多图上传
,,,,,,,//& # 39;音乐# 39;,,//音乐
,,,,,,,//& # 39;insertvideo& # 39;,,//视频
,,,,,,,& # 39;removeformat& # 39;,,//清除格式
,,,,,,,& # 39;formatmatch& # 39;,,//格式刷
,,,,,,,& # 39;源# 39;,,//源代码
,,,,,)
,,,,
,,,enableAutoSave:假的,
,,,autoHeightEnabled:,真的,
,,,autoFloatEnabled:,真的,
,,,initialFrameWidth:宽度,
,,,initialFrameHeight:高度,
,,,scaleEnabled:真//滚动条
});才能 此时,访问我们的页面就会看到富文本框了。
不过,此时会提示我们后台配置文件出错,无法实现上传功能
<强>实现上传功能
修改config.js文件,对应的全局请求路径。该请求是为了获取配置。null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
