当前位置： 首页 > 编程日记 > 正文

百度UEditor开发案例（JSP）

编程日记 2024-08-20 03:00:00

本案例的开发环境：MyEclipse+tomcat+jdk

本案例的开发内容：
  1. 用百度编辑器发布新闻（UEditor的初始化开发部署）
  2. 编辑已发过的新闻（UEditor的应用——编辑旧文章）
  3. 上传附件、图片等
由于百度编辑器强大的功能，web开发爱好者无不喜爱。但网上关于其开发的具体细节或整个项目的开发案例并不是很多，因此写下这篇简单开发百度编辑器UEditor的案例。
此案例只是简单的应用Ueditor，仅供参考。

项目名称：UEditorCase
项目组织结构图：
百度UEditor开发案例（JSP） - 线上的思考者 - 线上的思考者

  (一)UEditor的开发部署

到官方网站下载ueditor jsp（utf-8）版开发包。ueditor1_2_5_0-utf8-jsp
如左图，我是放在ueditor文件夹下
index.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>

<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<scripttype="text/javascript"src="ueditor/editor_config.js"></script>
<scripttype="text/javascript"src="ueditor/editor_all.js"></script>
<LINKrel=stylesheethref="ueditor/themes/default/css/ueditor.css">
</head>

<body>
<formaction="publish.action"method="post">
类别： <inputtype="text"name="category"/><br/>
标题：<inputtype="text"name="title"/><br/>

<textareaname="content"id="myEditor">这里写你的初始化内容</textarea>
<scripttype="text/javascript">
var editor =new UE.ui.Editor();
editor.render("myEditor");
//1.2.4以后可以使用一下代码实例化编辑器
//UE.getEditor('myEditor')
</script>
<inputtype="submit"value="提交"/>

</form>

</body>
</html>

配置editor_config.js文件

找到：

URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");

将其改为：

URL = window.UEDITOR_HOME_URL||"/UEditorCase/ueditor/";

PublishAction.java代码：

package xiaoxiao.action;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;

import org.apache.struts2.ServletActionContext;
import org.apache.taglibs.standard.lang.jstl.test.PageContextImpl;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

publicclassPublishActionextendsActionSupport{
privateString category;
privateString title;
privateString content;
publicString getCategory(){
return category;
}
publicvoid setCategory(String category){
this.category = category;
}
publicString getTitle(){
return title;
}
publicvoid setTitle(String title){
this.title = title;
}
publicString getContent(){
return content;
}
publicvoid setContent(String content){
this.content = content;
}

@Override
publicString execute()throwsException{
// System.out.println("category:"+category);
// System.out.println("title"+title);
// System.out.println("content"+content);
// String Date=new SimpleDateFormat("yyyy-MM-dd").format(new Date());
// String realPath = ServletActionContext.getRequest().getRealPath("/upload")+"/"+Date;
// System.out.println("路径"+realPath);


ActionContext cxt=ActionContext.getContext();
Map request=(Map)cxt.get("request");

request.put("category", category);
request.put("title", title);
request.put("content", content);
return SUCCESS;


}


}


struts.xml文件配置

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<packagename="strus"extends="struts-default">


<actionname="publish"class="xiaoxiao.action.PublishAction">
<resultname="success">/show.jsp</result>

<!-- <result name="success">/editorUpdate.jsp</result> -->
</action>

</package>


</struts>

show.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>

<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<styletype="text/css">
#showContent {
WIDTH:1000px;
BACKGROUND:#e4eefa;
FLOAT: left;
border:1px solid #FC9;
}

#showContent {

MARGIN-BOTTOM:-32767px!important
}
</style>
</head>

<body>
类别：${requestScope.category}<br>
标题：${requestScope.title}<br>

内容为：
<br/>
<divid="showContent">
${requestScope.content}
</div>
</body>
</html>

