tinymce 富文本编辑器 java Struts2 从前台到后台数据之间的传递 显示在前台 生成环境具体使用
近段时间在研究tinymce 富文本编辑器,网上找不到符合自己实际情况的代码,现在将实现的整个过程把代码记录在此
第一步:下载tinymce 下载方法很多,网上都可以搜到具体的教程,这里强烈推荐官网下载。
第二步:将本网站是如何使用的网站代码贴出来
AddArticle.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>
<html>
<head>
<base href="<%=basePath%>">
<title>写文章-白雨青工作站</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="小说,我有一剑,Java,HTML,Java小工具,白雨青工作站,http://www.byqws.com:8080/byqws">
<meta name="description" content="小说,我有一剑,Java,HTML,Java小工具,白雨青工作站,http://www.byqws.com:8080/byqws/">
<!---->
<link rel="shortcut icon" href="img/byqws-apple-touch-icon-16X16.png" />
<link rel="apple-touch-icon" href="img/byqws-apple-touch-icon-57X57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/byqws-apple-touch-icon-72X72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/byqws-apple-touch-icon-144X144.png" />
<link rel="stylesheet" type="text/css" href="Background/css/addArticle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script src="Background/js/tinymce/tinymce.min.js" type="text/javascript" charset="utf-8"></script>
<script src="Background/js/tinymce/langs/zh-Hans.js" type="text/javascript" charset="utf-8"></script> <!--汉化-->
<script type="text/javascript" src="Background/js/AddArticle.js"></script>
<script type="text/javascript" src="Background/js/mytinymce.js"></script>
<script type="text/javascript" src="Background/js/uploadImg.js"></script>
</head>
<body>
<div class='main'>
<div class='title'>
<label >添加一篇文章</label>
</div>
<div class='FTitle_div'>
<input id="FTitle" class='FTitle' placeholder = '请输入标题'></input>
</div>
<div class='FAbstract_div'>
<input id="FAbstract" class='FAbstract' placeholder = '请输入摘要'></input>
</div>
<div class='content_div'>
<textarea id="content" class='content'></textarea>
</div>
<div class="FCover">封面图片</div>
<div class="upload-piclist">
<div class="upload-file">
<input type="file" id="file" accept="image/*" multiple onchange="imgChange()"/>
</div>
</div>
<input id="submitbutton" class='submitbutton' type = 'button' value = '提交'></input>
</div>
</body>
</html>
引入初始化的tinymce代码
<script type="text/javascript" src="Background/js/mytinymce.js"></script>
mytinymce.js
tinymce.init({
selector: '#content',
width:'100%',
height:500,
language:'zh-Hans',
/**/
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'table emoticons template paste help codesample'
],
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
'bullist numlist outdent indent | link image | codesample | print preview media fullpage | ' +
'forecolor backcolor emoticons | help |uploadimage',
menu: {
favs: {title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons'}
},
menubar: 'favs file edit view insert format tools table help',
// object_resizing: false,
paste_data_images: true,
relative_urls : false,
convert_urls: false,
images_upload_handler: function (file, success, failure) {//关键代码
var form = new FormData();
// console.log(blobInfo.filename())
// console.log(blobInfo.blob())
// base64
// console.log(file)
// console.log(file.filename())
// console.log(file.base64())
var condition = {};
// addJson(condition,"file.fileFileName",blobInfo.filename());
addJson(condition,"file.base64",file.base64());
// console.log(condition);
$.ajax({
url: 'uploadImage/uploadImage.action' ,
type: "post",
data: condition,
// dataType: 'json',
async : false,
// processData: false,
// contentType: false,
success: function (data) {
console.log("byq"+data);
var imgUrl =JSON.parse(data).url;//根据返回值得不同这里要自己定义
console.log(imgUrl);
success(imgUrl);
},
error: function (e) {
alert("图片上传失败");
}
});
}
});
function addJson(json,prop, val) {
// 濡傛灉 val 琚拷鐣?
if(typeof val === "undefined") {
// 鍒犻櫎灞炴?
// console.log('1=');
delete json[prop];
}
else {
// 娣诲姞 鎴?淇敼
// console.log('2=');
json[prop] = val;
}
}
Java Struts2 部分:
UploadImageManagementStruts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.enable.DynamicMethodInvocation" value="false" />
<constant name="struts.devMode" value="true" />
<package name="uploadImage" namespace="/uploadImage" extends="struts-default">
<action name="uploadImage" class = "com.byqws.blog.action.UploadImageAction" method="uploadImage" >
<result>
</result>
</action>
</package>
</struts>
UploadImageAction.java
package com.byqws.blog.action;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.byqws.blog.model.Article;
import com.byqws.blog.model.MyFile;
import com.byqws.blog.service.ArticleService;
import com.byqws.blog.service.impl.ArticleServiceImpl;
import com.byqws.story.model.Chapters;
import com.byqws.story.service.ChaptersService;
import com.byqws.story.service.impl.ChaptersServiceImpl;
import com.byqws.story.tools.Base64ToImg;
import com.byqws.story.tools.ReadApplicationProperties;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
public class UploadImageAction {
private HttpServletResponse response;
private HttpServletRequest request;
private static String json;
private String data = null;
private MyFile file;
// MyFile file = new MyFile();
public String uploadImage(){
response = ServletActionContext.getResponse();
request = ServletActionContext.getRequest();
System.out.println("v123vvbyq");
try {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
System.out.println("file.getFileFileName()="+file.getFileFileName());
System.out.println("file.getFileContentType()="+file.getFileContentType());
System.out.println("file.getFile()="+file.getFile());
System.out.println("file.file.base64()()="+file.getBase64());
// inf = new Information();
// data = request.getParameter(data);
// System.out.println(article.getFTitle());
// System.out.println(article.getFContent());
// System.out.println(article.getFAbstract());
//
// System.out.println("article.getFCoverBase64()="+article.getFCoverBase64());
// System.out.println("article.getFCoverBase64()="+article.getFCoverBase64().length());
// String s = article.getFCoverBase64();
// System.out.println("s=" + s.replaceAll("\\[\"", ""));
// ArticleService articleService = new ArticleServiceImpl();
//
// article.setFCoverBase64((article.getFCoverBase64().replaceAll("\\[\"", "")).replaceAll("\"\\]", ""));
// articleService.save(article);
ReadApplicationProperties r = new ReadApplicationProperties();
Base64ToImg b = new Base64ToImg();
String url = b.ToImg(file.getBase64(), r.read("articleImgPath")).replaceAll(r.read("articleHtmlPath"),r.read("articleXUNIPath"));
// String url = b.ToImg(file.getBase64(), r.read("articleHtmlPath")).replaceAll(r.read("articleHtmlPath"),"/byqws/blog/");
// String url = b.ToImg(file.getBase64(), r.read("articleHtmlPath"));
// String url = "http://localhost/blog/20230312022158173.png";
json = "{\"success\":\"true\",\"msg\":\"'提交成功!'\",\"url\":\""+url+"\"}";
//将流打到客户端
System.out.println("json="+json);
out.print(json);
//清空缓存
out.flush();
//关闭流
out.close();
// System.out.println(iparentId);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
public String getData() {
return data;
}
public void setData(String data) {
this.data = data;
}
public MyFile getFile() {
return file;
}
public void setFile(MyFile file) {
this.file = file;
}
}
MyFile.java
package com.byqws.blog.model;
import java.io.File;
public class MyFile {
private File file;
private String fileFileName;
private String fileContentType;
private String blobInfo;
private String base64;
public File getFile() {
return file;
}
public void setFile(File file) {
this.file = file;
}
public String getFileFileName() {
return fileFileName;
}
public void setFileFileName(String fileFileName) {
this.fileFileName = fileFileName;
}
public String getFileContentType() {
return fileContentType;
}
public void setFileContentType(String fileContentType) {
this.fileContentType = fileContentType;
}
public String getBlobInfo() {
return blobInfo;
}
public void setBlobInfo(String blobInfo) {
this.blobInfo = blobInfo;
}
public String getBase64() {
return base64;
}
public void setBase64(String base64) {
this.base64 = base64;
}
}
Base64ToImg.java
其中 :ReadApplicationProperties r = new ReadApplicationProperties();
ReadApplicationProperties 类是用来读取配置文件Properties内容的,相关方法网上也有很多,这里不多写,后期会单独写一篇文章专门讲。
到此所有代码都已就位
现在来看效果图
有问题的请联系我,
QQ:1056900846
微信: