springboot+UEDitor百度编辑器整合图片上记录于此

1、下载ueditor插件包,解压到static/ueditor目录下

2、在你所需实现编辑器的页面引用三个JS文件

1)  ueditor.config.js   2)  ueditor.all.min.js  3)zh-cn.js

th:utext回显富文本内容

<textarea id="container"   name="content"  th:utext="${xxx}"  type="text/plain"   style="width:800px;height:400px;">

</textarea>

初始化富文本编辑器

UE.getEditor('container');

这一步没有问题的话,页面上应该看到富文本编辑器了,但控制台会提示配置错误,接下来配置富文本参数值

3、找到ueditor.config.js配置文件serverUrl的参数,设置成你项目的请求路径,后面上传图片的请求路径也是这个!!!

只不过一个是post请求一个是get请求。

serverUrl默认在初始化富文本编辑器的时候会以get方式请求该地址,所以我们需要在该请求方法中返回它的默认配置文件。

redirect:/js/ueditor/jsp/config.json

toolbars设置常用富文本编辑器的工具,比如

'fullscreen', '|', 'undo', 'redo', '|','fontfamily', 'fontsize', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','simpleupload'

4、经过第三步之后,uditor就找到了config.json配置文件。这时候就可以上传图片,但是还不能回显图片,因为上传图片

成功后返回的数据格式不符合它的要求,回显图片还需要在config.json中配置获取图片的路径参数

5、上传图片,以MultipartFile对象来接收图片信息。经过上传的逻辑之后,返回json字符串。格式如下:

Map<String,Object> map = new HashMap<String,Object>() ;

map.put("state", "SUCCESS") ;

map.put("original", file.getOriginalFilename()) ;

map.put("size", file.getSize()) ;

map.put("title", file.getOriginalFilename()) ;

map.put("type", xxx) ; //图片类型

map.put("url", fileName) ;

ObjectMapper mapper = new ObjectMapper();

return mapper.writeValueAsString(map);

6、在onfig.json配置文件中设置获取图片的路径,找到imageUrlPrefix参数,比如你的图片上传到static目录的upload下,


http://192.168.0.105:8080/xxx/upload/

后面遇到配置serverUrl参数问题,该参数配置的服务地址,需与所访问的服务网址保持一致,如果是用localhost访问服务,但serverUrl配置的是本机IP,也会提示跨域问题。





springboot+UEditor图片上传的更多相关文章

  1. ueditor图片上传插件的使用

    在项目里使用到ueditor图片上传插件,以前图片上传都是直接使用js代码直接上传图片,比较麻烦,而且效率也比较低,而ueditor这款插件完美的解决了这个问题,这个是百度开发的一款富文本编辑器,在这 ...

  2. ueditor图片上传配置

    ueditor图片上传配置文件为ueditor/php/config.json /* 上传图片配置项 */ "imageActionName": "uploadimage ...

  3. asp.net ueditor 图片上传路径问题解决

    最近练习做一个新闻系统,其中不能少了添加新闻和修改新闻的功能 ,而且还要添加图片.添加文字样式, 所以不得不使用富文本编辑器,在kindeditor和ueditor中,选择了目前还在持续更新的百度产品 ...

  4. 百度UEditor图片上传或文件上传路径自定义

    最近在项目中使用到百度UEditor的图片以及文件上传功能,但在上传的时候路径总是按照预设规则来自动生成,不方便一些特殊文件的维护.于是开始查看文档和源代码,其实操作还是比较简单的,具体如下: 1.百 ...

  5. ueditor图片上传和显示问题

    图片上传: 这段是contorller代码 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST) @ ...

  6. [Asp.net core 2.0]Ueditor 图片上传

    摘要 在项目中要用到富文本编辑器,包含上传图片,插入视频等功能.但ueditor只有.net版本,没有支持core.那么上传等接口就需要自己实现了. 一个例子 首先去百度ueditor官网下载简化版的 ...

  7. 百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

    个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配 ...

  8. SpringBoot实现图片上传demo&Nginx进行代理显示

    公司项目需要一个图片上传的功能,就图片能上传到服务器(公司用的windows服务器),然后nginx能进行代理访问到就行了,先简单介绍一下nginx,然后再来实现功能. 一.nginx简介 Nginx ...

  9. 保姆级SpringBoot+Vue图片上传到阿里云OSS教程

    小二是新来的实习生,作为技术 leader,我给他安排了一个非常简单的练手任务,把前端 markdown 编辑器里上传的图片保存到服务器端,结果他真的就把图片直接保存到了服务器上,这下可把我气坏了,就 ...

随机推荐

  1. 高级软件测试技术(测试管理工具实践day2)

    今天在紧张的学习之余,我们小组选定了bugzilla,并且打算在今天晚上刚进行下载安装. 在安装bugzilla需要的软件有MySQL数据库软件,activeperl软件,bugzilla安装包,II ...

  2. RAC容灾演练

    RAC容灾演练:在节点一进行验证:步骤 操作命令关闭步骤 检测RAC集群资源状态 crsctl status resource -t 关闭监听 srvctl stop listener -n < ...

  3. BUFFER CACHE和SHARED POOL原理

    http://blog.csdn.net/wanghai__/article/details/4881492 Buffer Cache LRU与Dirty List 在Buffer Cache中,Or ...

  4. iview在项目中遇到的坑

    1.下拉框选中某一项搜索发现总是搜不到,最后发现是选中后选中值后边莫名多了很长的空格,原因很简单,在代码中opction闭合标签和主体没有在一行. 2.iview+vue项目中,用百分比或者displ ...

  5. python3 configparser模块

    配置文件如下: import configparser conf = configparser.ConfigParser() print(type(conf)) #conf是类 conf.read(' ...

  6. unity editor 折叠树

    https://blog.csdn.net/e295166319/article/details/52370575 需要两个类:树节点类和界面实现类 1:树节点类(TreeNode) using Un ...

  7. 69.x的平方根

    class Solution: def mySqrt(self, x: int) -> int: if x < 2: return x left, right = 1, x//2 whil ...

  8. Reinforcement Learning Index Page

    Reinforcement Learning Posts Step-by-step from Markov Property to Markov Decision Process Markov Dec ...

  9. python3.5+django2.0快速入门(一)

    因为这篇教程需要用到anaconda的一些操作,如果还不懂anaconda的操作的同学可以看下这篇文章python 入门学习之anaconda篇. 创建python3+的开发环境 直接在终端输入:co ...

  10. gradle使用方法

    创建一个项目 你可以通过创建一个build.gradle的文件来开始一个项目,然后可以向文件中加入构建逻辑. $ mkdir basic-demo $ cd basic-demo $ touch bu ...