至此，运行项目，你就可以看见UEditor编辑器的强大功能。运行效果图：
百度UEditor开发案例（JSP） - 线上的思考者 - 线上的思考者
点击提交按钮后：
百度UEditor开发案例（JSP） - 线上的思考者 - 线上的思考者
注意事项：
（1）在index.jsp中  需要写： <LINKrel=stylesheet href="ueditor/themes/default/css/ueditor.css">     否则工具栏中的图标显示不出来。
（2）配置editor_config.js文件，由于这里我是把ueditor放到了UEditorCase目录下，因此配置为：URL = window.UEDITOR_HOME_URL||"/UEditorCase/ueditor/";
（3）按照上述步骤，不需要更改其他文件内容。
（二）编辑旧文章
editorUpdate.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>My JSP 'editorUpdate.jsp' starting page</title>

<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<scripttype="text/javascript"src="ueditor/editor_config.js"></script>
<scripttype="text/javascript"src="ueditor/editor_all.js"></script>
<LINKrel=stylesheethref="ueditor/themes/default/css/ueditor.css">
</head>

<body>
编辑文章：<br/>

<scripttype="text/plain"id="myEditor"name="content">
${requestScope.content}
</script>
<scripttype="text/javascript">

var editor =new UE.ui.Editor();
editor.render("myEditor");

//1.2.4以后可以使用一下代码实例化编辑器
//UE.getEditor('myEditor')
</script>
</body>
</html>

将struts.xml中

<resultname="success">/show.jsp</result>

注释掉，改为：

<resultname="success">/editorUpdate.jsp</result>

运行效果图：
百度UEditor开发案例（JSP） - 线上的思考者 - 线上的思考者
（三）图片上传与附件上传
将jsp文件夹下的Uploader.java类拷贝到ueditor类包中
再将struts.xml改为：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<packagename="strus"extends="struts-default">


<actionname="publish"class="xiaoxiao.action.PublishAction">
<resultname="success">/show.jsp</result><!--

<result name="success">/editorUpdate.jsp</result>
--></action>

</package>


</struts>

