springmvc怎么使用百度富文本编辑器

author author     2023-05-10     801

关键词:

参考技术A 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题。
一种方式是直接修改源码,步骤如下:
1、编写controller 如下(该接口是ueditor前后台交互的统一路径) :
package com.test.dcdp.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import com.baidu.ueditor.ActionEnter;
@Controller
@RequestMapping("/ueditor")
public class UeditorController
@RequestMapping("/dispatch")
public void config(HttpServletRequest request, HttpServletResponse response) // response.setContentType("application/json");String rootPath = request.getSession().getServletContext().getRealPath("/");response.setHeader("Content-Type" , "text/html");try
String a = request.getRequestURI();
String exec = new ActionEnter(request, rootPath).exec();PrintWriter writer = response.getWriter();writer.write(exec);
writer.flush();
writer.close();
catch (IOException e)
e.printStackTrace();



2、修改ueditor的配置文件 ueditor.config.js(指定后台服务器地址),如下所示修改前:
var URL = window.UEDITOR_HOME_URL || getUEBasePath();/**
* 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG =
//为编辑器实例添加一个路径,这个不能被注释UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: URL + "php/controller.php"
修改后 :
var getRootPath = function ()
//获取当前网址
var curWwwPath=window.document.location.href;//获取主机地址之后的目录
var pathName=window.document.location.pathname;var pos=curWwwPath.indexOf(pathName);
//获取主机地址
var localhostPaht=curWwwPath.substring(0,pos);//获取带"/"的项目名,如:/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);return(localhostPaht+projectName);

//获取路径
var applicationPath = getRootPath();
var URL = window.UEDITOR_HOME_URL || getUEBasePath();var serverURL = applicationPath;
/**
* 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG =
//为编辑器实例添加一个路径,这个不能被注释UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: serverURL + "ueditor/dispatch"3、修改ueditor源码 ConfigManager.java(指定配置文件路径).
修改前 :
/*
* 通过一个给定的路径构建一个配置管理器, 该管理器要求地址路径所在目录下必须存在config.properties文件*/
private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException rootPath = rootPath.replace( "\\", "/" );this.rootPath = rootPath;
this.contextPath = contextPath;
if ( contextPath.length() > 0 )
this.originalPath = this.rootPath + uri.substring( contextPath.length() ); else
this.originalPath = this.rootPath + uri;

this.initEnv();

修改后 :
/*
* 通过一个给定的路径构建一个配置管理器, 该管理器要求地址路径所在目录下必须存在config.properties文件*/
private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException rootPath = rootPath.replace( "\\", "/" );this.rootPath = rootPath;
this.contextPath = contextPath;
/*if ( contextPath.length() > 0 )
this.originalPath = this.rootPath + uri.substring( contextPath.length() ); else
this.originalPath = this.rootPath + uri;
*/
this.originalPath = rootPath + "static" + File.separator + "lib" + File.separator +"ueditor" + File.separator + "1.4.3" + File.separator + "jsp" + File.separator + "controller.jsp";///EdwManage/src/main/webapp/static/lib/ueditor/1.4.3/jsp/controller.jspthis.initEnv();

如上所述,主要修改 originalPath 的路径,否则ueditor的配置文件(ueditor_config.json)路径是错误的(与springMVC整合的情况),之所以向上面那样拼接路径,是因为我的ueditor相关文件拷贝在了(EdwManage/src/main/webapp/static/lib/ueditor/1.4.3/jsp/controller.jsp)路径里。
4、(若未执行该步操作,在选择好图片后,点击上传,将提示 : “未找到上传文件”)由于上传的文件都会被springmvc的文件上传拦截器拦截,包装,这样百度编辑器接收到文件后不能识别文件格式,因此把spring默认的commonsMultiparResolver,替换成我们自己写的commonsMultiparResolver ,并修改配置文件。
重写CommonsMultipartResolver :
package com.tianwen.dcdp.common;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;public class CommonsMultiparResolver extends CommonsMultipartResolver @Override
public boolean isMultipart(javax.servlet.http.HttpServletRequest request) String uri = request.getRequestURI();
System.out.println(uri);
//过滤使用百度UEditor的URI
if (uri.indexOf("ueditor/dispatch") > 0) //此处拦截路径即为上面编写的controller路径System.out.println("commonsMultipartResolver 放行");return false;

System.out.println("commonsMultipartResolver 拦截");return super.isMultipart(request);


修改springMVC配置文件spring-mvc.xml :
<!-- 修改为我们重写的CommonsMultiparResolver而不是spring提供的 -->
<bean id="multipartResolver"
class="com.tianwen.dcdp.common.CommonsMultiparResolver">
<!-- 默认编码 -->
<property name="defaultEncoding" value="utf-8" />
<!-- 文件大小最大值 -->
<property name="maxUploadSize" value="10485760000" />
<!-- 内存中的最大值 -->
<property name="maxInMemorySize" value="40960" />
</bean>
5、最后配置上传文件保存目录,修改ueditor配置文件(ueditor_config.json):
修改如下参数(即配置上传文件的URL路径,若配置不正确,富文本编辑器中将不能正确显示上传的图片):
"imageUrlPrefix": "http://localhost:80/EdwManage", /* 图片访问路径前缀 */"imagePathFormat": "/static/upload/image/yyyymmdd/timerand:6", /* 上传保存路径,可以自定义保存路径和文件名格式 */此处 imagePathFormat 之所以配置为如上格式,是因为springMVC中,指定了static目录下的资源为静态资源(其他路径都会被springMVC拦截)。
文件默认保存的物理路径为: web应用根路径 + imagePathFormat 。
yyyymmdd : 按天分类保存
timerand:6 : 随机生成文件名
另外还有一种简单的解决办法:
1、新建一web工程(ueditor)。
2、将下载下来的ueditor文件拷贝到新建工程 的webapps目录下,可参考官网介绍。
3、在使用ueditor的工程中,修改ueditor配置文件(ueditor.config.js)如下 :
window.UEDITOR_HOME_URL = "http://localhost/ueditor/";var URL = window.UEDITOR_HOME_URL || getUEBasePath();/**
* 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG =
//为编辑器实例添加一个路径,这个不能被注释UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: URL+ "jsp/controller.jsp"
3、配置上传文件保存路径,修改(ueditor_config.json) :
"imageUrlPrefix": "http://localhost:80/ueditor", /* 图片访问路径前缀 */"imagePathFormat": "/upload/image/yyyymmdd/timerand:6", /* 上传保存路径,可以自定义保存路径和文件名格式 */

