java配置ueditor

最新推荐文章于 2024-04-29 13:34:02 发布
最新推荐文章于 2024-04-29 13:34:02 发布
阅读量841 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanqianweidu/article/details/87631993
版权

1、将utf8-jsp整个文件夹拷贝到idea的webapp文件夹下面，改名为ueditor
在这里插入图片描述
在这里插入图片描述
2、导入ueditor的pom文件的坐标

<dependency>
            <groupId>com.baidu.ueditor</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.1.2</version>
        </dependency>

3、在webapp下新建index.jsp，内容如下

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">
        div {
            width: 100%;
        }
    </style>

</head>
<body>
<div>
    <form action="ueditorServlet" enctype="multipart/form-data">
        <h1>完整demo</h1>
        <script id="editor" type="text/plain">

        </script>
        <input type="submit" value="提交"/>
    </form>
</div>

<script type="text/javascript">
    var ue = UE.getEditor('editor');
</script>
</body>
</html>

现在可以在浏览器中打开界面，说明基本配置已经搭建完成。
在这里插入图片描述
4、创建UeditorServlet

package cn.hello.editor;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


public class UeditorServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        String content = req.getParameter("editorValue");
        if(content != null){
            req.setAttribute("content",content);
            req.getRequestDispatcher("content.jsp").forward(req, resp);
        }else{
            resp.getWriter().append("内容为空!");
        }

    }
}

在web.xml中配置ueditorServlet

<servlet>
        <servlet-name>ServletDemo1</servlet-name>
        <servlet-class>cn.hello.editor.UeditorServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>ServletDemo1</servlet-name>
        <url-pattern>/ueditorServlet</url-pattern>
    </servlet-mapping>

content.jsp的代码如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>提交成功</title>
</head>

<body>
<%
    out.print(request.getRealPath(""));
%>
<div> ${content } </div>
</body>
</html>

运行tomcat，文本内容已经可以正常传递。
在这里插入图片描述