由于采用了struts框架，拦截器把（/*）所有请求的文件都做了处理，所以导致无法上传图片和附件。
解决方法，自定义拦截器，让它在请求imageUp.jsp和fileUp.jsp文件时不做处理。
步骤：
创建拦截器类：MyStrutsFilter.java

package xiaoxiao.filter;

import java.io.IOException;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;

publicclassMyStrutsFilterextendsStrutsPrepareAndExecuteFilter{
publicvoid doFilter(ServletRequest req,ServletResponse res,FilterChain chain)throwsIOException,ServletException{
HttpServletRequest request =(HttpServletRequest) req;
String url = request.getRequestURI();
if("/UEditorCase/ueditor/jsp/imageUp.jsp".equals(url)||"/UEditorCase/ueditor/jsp/fileUp.jsp".equals(url)){
//System.out.println("使用自定义的过滤器");
chain.doFilter(req, res);
}else{
//System.out.println("使用默认的过滤器");
super.doFilter(req, res, chain);
}
}
}

配置拦截器：

<?xml version="1.0" encoding="UTF-8"?>
<web-appversion="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<filter>
<filter-name>struts2</filter-name>
<filter-class>xiaoxiao.filter.MyStrutsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

这样上传文件时，文件是保存在：/UeditorCase/ueditor/jsp/upload/      文件夹下。
注意事项：
（一）只需按上述步骤，不用修改imageUp.jsp和fileUp.jsp等文件。（可以根据需要修改文件保存路径和上传的文件类型）
运行效果图：
上传图片：
百度UEditor开发案例（JSP） - 线上的思考者 - 线上的思考者
上传附件：
百度UEditor开发案例（JSP） - 线上的思考者 - 线上的思考者
成功后：
百度UEditor开发案例（JSP） - 线上的思考者 - 线上的思考者
百度UEditor开发案例（JSP） - 线上的思考者 - 线上的思考者
至此，项目开发结束。百度UEditor开发案例（JSP） - 线上的思考者 - 线上的思考者

转载于:https://www.cnblogs.com/zhwl/p/3582773.html


https://www.dkcj.cn/info/15031.html

相关文章：

iOS中的动力学：Dynamics【1】

iOS7建议我们创建的界面具有物理特性&#xff0c;而不只是像素的集合&#xff0c;可以响应触摸、手势、屏幕方向改变等事件&#xff0c;让用户与界面之间有更深入的交互&#xff0c;而不是像iOS6那样在软件界面上模仿现实世界的纹理而已。或许你会认为创建感觉上真实的界面比创…

编程日记2024/08/20 02:50:00

自动化运维工具Saltstack(一)

1、saltstack简介&#xff1a; 什么是saltstack&#xff1f; saltstack是基于python开发的一套C/S架构配置管理工具 使用SSL证书签方的方式进行认证管理 号称世界上最快的消息队列ZeroMQ使得SaltStack能快速在成千上万台机器上进行各种操作 采用RSA Key方式确认身份 传输采用AE…

编程日记2024/08/20 02:40:00

【UIDynamic例子】挂起的方块

通过前面的动力学小Demo&#xff08;本文默认你已经看过这篇Blog&#xff1a;传送门&#xff09;&#xff0c;我们对UIKit中的UIDynamic已经有了初步的认识。现在我们写个更加有趣的Demo&#xff1a;模拟一个用弹性绳子挂起的小方块&#xff0c;用户可以将它拖动到屏幕任意位置…

编程日记2024/08/20 02:30:00

IIS7 配置PHP服务器

安装PHP Manager&#xff1a; 1&#xff09;访问 http://phpmanager.codeplex.com/releases/view/69115 下载PHP Manager。其中&#xff0c;x86 为32位 Windows 系统使用&#xff0c;x64 为64位 Windows 系统使用&#xff0c;请根据使用的 Windows 系统情况下载 2&#xff09;下…

编程日记2024/08/20 02:20:00

在文本框中提示用户输入内容格式的方法

希望达到的效果&#xff1a; 方法一&#xff1a;鼠标点击文本框时文字消失 <input id"login_name" type"text" οnblur"javascript:check_login_name();" οnfοcus"if(this.value支持英文及数字组合) this.value;this.style.color#000&…

编程日记2024/08/20 02:10:00

saltstack实现haproxy+keepalived负载均衡+高可用(二)

一键部署haproxykeepalived实现负载均衡高可用 实验环境&#xff1a; &#xff01;&#xff01;&#xff01;&#xff01; 特别注意&#xff1a; www.westos.org为test1的minion名字 test1: 172.25.1.11 nginx master minion test2: 172.25.…

编程日记2024/08/20 02:00:00

iOS开发技巧（系列十八：扩展UIColor，支持十六进制颜色设置）

新建一个Category&#xff0c;命名为UIColorHex&#xff0c;表示UIColor支持十六进制Hex颜色设置。 UIColorHex.h文件&#xff0c; #import <UIKit/UIKit.h> #define RGBA_COLOR(R, G, B, A) [UIColor colorWithRed:((R) / 255.0f) green:((G) / 255.0f) blue:((B) / 255…

编程日记2024/08/20 01:50:00

iOS顶部菜单栏

封装的一个顶部菜单栏&#xff0c;使用懒加载&#xff08;选择后加载当前页及前后各一页&#xff09;&#xff0c;自适应标题长度。 下载&#xff1a; Github&#xff1a;https://github.com/dolacmeng/JXChannelSegment 用法&#xff1a; //init Segment segment [[JXSegme…

编程日记2024/08/20 01:40:00

Mac环境下svn的使用

CHENYILONG BlogMac环境下svn的使用 Mac环境下svn的使用 在Windows环境中&#xff0c;我们一般使用TortoiseSVN来搭建svn环境。在Mac环境下&#xff0c;由于Mac自带了svn的服务器端和客户端功能&#xff0c;所以我们可以在不装任何第三方软件的前提下使用svn功能&#xff0c;不…

编程日记2024/08/20 01:30:00

zabbix简介及基本安装（一）

zabbix简单介绍&#xff1a; 官网&#xff1a;可以进官网查看一下&#xff1a;https://www.zabbix.com/cn/ //英语能力有限的读者可以将由上角的语言调成汉语方便查看 功能&#xff1a;网络监控、服务器监控、云监控、服务监控等。 介绍&#xff1a;zabbix&#xff08;[…

编程日记2024/08/20 01:20:00

顺序表应用6：有序顺序表查询

顺序表应用6&#xff1a;有序顺序表查询 Time Limit: 7MS Memory Limit: 700KBSubmit StatisticProblem Description 顺序表内按照由小到大的次序存放着n个互不相同的整数&#xff08;1<n<20000)&#xff0c;任意输入一个整数&#xff0c;判断该整数在顺序表中是否存在。…

编程日记2024/08/20 01:10:00

LA 5717枚举+最小生成树回路性质

1 /*LA 57172 《训练指南》P3433 最小生成树的回路性质4 在生成的最小生成树上&#xff0c;新增一条边e(u,v)5 若原图上u到v的路径的最大边大于e&#xff0c;则删除此边&#xff0c;加上e&#xff0c;否则不变。6 7 若原图上u到v的路径的最大边的产生&#xff1a;BFS/DFS都可 &…

编程日记2024/08/20 01:00:00

【Runtime】动态添加方法demo

今天写一个小demo来演示下runtime的消息转发和动态添加方法。 一般项目中都会有保存当前登录用户资料的需求&#xff0c;我们可以直接将登录成功后的用户信息分别保存到NSUserDefaults中&#xff1a; [def setObject:"JackXu" forKey:"UserName"];[def set…

编程日记2024/08/20 00:50:00

Zabbix之主机的添加与删除（二）

接着上一篇内容继续讲&#xff1a; 环境等都是建立在上一篇内容的基础上的&#xff0c;见https://blog.csdn.net/weixin_41922887/article/details/83755271 redhat6 test1: 172.25.1.11 zabbix-agent redhat7 server: 172.25.1.1 …

编程日记2024/08/20 00:40:00

昨天网上感觉好冷，睡在席子上都是感觉打哈欠

今天爸妈也是休息一天&#xff0c;中午听说是要到外婆家去&#xff0c;不过家里就不知道会不会有一个团圆聚餐了&#xff0c;还有伴月就是国庆解&#xff0c;那时就要吧这个推掉值班的事情做好下。 转载于:https://www.cnblogs.com/bkchengzheng/p/5874328.html

编程日记2024/08/20 00:30:00

几行代码实现神奇移动的过渡动画

1.效果如图&#xff1a; 2.实现&#xff1a; 假设需求为如上图&#xff0c;点击ViewController01后&#xff0c;ViewController01上的两张图片&#xff0c;移动到ViewContoller02中&#xff0c;其实两个ViewController的View上分别放置了这两张图&#xff0c;JXMagicMove就是实…

编程日记2024/08/20 00:20:00

php字符串处理函数相关操作

<?php//获取tech和98426这两个字符串$str "http://info.meadin.com/tech/98426_1.shtml";echo $newstr substr($str,7,strlen($str)); //info.meadin.com/tech/98426_1.shtml$arr explode(/,$newstr);$num $arr[1];//tech$user strstr($arr[2], _, true); /…

编程日记2024/08/20 00:10:00

介绍Zabbix的两种监控模式（主动模式和被动模式）

Zabbix agent检测分为两种模式&#xff1a;主动模式和被动模式 被动模式&#xff0c;也是默认的Zabbix监控模式&#xff0c;被动模式是相对于proxy来说的。proxy主动发送数据就是主动模式&#xff0c;proxy等待server的请求再发送数据就是被动模式。主动模式有个好处就是可以有…

编程日记2024/08/20 00:00:00

【Step By Step】将Dotnet Core部署到Docker下

一、使用.Net Core构建WebAPI并访问Docker中的Mysql数据库 这个的过程大概与我之前的文章《尝试.Net Core—使用.Net Core Entity FrameWork Core构建WebAPI&#xff08;一&#xff09;》一致。 但是在我们这里&#xff0c;由于docker中无法部署sql server&#xff0c;所以我采…

编程日记2024/08/19 23:50:00

ipad无法与itunes同步，提示因为这台电脑不再被授权使用在此ipad上购买的项目解决方案...

1、iOS设备用数据线连接到电脑&#xff1b;2、打开电脑上的iTunes 11&#xff0c;按CtrlB键调出菜单栏&#xff0c;按CtrlS键调出边栏&#xff1b;在边栏的 设备 下面看到你的iOS设备&#xff1b;3、点击菜单栏中的商店&#xff0c;点击 对这台电脑授权&#xff0c;输入你的App…

编程日记2024/08/19 23:40:00

iOS根据字节数截取字符串

最近项目有个需求&#xff0c;文章的作者最多显示7个中文字&#xff0c;英文字符算半个中文字&#xff0c;超过7个中文字&#xff0c;则显示&#xff1a;前7个中文字...&#xff0c;使用NSString的length方法&#xff0c;不管是一个中文还是英文字符&#xff0c;都是返回1。因此…

编程日记2024/08/19 23:30:00

搭建Zabbix分布式监控

1、实现zabbix监控nginx 实验环境&#xff1a; server1 172.25.1.1 server redhat7 test1 172.25.1.11 agent redhat7 在“手动添加”主机的基础上进行扩展 开启服务&#xff1a; [rootserver ~]# systemctl…

编程日记2024/08/19 23:20:00

Codeforces Round #372 (Div. 2), problem: (B) Complete the Word

水题&#xff0c;每次截取长度为26的字符串&#xff0c;然后直接进行修改就可以 然而本弱渣昨天wa看很久 include<bits/stdc.h> using namespace std; int n,c; int ans[30]; int main() { string s; cin>>s; int tt0; int ns.size(); if(n<26) { cout<<&…

编程日记2024/08/19 23:10:00

百练 2973 Skew数 解题报告

思路&#xff1a; 计算出每一个skew数的不同位数表示的权值&#xff0c;然后用该位与权值相乘。用int数组来装权值&#xff0c;用char数组来装skew数。 代码&#xff1a; #include<stdio.h> #include<string.h> int main() {int i, k, sum;int base[32];char skew[…

编程日记2024/08/19 23:00:00

【Python】在Mac系统中安装Pygame

我们通过Homebrew来安装Pygame&#xff0c;Homebrew是Mac OSX上的软件包管理工具&#xff0c;如果还没安装Homebrew&#xff0c;将以下命令粘贴至终端先安装Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install…

编程日记2024/08/19 22:50:00

zabbix部署onealert云警告平台

onealert告警功能 告警 All In One&#xff0c;支持微信、邮箱、短信、APP、电话告警支持接入 Zabbix、Nagios、阿里云、腾讯云、监控宝等等告警信息灵活的分配策略&#xff0c;可灵活的分配告警信息发送给相关人员微信、邮箱、app 等告警方式全部免费实验环境&#xff1a; 首…

编程日记2024/08/19 22:40:00

StringBuilder、StringBuffer、String区别

相信大家对 String 和 StringBuffer 的区别也已经很了解了&#xff0c;但是估计还是会有很多同志对这两个类的工作原理有些不清楚的地方&#xff0c;今天重新把这个概念给大家复习一下&#xff0c;顺便牵出 J2SE5.0 里面带来的一个新的字符操作的类—— StringBuilder &#xf…

编程日记2024/08/19 22:30:00

Class中isAssignableFrom() 方法

看Spring源码的时候看到这个方法&#xff1a; 1 protected WebApplicationContext createWebApplicationContext(ServletContext sc) { 2 Class<?> contextClass determineContextClass(sc); 3 if (!ConfigurableWebApplicationContext.class.isAs…

编程日记2024/08/19 22:20:00

【iOS】iOS10.3新增API:应用内评分

1、需求 在iOS10.3以前&#xff0c;APP引导用户评分时需要跳转到AppStore中操作&#xff0c;并且AppStore在国内有时加载会较慢&#xff0c;即便有的用户想给APP好评&#xff0c;但是等了几秒钟评分页面还没加载出来从而放弃。在iOS10.3中&#xff0c;苹果新增了APP内评分的新…

编程日记2024/08/19 22:10:00

dhcp动态主机配置协议

dhcp简介&#xff1a; 动态主机设置协议&#xff08;Dynamic Host Configuration Protocol&#xff0c;DHCP&#xff09;是一个局域网的网络协议&#xff0c;使用UDP协议工作&#xff0c;计算机网络应用层协议。 主要有两个用途&#xff1a;用于内部网或网络服务供应商自动分配…

编程日记2024/08/19 22:00:00