编辑器Ueditor和SpringBoot 的整合方法

1.先导入ueditor所有的包:在springboot static下

2.导入需要的ueditor的js

3.配置ueditor.config.js的// 服务器统一请求接口路径://, serverUrl:(这个路径是个Java类,和config.js的内容相同)

4.js里面执行1.var ue = UE.getEditor('editor');函数

5.上传图片:

/* Ueditor里面的上传图片 */
UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
//action是config.json配置文件的action
 UE.Editor.prototype.getActionUrl=function(action){
 if (action == 'uploadimage'){
  return [[@{/common/upload/image}]]; /* 这里填上你自己的上传图片的action */
 }else if(action == 'uploadvideo'){
  return [[@{/common/upload/image}]];
 }else{
  return this._bkGetActionUrl.call(this, action);
 }
 };

6.上传图片的方法:

@RequestMapping(value = "/upload/image", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
 @ResponseBody
 public Map<String,Object> save(HttpServletRequest req){
 Map<String,Object> rs = new HashMap<String, Object>();
 MultipartHttpServletRequest mReq = null;
 MultipartFile file = null;
 String fileName = "";
 // 原始文件名 UEDITOR创建页面元素时的alt和title属性
 String originalFileName = "";
 try {
  mReq = (MultipartHttpServletRequest)req;
  // 从config.json中取得上传文件的ID
  file = mReq.getFile("upfile");
  if(!file.isEmpty()){
  // 取得文件的原始文件名称
  fileName = file.getOriginalFilename();
  originalFileName = fileName;
  String ext = (FilenameUtils.getExtension(file.getOriginalFilename())).toLowerCase();
 String storePath = "";
  if ("jpg".equals(ext) || "png".equals(ext) || "jpeg".equals(ext) || "bmp".equals(ext)) {
  storePath = "upload/image/";
 }else{
 storePath = "upload/video/";
 }
  //将图片和视频保存在本地服务器
  String pathRoot = req.getSession().getServletContext().getRealPath("");
  String path = pathRoot + "/" + storePath;
  file.transferTo(new File(path+fileName));
  String doMain = readProperties.getFileDomain();
String httpImgPath = doMain + storePath + fileName;
  rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
  rs.put("url",httpImgPath);  //能访问到你现在图片的路径
  rs.put("title", originalFileName);
  rs.put("original", originalFileName);
  }
 } catch (Exception e) {
 e.printStackTrace();
  rs.put("state", "文件上传失败!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
  rs.put("url","");
  rs.put("title", "");
  rs.put("original", "");
 }
 return rs;
 }

总结

以上所述是小编给大家介绍的编辑器Ueditor和SpringBoot 的整合方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 百度编辑器 ueditor 内容编辑自动套P标签，及p标签 替换

    百度编辑器 ueditor 内容编辑自动套P标签，及p标签 替换

    如图,红框为回车键和shift+回车 :    ===>>  ueditor.all.js中: 1: 搜索修改成false:allowDivTransToP: false 再搜索并修改以下: //编辑器不能为空内容 if (domUtils.isEmptyNode(me.body)) { me.body.innerHTML = '<div>' + (browser.ie ? '' : '<br/>') + '</div>'; } 2: //给文本或者inli

  • 百度UEditor编辑器使用教程与使用方法(图文)

    百度UEditor编辑器使用教程与使用方法(图文)

    我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享一下百度UEditor编辑器使用教程与使用方法,希望对大家有所帮助. 第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://ueditor.baidu.com/web

  • jquery可定制的在线UEditor编辑器

    jquery可定制的在线UEditor编辑器

    UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器. 使用方法: 因为本插件是百度「FEX前端研发团队」开发,在官方有较强细的中文文档,本文的目的只是让朋友们知道了解有这么个好插件而已,因此文档手册.下载.实例全链接到官方. 下载你需的要的语言版本,然后解压,在解压目录建立一个名为demo的html文件,代码如下 <!DOCTYPE H

  • ThinkPHP中使用Ueditor富文本编辑器

    具体插件下载: http://ueditor.baidu.com/website/download.html#ueditor UEditor官方文档: http://ueditor.baidu.com/website/document.html 之前于 "ThinkPHP-代码" 案例中发布版本: http://www.thinkphp.cn/code/175.html UEditor解压于:PUBLIC/Ueditor下(同级目录有:Common,Conf,Lib,Tpl等) 例:在

  • ASP.NET中集成百度编辑器UEditor

    ASP.NET中集成百度编辑器UEditor

    0.ueditor简介 UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点.开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用. UEditor官网:http://ueditor.baidu.com/website/index.html UEditor官方文档地址: http://fex.baidu.com/ueditor/ 1.将ueditor包导入项目 将从官网上下载的开发包解压后包含到项目中 (注:最新的代码需要时基于

  • 编辑器Ueditor和SpringBoot 的整合方法

    编辑器Ueditor和SpringBoot 的整合方法

    1.先导入ueditor所有的包:在springboot static下 2.导入需要的ueditor的js 3.配置ueditor.config.js的// 服务器统一请求接口路径://, serverUrl:(这个路径是个Java类,和config.js的内容相同) 4.js里面执行1.var ue = UE.getEditor('editor');函数 5.上传图片: /* Ueditor里面的上传图片 */ UE.Editor.prototype._bkGetActionUrl=UE.E

  • 百度编辑器Ueditor增加字体的修改方法

    百度编辑器Ueditor增加字体的修改方法

    Ueditor本身自带11种字体 使用过程中这11种字体往往不能满足我们的需求,现在我要添加"仿宋"和"仿宋GB2312"两种字体 过程如下: 1.找到文件 ueditor/lang/zh-cn/zh-cn.js ,找到其中的fontfamily节点,添加"仿宋"和"仿宋GB2312" 'fontfamily':{ 'songti': '宋体', 'SimSun': '仿宋', 'FangSong_GB2312': '仿宋_G

  • Springboot几种任务的整合方法

    Springboot几种任务的整合方法

    这篇文章主要介绍了Springboot几种任务的整合方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一 异步任务 启动类 @MapperScan("com.topcheer.*.*.dao") @SpringBootApplication @EnableCaching @EnableRabbit @EnableAsync public class Oss6Application { public static void main(

  • springboot快速整合Mybatis组件的方法(推荐)

    Spring Boot简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. 原有Spring优缺点分析 Spring的优点分析 Spring是Java企业版(Java Enterprise Edition,

  • SpringBoot中整合MyBatis-Plus的方法示例

    MyBatis 框架相信大家都用过,虽然 MyBatis 可以直接在 xml 中通过 SQL 语句操作数据库,很是灵活.但正其操作都要通过 SQL 语句进行,就必须写大量的 xml 文件,很是麻烦.于是 MyBatis-Plus 应运而生,作为 MyBatis 的增强工具,更是为我们开发效率得到了质的飞跃. 一.简介 1.MyBatis MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工

  • SpringBoot实现整合微信支付方法详解

    SpringBoot实现整合微信支付方法详解

    目录 1.准备工作 1.1 数据库表 1.2 实体类 1.3 导入依赖 1.4 配置文件 1.5 创建读取微信支付相关信息的工具类 1.6 其他工具类 2.生成订单 2.1 远程调用用户模块和课程模块 2.2 远程调用方法的实现 2.3 根据课程id和用户id生成订单 3.查询订单信息 3.1 controller层 3.2 service层 4.生成微信支付的二维码 4.1 controller层 4.2 service层 5.查询订单支付状态 5.1 controller层 5.2 serv

  • SpringBoot项目整合mybatis的方法步骤与实例

    1. 导入依赖的jar包 springboot项目整合mybatis之前首先要导入依赖的jar包,配置pom.xml文件如下: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  • thinkphp3.2嵌入百度编辑器ueditor的实例代码

    thinkphp3.2嵌入百度编辑器ueditor的实例代码

    本文介绍了thinkphp3.2嵌入百度编辑器ueditor,分享给大家,希望此文章对各位有所帮助 因为排版要求,很多时候我们需要嵌入富文本编辑器,输出带html标签的文本内容.因为我最近做一个后台管理系统,要求编辑好文本内容,让它输出带html标签的文本存到服务器,客户端发请求拿到服务器的带标签文本.我用的是ueditor, 1.首先我们去到这里http://www.jb51.net/codes/56667.html下载PHP版本utf版本. 把它放到Public的目录下. 2.我们在视图vi

  • Docker 部署 SpringBoot 项目整合 Redis 镜像做访问计数示例代码

    Docker 部署 SpringBoot 项目整合 Redis 镜像做访问计数示例代码

    最终效果如下 大概就几个步骤 1.安装 Docker CE 2.运行 Redis 镜像 3.Java 环境准备 4.项目准备 5.编写 Dockerfile 6.发布项目 7.测试服务 环境准备 系统:Ubuntu 17.04 x64 Docker 17.12.0-ce IP:45.32.31.101 一.安装 Docker CE 国内不建议使用:"脚本进行安装",会下载安装很慢,使用步骤 1 安装,看下面的链接:常规安装方式 1.常规安装方式 Ubuntu 17.04 x64 安装

  • React中使用UEditor百度富文本的方法

    React中使用UEditor百度富文本的方法

    前言 本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程.注意本文不提供一条龙式的使用方法,只是将使用过程中的一些实现思路进行总结,供以参考.react项目中导入ueditor,会存在各种不正交的问题,需要注意. 引入 首先在ueditor官网下载最新安装包,然后在项目入口的html中导入(导入方式不一,可以采用import的方式,需要自行度娘.但是无论哪种引入方式,只要想自定义功能,不正交问题就难以避免QAQ).不管三七二十一先跑起来再说.. <!DOCTYPE HT

随机推荐