三千维度
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java工程中UEditor富文本编辑器高级应用-发布文字/表情包/图片/视频-亲测+源码下载
雾林小妖的博客
05-30 339
使用百度UEditor富文本编辑器实现发布新闻/通知公告/编写个人任务/周计划/年计划等在线编辑功能。解决了图片的发布，视频的发布以及图片和视频存储路径的自定义路径。
2. UEditor Java后端配置
Eden 的博客
12-17 126
假设页面在 a.com 域下，文件上传到 b.com 域下，这样要配置 imageUrlPrefix 为 “http://b.com” 才能得到正常路径。UEditor 1.4.0 版本对之前的配置方式进行了简化，具体请参见：后端请求规范，为了适应这次升级，JAVA 后台也进行了重写，跟之前的版本差别较大，升级的用户注意阅读本文档。有一些情况下仅仅靠返回路径是不能得到正常的图片链接，需要通过配置 imageUrlPrefix 给插入图片的路径添加前缀。应用程序目录不是网站根目录，需要给路径添加前缀。
百度编辑器ueditor如何配置文件上传，Java代码实现
最新发布
yncjxnc的博客
04-29 316
修改后需要新建一个控制器，把URL指向为你修改对应的URL，以下是servlet的代码例子，写的比较烂就将就下，好歹能运行，注意这里和JS路径要一样。文件上传是不可用的，这是因为后端的路径没有配置正确，这个时候需要修改ueditor/ueditor.config.js文件如下图所示。配置好后就可以上传图片了，也可以直接复制图片或者截图，ctrl+v能直接复制到编辑器中，是不是很方便？当编辑器界面出来时，你是不是很开心，但是你想上传图片的时候就发现如下图。
java集成富文本编辑器UEditor
qq_39727959的博客
05-18 3646
JAVA集成富文本编辑器UEditor集成前说明集成UEditor一.UEditor下载二.UEditor迁入项目三.引入ueditor中的js四.初始化UEditor五.实现图片上传 集成前说明 其实java独立集成ueditor是个伪命题,集成ueditor需要前后端共同参与才能完成,因为集成ueditor的时候,两端都有对应的配置,信息交互的接口及一些规则的定义。 集成UEditor 一.UEditor下载 百度搜索ueditor到官网进行下载,或者点击这个链接进入到下载页面http://uedito
前后端分离（Vue+Java）集成UEditor
caiyq_zq的博客
04-04 684
前后端分离集成UEditor
【JAVA】UEditor使用示例工程.rar
12-24
因此，Java开发者需要设置服务器端接口来接收和处理UEditor的请求，例如处理图片上传的路由，需要处理文件的存储路径、文件名生成策略以及文件类型检查等。 3. **前端集成**：在HTML页面中引入UEditor的JavaScript...
ueditor上传图片配置
12-28
1. **引入依赖**：首先需要在SpringBoot项目的pom.xml文件中添加ueditor的相关依赖，这可能包括ueditor的JavaScript库以及后端处理图片上传所需的Java库。 2. **配置ueditor**：在前端，需要在HTML页面中引入...
ueditor服务端代码java
12-13
【ueditor服务端代码java】是一个关于在Java环境中使用UEditor的项目，UEditor是一款流行的富文本编辑器，常用于网页内容编辑。在Java后端，我们需要处理UEditor上传的文件和图片，以及生成预览所需的JSON数据。下面...
Ueditor与java整合即拿即用
05-31
ueditor（百度富文本编辑器）整和java 只要是java项目就可以导入使用 其依赖的几个jar包 ueditor源码已修改，导入ueditor的jar时，导入本项目已经修改过的 只需配置服务器虚拟目录 和config路径即可 （源码不是本人...
java阿里云oss整合ueditor富文本编辑器编译源码
10-27
# ueditor_aliyun_oss 一、本项目里面的所有阿里云配置均已禁用，因此需要修改阿里云的配置信息 OSSKey.properties 配置文件参数描述 useStatus true/false是否启用云存储， autoCreateBucket true/false是否添加新...
Java新闻发布—百度编辑器UEditor的使用
09-10
SSH框架，使用tomcat服务器运行，这个是war包，可以先运行看下是否是自己要的效果。想要源码留言说明。
百度富文本编辑器完整版 java.rar
09-04
UEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本编辑器,这是java版,包含html段及js,以及jsp前端文件
java使用ueditor_Java 中使用 UEditor 整理
weixin_42500631的博客
02-25 482
1、简介2、引入UEditor script>//实例化编辑器var ue = UE.getEditor( ‘editor‘, {autoHeightEnabled: true,autoFloatEnabled: true,initialFrameWidth: 690,initialFrameHeight:483});…… script> ……3、原文：http://www.cnblogs.com...
Java——Ueditor自定义图片上传接口和路径
weixin_44054790的博客
12-14 1443
Ueditor自定义图片上传接口和路径
百度UEditor的介绍和图片上传的使用（java）
lianghao159的专栏
08-12 5709
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，并且是基于BSD协议的开源产品，允许自由使用和修改，使用起来十分方便。如果你是用来输出编排好格式的文章或者其他文本，使用UEditor绝对是一个很不错的选择。UEditor使用起来十分简单，然而java版本在struts2跟原生的两种情况下又有点不一样。首先说一下创建原生java项目（不包含任何框架）的配置吧。 不包含任何框架：
java web项目中使用百度编辑器UEditor
三生万物
08-19 4828
宽为限　紧用功　工夫到　滞塞通 项目上用到富文本编辑器，用的是百度的UEditor编辑器，这里我用的是jsp版本的，我们一起来看看。目录结构
UEditor之实现配置简单的图片上传示例
热门推荐
阿毅
06-11 11万+
开心一笑 下班后，阿华到楼下小超市买毛巾，刚买完出来，就遇到同一办公楼里另一家公司的阿菲，之前与她远远的有过几次眼神交流，但从没说过话，“买毛巾啊”，看着阿华手里的毛巾，阿菲先开口了。 阿华回到：“是啊，这里的老板眼神太好了，我不敢偷，就只有买了。” 阿菲一下就哈哈笑了，配合到：“哇，原来你是小偷。” 阿华：“嘘，小声点，其实主要原因是……”阿华指着自己的脑袋接着说到：“你看，我是个有头有
前端视角漫谈百度ueditor编辑器前后端分离配置
patire的博客
11-16 9680
此文旨在前后端分离的前提下，配置ueditor联通前后端接口，实现ueditor的文件上传（一般是图片上传）并在编辑器中反显目录结构百度的ueditor组件提供了各种主流的后端语言（Java，Asp，Php，Net。当然，没有node是一个遗憾）资源包，目录结构如下图 给前后端分离工作提供了很好的铺垫，这里不得不赞叹我们的百度工程师！前端使用vue-cli，内置了webpack服务，后端使用jav
UEditor Java 上传图片配置 案例
05-27
以下是一个简单的UEditor Java 上传图片的配置案例： 1. 在ueditor.config.js文件中，设置上传图片的action名称和上传图片的路径： ```javascript window.UEDITOR_CONFIG = { // ... serverUrl: 'ueditor/jsp/controller.jsp', // ... imageActionName: 'uploadimage', //上传图片的action名称 imageFieldName: 'upfile', //上传图片的表单名称 imagePath: '/upload/images/', //上传图片保存的路径，相对于webapp根目录 // ... }; ``` 2. 在后端Java代码中，处理上传图片的请求。以下是一个使用Servlet来处理上传图片请求的示例： ```java @WebServlet("/ueditor/jsp/controller.jsp") public class UEditorController extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setHeader("Content-Type", "text/html"); String action = request.getParameter("action"); if (action.equals("uploadimage")) { //上传图片请求 try { //使用Apache Commons FileUpload解析上传的文件 DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("utf-8"); List<FileItem> items = upload.parseRequest(request); String savePath = request.getSession().getServletContext().getRealPath("/") + "/upload/images/"; //上传图片保存的路径 File saveDir = new File(savePath); if (!saveDir.exists()) { saveDir.mkdirs(); } for (FileItem item : items) { if (!item.isFormField()) { String fileName = item.getName(); //上传的文件名 long fileSize = item.getSize(); //上传的文件大小 //校验上传的文件类型、大小、文件名的合法性 if (fileName != null && !fileName.isEmpty() && fileSize > 0) { String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase(); if (!Arrays.asList("jpg", "jpeg", "png", "gif", "bmp").contains(fileExt)) { response.getWriter().write("{\"state\":\"ERROR\",\"msg\":\"上传文件类型不允许！\"}"); return; } if (fileSize > 10 * 1024 * 1024) { //限制文件大小为10MB response.getWriter().write("{\"state\":\"ERROR\",\"msg\":\"上传文件大小超过限制！\"}"); return; } //保存上传的文件 String newFileName = UUID.randomUUID().toString() + "." + fileExt; File uploadedFile = new File(savePath, newFileName); item.write(uploadedFile); String fileUrl = request.getContextPath() + "/upload/images/" + newFileName; //返回上传图片的URL地址 response.getWriter().write("{\"state\":\"SUCCESS\",\"url\":\"" + fileUrl + "\"}"); return; } } } response.getWriter().write("{\"state\":\"ERROR\",\"msg\":\"上传文件不能为空！\"}"); } catch (Exception e) { response.getWriter().write("{\"state\":\"ERROR\",\"msg\":\"" + e.getMessage() + "\"}"); } } } } ``` 这段代码使用了Apache Commons FileUpload来解析上传的文件，并进行了上传文件的合法性校验。最后将上传成功的图片的URL地址返回给前端。 需要注意的是，这段代码只是一个简单的示例，需要根据实际情况进行优化和完善。同时，还需要对上传文件进行安全性考虑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值