百度富文本ueditor编辑器的使用(代码片段)

...其是在网站开发后台管理系统的时候经常会使用到富文本编辑器,这里我们来使用百度提供的富文本编辑器UEditor,以提高我们的开发效率UEditor官网下载地址:https://ueditor.baidu.com/website/download.html 这里我下载的是jsp版本中的UT... 查看详情

使用百度富文本编辑器

插件下载地址:http://ueditor.baidu.com/website/download.html具体引用:把下载的文件完全的额引入到你的项目中,然后编辑页面内容:<!--加载编辑器的容器--><scriptid="container"style="height:700px"type="text/plain">    &nbs 查看详情

使用百度umeditor富文本编辑器,修改自定义图片上传,修改源码

富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用UEDITOR:百度开发的插件,lite版是UMEasyUI编... 查看详情

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

批量上传的图片在线管理没法查看图片是因为jar包本身的Bug,这里暂时做了个替换展示。就是找到Img.js 然后搜索img.set替换下就好了                    &nbs 查看详情

百度富文本赋值

$(function(){  varcontent=$(‘#daily_content‘).val();  //判断ueditor编辑器是否创建成功  ue.addListener("ready",function(){    //editor准备好之后才可以使用    ue.setContent(content);  });}); 查看详情

百度富文本编辑器

...------------------------------------百度搜索—— 百度富文本编辑器——进入首页(百度编辑器-UEditor-首页)百度编辑器 -UEditor-首页 ——上方导航【下载】——选择对应的版本下载(我选的是1.4.3.3.Net版本utf-8版)【把资源... 查看详情

原关于百度富文本编辑器的使用心得

...的数据库中添加新字段,修改后台代码用创建更多ueditor编辑器的新实例(一个字段对应一个实例)。编辑时从数据库中取出数据到ueditor编辑器中这里要说的就是我在从数据库中取出内容到编辑器中踩过的坑 1.实例名.getContent... 查看详情

关于百度富文本编辑器uedit的初始化内容失败问题

百度富文本编辑器毫无疑问是强大的,但也会出问题。这个问题是在脚本中普遍存在的,由异步性导致的加载顺序问题。我们使用varue=UE.getEditor(‘editor‘,{});创建实例。并使用ue.setContent("HellloWorld!");初始化内容。但是有时候初始... 查看详情

哪个富文本编辑器好一些

  可以试试这个wangEditor-轻量级web富文本编辑器  生成表格还是会有一些样式,不过比百度的要少一些。  以下是官方介绍:  与国产编辑器百度ueditor和kindeditor相比,它轻量、易用、UI设计精致漂亮。  与国外编辑器... 查看详情

springmvc--对接ueditor(富文本编辑器)(代码片段)

工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题。 一种方式是直接修改源码... 查看详情

富文本编辑器选择使用

之前使用过百度editer,还有kindeditor.....这些富文本编辑器都有一个共同点,相对还是打,有些功能是我不需要的,然后文档还又臭又长!!重点还有就是图片上传那个功能,非要还要什么检测下,导致我现在一点不想用! 这... 查看详情

富文本编辑器ckeditor的使用

...,项目中有个论坛模块,当用户发帖时,需要用到富文本编辑器,考虑了一下,决定使用CKEditor富文本编辑器,虽然现在问世的富文本编辑器很丰富,比如还有百度的UEditor等等,但是我选择使用CKEditor的原因是它能快速引入到我... 查看详情

富文本编辑器怎么在thinkphp中使用

参考技术A富文本编辑器在前端调用,然后表单获取值就可以了啊,不通的编辑器使用方法也不同,看手册~目前国内用的比较多的有kindeditor和ueditor 查看详情

百度富文本编辑器ueditor

前言  配置.netmvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net的开发包,如下图,我下载的是1.2.6.1net版本的开发包。配置:1... 查看详情

springboot整合百度ueditor富文本

...供的demo和js导入项目中 2.编写html  这步创建好了编辑器然后我们会发现图片不能上传 出现这个问题之后我们去config.j 查看详情

django之百度ueditor富文本编辑器后台集成(代码片段)

Python3+Django2.0百度Ueditor富文本编辑器的集成百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成?答案:因为百度富文本编辑器Ueditor没有对python的支持 步骤1:  在官网下载Ueditor的任意版本代... 查看详情

ueditor之——与springmvc整合

...8月的最后一天,那么就给大家带来一篇关于JSPUEditor整合SpringMVC的文章吧,UEditor是百度的一款富文本编辑器产品,网址为:http://ueditor.baidu.com/we 查看详情

百度的富文本编辑器ueditor兼容问题

...是在IE7下就遇到问题了,如下图所示:做项目很需要这样的编辑器,可又得考虑到兼容性,这怎么办?Ueditor1.4.3以上版本将不再承诺支持ie6/ie7,如果一定要支持IE6/7所以只好下载1.4.2版本试一下了。追问可我用的就是1.4.2的追答那就再找... 查看详情